Home  >  Article  >  Web Front-end  >  Getting Started with HTML—Quickly Mastering it in One Day

Getting Started with HTML—Quickly Mastering it in One Day

黄舟
黄舟Original
2016-12-22 14:49:171301browse

Extraword

If you know nothing about html and are still worried about how to get started with html, the author highly recommends that you study this article, which will help you quickly master html. If you are already a master of html, then I also hope that you can Give me better advice.


Summary

HTML, commonly known as HyperText Markup Language, is the abbreviation of Hyper TextMarkup Language and is a markup language used to describe web page documents. The web page file itself is just a text file. By adding mark symbols to the text file, we can tell the browser how to display the content (such as how to process text, how to arrange pictures, how to display pictures, etc.). These mark symbols are what we html, we learn html by learning these mark symbols. Today we mainly learn some common html mark symbols, also called html elements,

tag elements

tag introduction

html elements include one or a pair of tag definitions of inclusion. The label is composed of two strings "". The label includes the start tag "" and the end tag ">".

html tag elements have four forms:

Empty element:

Empty element with attributes:

Element with content:

Element with content and attributes:This is the content

One thing to say here is that in the html document, Tag and attribute names are size independent.

A necessary basic element of the HTML framework

represents the beginning and end of the document

represents the beginning and end of the document head

), the exclamation mark (!), there is no space between the less than sign and the exclamation mark, followed by two dashes (--), then the comment content, and finally two dashes (--) and the greater than sign (>). <p>For example: <!--This is the comment content--></p> <p> </p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>tags related to paragraph control</p> <p><palign></palign></p> <p>Create a paragraph, and the attribute align indicates the alignment of the paragraph Method, # can be left, center, right, justify. </p> <p><br></p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>The function is to break the line </p> <p><hrcolor></hrcolor></p> <p>The function is to insert a horizontal line, and the attribute color is used to represent the color. </p> <p> </p> <p>Tag related to text display </p> <p></p> <center>…</center> <p> Center the text </p> <p><hnalign></hnalign></p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>The function is to represent the document The title, n is an integer from 1 to 6, once is the maximum title, 6 is the minimum title, align is to set the title alignment, including left, center, right</p> <p><fontsize color="#">. ..</fontsize></p> <p>Set the font, size is the font size, an integer from 1 to 7, the larger the number, the larger the font. </p> <p><b>...</b></p> <p>Make text bold. </p> <p><i>…</i></p> <p>Make text italic </p> <p> </p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>Tabs created by list elements</p> <p>a. Create a numbered list: </p> <p></p> <ol>... ol>Use the start attribute to set the starting sequence number. <p></p> <li>...</li>Use the value attribute to change the sequence of numbers in the list. <p> </p> <p>b. Create a list with items matching: </p> <p></p> </ol> <ul> and <li>. The type attribute of their labels specifies the style of the symbol: <p> disc, displayed as a solid circle; </p> <p> square, Shows unfilled squares.显示 CIRCLE, showing unsatisfactory circles </p> <p>B. Establish unsigned lists </p> <p> & lt; dl & gt; and & lt; dt & gt; label to create unsigned lists </p> <p> & lt; dd & gt; dt & gt; Indented list </p> <p> </p> <p> Label of table element </p> <p> The role of table in web page layout is crucial. Table is defined with </p> <table>, <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal> is specifically defined as: <tableborder align="#" bgcolor="rgb"></tableborder></p> <p>The border attribute is used to define the width of the table border, and the align attribute is used to set the alignment of the table, which can be left, right, or center. bgcolor is color. </p> <p> </p> <p></p> <caption>…</caption>Used to define the title of the table <p></p> <tr>...</tr>Add a new row to the table <p></p> <th>…</th>> ;Used to define headers <p></p> <td>…</td>Used to define cells <p> </p> <p>html interactive form </p> <p>The form is mainly responsible for data collection functions in web pages, such as our usual registration information, input All information that can be interacted with on a web page are forms. </p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>Forms are created using </p> <form>...</form> elements. By embedding other related elements or controls between the two, you can create a form as part of the html document. <p>The basic syntax for creating a form is as follows: </p> <p><formmethod or post action="URL">….</formmethod></p> <p>The attribute method is used to specify the method used when sending form data to the server The HTTP method can be either get or post. The submitted data is appended to the end of the URL and sent to the server as part of the URL. </p> <p>The following are some commonly used elements about forms: </p> <p></p> <p></p> <input> element is used to receive information entered by the user. It is an empty element with attributes. The syntax used to create controls in the form is <p><br> <inputtype name="name" size="size" value="value'></p><p></p><p></p>The attribute type is used to specify the type of control to be created, and the attribute is used to specify the name of the control. size is used to specify the initial width of the control in the form, and the attribute value specifies the initial value of the control. <p><br/></p><p></p>For the type, please refer to the following picture: <p><br/></p><p></p>List box element<p><img src=" https: title="1482389300462397.png" alt="Getting Started with HTML—Quickly Mastering it in One Day"></inputtype>allows the user to select from a drop-down menu. Select one or more items in the list box. The list box is created by the <select> element. Each option in the list box is provided by the <option> element. </option></select></p> <p></p> <p></p>Multi-line text input control<p><br><textareaname rows="number of rows" cols="number ofcolumns">…</textareaname></p> <p>The attribute rows is used to specify the number of text lines displayed in the visual area of ​​the text box input control, cols specifies the visual area of ​​the text input control Displayed width. </p> <p></p> <p>Hyperlink tag</p> <p><ahref></ahref></p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>The href attribute is used to specify the target of the link. The target address has URL positioning at the beginning. The text between the tags <a></a> will be used as the link text displayed in the browser </p> <p></p>.<p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>Embedded image tag</p> <p><img src="URL" style="max-width:90%" height="m" alt="Getting Started with HTML—Quickly Mastering it in One Day" >The attribute src specifies the location of the image resource, and the attributes width and height are used to specify the size of the image. It should be noted here that src should be used as much as possible Relative paths instead of absolute paths. </p> <p> </p> <p> </p> <p style="margin: 0px; padding: 0px; font-size: 14px; font-weight: 400; word-wrap: break-word; word-break: break-all; color: rgb(68, 68, 68); font-family: " microsoft yahei simsun narrow white-space: normal>Special character elements </p> <p>Special characters include character references and entity references. Below we will summarize the commonly used ones</p> <p><img src="https://img.php.cn//upload/image/973/669/467/1482389320383355.png" title="1482389320383355.png" alt="Getting Started with HTML—Quickly Mastering it in One Day"></p> <p style="margin: 0px auto; padding: 0px; font-size: 18pt; word-wrap: break-word; word-break: break-all; width: 626px; height: auto; border-bottom: 1px dashed rgb(221, 221, 221); font-family: 黑体; color: rgb(68, 68, 68); white-space: normal;">Summary</p> <p>We will summarize some of the most commonly used and most basic tag elements. To summarize, once you master these basics, you can quickly become a junior HTML person. It is not a problem to write a simple HTML web page. This also lays the foundation for further learning in the future. The above is the introduction to HTML - quickly master it in one day. For more related content, please pay attention to the PHP Chinese website (www.php.cn)! </p> <p><br></p> <p></p> </table> </li> </ul>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn