study hard and make progress every day
This article has included to my lot DayDayUP:github.com/RobodLee/DayDayUP warehouse, welcome Star
1. Title tags
<h1> </h1>……<h6> </h6>
In order to make web pages more semantic, we often use title tags in pages. HTML provides 6 levels of page titles namely < H1 >-< H6 >
2. Paragraph and newline tags
In the HTML tag,
The tag is used to define paragraphs, which can divide the entire page into thousands of paragraphs
Newline tag:
In HTML, the text in a paragraph is arranged from left to right, up to the right end of the browser window, and then wrapped. If you want to force a line break for a piece of text, use the line break tag
3. Format labels with text
Bold: or
Tilt: or < I >
Delete line:
orUnderline: or
4. <div></div>and<span></span>
is a big box. You can only fit one big box in a row
<div style="background-color: brown;">111</div>
<div style="background-color: bisque;">222</div>
<div style="background-color: aqua;">333</div>
Copy the code
is a small box that can hold more than one line
5. Image labels
| attribute | Attribute values | instructions |
|---|---|---|
| src | Image path | Must attribute |
| alt | The text | Replace text. Image cannot display text |
| title | The text | Prompt text. Mouse over the image to display the text |
| width | pixel | Sets the image width |
| height | pixel | Sets the height of the image |
| border | pixel | Sets the border thickness of the image |
6. Hyperlink labels
< a href=" target "target=" target "> text or image </a>
| attribute | role |
|---|---|
| href | The ur address used to specify the link target, (required attribute) When the href attribute is applied to the tag, it functions as a hyperlink; Href = “#” means this is an empty link; If the href contains a file or zip file, the file will be downloaded |
| target | Used to specify how the linked page is opened, where_selfFor the default value (open in this window),_ blankTo open in a new window |
7. Anchor links
<a href="# id"></a>
When a link is clicked, it jumps to the location of the specified element.
8. Comments and special characters
Comments with “<! Start with – and end with ->.
Special characters:
| Special characters | describe | Character code |
|---|---|---|
| Spaces | |
|
| < | Less than no. | < |
| > | More than no. | > |
| & | and | & |
| RMB | yuan | ¥ |
| © | copyright | © |
| ® | The registered trademark | ® |
| ℃ | c | ° |
| Plus or minus | Plus or minus | ± |
| x | Multiplication sign | × |
| present | devide | ÷ |
| squared | Squared two | ² |
| after | Three to the third | ³ |
9. Form labels
is the label used to define the table.
The tag is used to define rows in the table and must be nested within the < TABLE >
tag< TD >
is used to define cells in the table and must be nested within the < tr>
tagindicates the header of the table. It indicates the first row or column of the table. The text content is displayed in bold and centered
is used to define the header of the table. The < thead> must have a < tr> tag inside, usually on the first line
is used to define the body of the table, which is mainly used to put the data body.
Some common attributes:
| The property name | Attribute values | describe |
|---|---|---|
| align | Left, center, right | Specifies the alignment of the table with respect to surrounding elements |
| border | 1, or “” | Specifies whether a table cell has a border. Default is “”, indicating no border |
| cellpadding | Pixel values | Specifies the space between the edge of the cell and its contents, default 1 pixel |
| cellspacing | Pixel values | Specifies white space between cells, default 2 pixels |
| width | Pixel value or percentage | Specify the width of the table |
| height | Pixel value or percentage | Specify the height of the table |
| rowspan | Number of cells to merge | Merge row cells, remembering to remove excess cells |
| colspan | Number of cells to merge | Merge column cells, remembering to delete any extra cells |
<table border="1" cellspacing="0" width="500" height="250">
<thead>
<tr>
<th>1 meter</th>
<th>2 meter</th>
<th>3 meter</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td align="left" rowspan="2">111</td>
<td colspan="2">222</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
</tbody>
</table>
Copy the code
10. List labels
: defines an unordered list, in which only li tags can be placed. Other tags are not allowed
< OL >
: defines an ordered list, in which only li tags can be placed, other tags are not allowed: List items in ordered and unordered lists, which act as containers for other labels
: defines a custom list that can only contain dt and DD tags
: Defines items in a custom list
< DD >
: Describes each item in the custom list
<ul>
<li>Unordered list</li>
<li>Unordered list</li>
<li>Unordered list</li>
</ul>
<ol>
<li>An ordered list</li>
<li>An ordered list</li>
<li>An ordered list</li>
</ol>
<dl>
<dt>Help center</dt>
<dd>Account management</dd>
<dd>Shopping guide</dd>
<dd>Order operation</dd>
<dt>Service support</dt>
<dd>After sales policy</dd>
<dd>self-service</dd>
<dd>Related to download</dd>
</dl>
Copy the code
11. Form labels
A form usually consists of a large form field that contains form elements and prompts.
: the form field tag. A form field is an area that contains form elements
| attribute | Attribute values | role |
|---|---|---|
| action | The url address | Used to specify the URL of the server program that receives and processes the form data |
| method | get / post | Used to set how form data is submitted |
| name | The name of the | Use to specify the name of the form to distinguish multiple form fields within a page |
: Enter form elements
: Bind to a form element. When clicking the text in the Lable tag, the focus is automatically shifted to the corresponding form element. The for attribute of the Lable tag must be the same as the ID attribute of the related element < SELECT >
: dropdown form element that defines a dropdown list: element in the drop-down list. When the **selected= “selected” ** attribute is defined, the current item is the default selected item
Common attributes of the tag:
| attribute | Attribute values | describe |
|---|---|---|
| type | See the table below | Used to set the<input/>Different forms of tags |
| name | User defined | Define the name of the input element |
| value | User defined | Sets the default value for the input element |
| checked | checked | Sets this input element to be selected when first loaded |
| maxlength | Positive integer | Specifies the maximum length of characters in an input field |
Tag type attribute value:
| Attribute values | describe |
|---|---|
| button | Define clickable buttons |
| checkbox | Define check boxes. A set of check box name attributes must be the same |
| file | Define input fields and browse buttons for file upload |
| hidden | Define hidden input fields |
| image | Define submit buttons in the form of images |
| password | Defines a password field in which the characters are masked |
| radio | Define radio buttons that must have the same name attribute value for a group of radio buttons |
| reset | Define a reset button to clear all data in the form |
| submit | Define a submit button to submit to the address specified by the Action property |
| text | Defines a single-line input field into which the user can enter text, with a default width of 20 characters |
<form action="xxx.jsp" method="GET">
<table width="500">
<tr>
<td>gender</td>
<td>
<input type="radio" id="man" name="sex"/>
<label for="man"><img src="images/man.jpg"> 男 </label>
<input type="radio" id="women" name="sex"/>
<label for="women"><img src="images/women.jpg"> 女 </label>
</td>
</tr>
<tr>
<td>birthday</td>
<td>
<select name="year">
<option selected="selected">-- Please select year --</option>
<option>1990</option>
<option>2000</option>
<option>2010</option>
</select>
<select name="month">
<option selected="selected">-- Please select month --</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="day">
<option selected="selected">Please select the date</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</td>
</tr>
<tr>
<td>In the area</td>
<td>
<input type="text" value="Anhui province" name="area">
</td>
</tr>
<tr>
<td>Marital status</td>
<td>
<input type="radio" name="marital_status" id="spinsterhood">
<label for="spinsterhood">unmarried</label>
<input type="radio" name="marital_status" id="married">
<label for="married">married</label>
<input type="radio" name="marital_status" id="divorce">
<label for="divorce">divorce</label>
</td>
</tr>
<tr>
<td>Record of formal schooling</td>
<td><input type="text" name="edu_bg"></td>
</tr>
<tr>
<td>Your Favorite type</td>
<td>
<input type="checkbox" name="like_type" id="wumei">
<label for="wumei">enchanting</label>
<input type="checkbox" name="like_type" id="keai">
<label for="keai">lovely</label>
<input type="checkbox" name="like_type" id="xiaoxianrou">
<label for="xiaoxianrou">Small meat</label>
<input type="checkbox" name="like_type" id="laolarou">
<label for="laolarou">Preserved ham</label>
<input type="checkbox" name="like_type" id="douxihuan">
<label for="douxihuan">All like</label>
</td>
</tr>
<tr>
<td>To introduce myself</td>
<td>
<textarea cols="30" rows="10" name="self_introduction"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Free registration">
</td>
</tr>
</table>
</form>
Copy the code
Code word is not easy, if you can, give me a like, favorites, follow
If you like my article, please follow the wechat official account “R o B O D”.