Font tags are font tags

Color is a color attribute and size is a size attribute. Values are 1-7,1 minimum, and 7 maximum Face attributes set the font of the textCopy the code

Requirement 1: Display the I am font label on the web page and change the font to Song Typeface and color to red. For example:

<font color="red" face=" regular "size="7">Copy the code

Special characters

< special character &lt; > special characters &gt; Space special characters & NBSP; HTML converts consecutive whitespace characters to a single space for processing.Copy the code

Requirement 1: Convert the < BR > line feed tag to text and to characters for display on the page example:

I'm & lt; br&gt; Handsome! < br / > I'm & have spent &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Handsome!Copy the code

The title tag

H1-h6 are all title tags h1 Maximum H6 minimum align attribute Left align left (default) Center center right align rightCopy the code

Requirement 1: Demonstrate examples of headings 1 through 6:

Title < h1 align = "left" > 1 < / h1 > title < h2 align = "center" > 2 < / h2 > < h3 align = "right" > title < / h3 > < h4 > title 4 < / h4 > < h5 > title < / h5 > 5 < h6 > title 6 < h6 >Copy the code

A label

The target attribute sets which window to jump to. _self indicates the current window (the default). _blank Opens a new window to jump toCopy the code

For example:

< a href = "http://www.baidu.com" > baidu < / a > < br / > < a href = "http://www.baidu.com" target = "love" > baidu love < / a > < br / > < a Href = "http://www.baidu.com" target = _blank "_blank" > baidu < / a > < br / >Copy the code

A list of tags

Ul is an unordered list and the type property is the symbol before each list item and Li is the list itemCopy the code

Requirement 1: Show northeast F4, Liu Neng, Zhao Si, Song Xiaobao and Xiao Shenyang in the way of disordered list for example:

Northeast F4 < h1 > < / h1 > < ul type = "none" > < li > liu can < / li > < li > zhao four < / li > < li > Song Xiaobao < / li > < li > small shenyang < / li > < / ul >Copy the code

Img tags

SRC set the path of the image you want to display Alt If the path cannot find the image Height set the height of the image width set the width of the image border Set the border size of the image JavaSE paths are also divided into relative paths and absolute paths: absolute path: drive letter: \ directory \ file name Relative path: Calculate paths on the Web from the project name: Relative path and absolute path Relative path. Represents the current directory.. Said the higher level directory resource name Equivalent. / resource name (. / can be omitted) an absolute path name http://localhost:8080/imgs/10.jpg http://ip:port/ project/resource name JavaSE the absolute path cannot be used in the HTML page.Copy the code

Requirement 1: Use the IMG tag to display a photo of a beautiful woman. And modify the width and height, and border properties example:

<img Alt =" SRC =".. /imgs/1.jpg" height="120" width="100" border="1"/> <img Alt =" <img Alt =" SRC =".. / 3. JPG "height =" 120 "width =" 100 "border =" 1 "/ > < img Alt =" beauty can't find "SRC =".. / imgs / 4. JPG "height =" 120 "width =" 100 "border =" 1 "/ > < img Alt =" beauty can't find "SRC =".. / imgs / 5. JPG "height =" 120 "width =" 100 "border =" 1 "/ > < img Alt =" beauty can't find "SRC =" http://localhost:8080/imgs/10.jpg "height =" 120"  width="100" border="1"/>Copy the code

Table form

Border is the border of the table; width is the width of the table; height is the height of the table; tr is the row of the table; TD is the cell of the table; align is the alignment property; th is the header of the table. The b tag is bold so that the contained content is centeredCopy the code

Requirement 1: Make a three-row, three-column table with a table header and display borders requirement 2: Modify the table width, height, table alignment, and cell spacing. For example:

< center > < table border = "1" width = "200" height = "200" cellspacing = "0" > < tr > < th > 1.1 < / th > < th > 1.2 < / th > < th > 1.3 < / th > < / tr > < tr > < td > 2.1 < / td > < td > 2.2 < / td > < td > 2.3 < / td > < / tr > < tr > < td > 3.1 < / td > < td > 3.2 < / td > < td > 3.3 < / td > < / tr > < / table > < / center >Copy the code

Table that spans rows and columns

The colSPAN property sets the number of columns the cell occupies. The RowSPAN property sets the number of rows the cell occupiesCopy the code

Requirement 1: Create a five-row, five-column table with cells in the first row and column 1 spanning two columns, cells in the second row and column 1 spanning two rows, and cells in the fourth row and column 4 spanning two rows and two columns. For example:

< table border = "1" cellspacing = "0" height = "500" width = "500" > < tr > < td colspan = "2" > 1.1 < / td > < td > 1.3 < / td > < td > 1.4 < / td > 1.5 < / td > < td > < / tr > < tr > < td rowspan = "2" > 2.1 < / td > < td > 2.2 < / td > < td > 2.3 < / td > < td > 2.4 < / td > < td > 2.5 < / td > < / tr > < tr > 3.2 < / td > < td > < td > 3.3 < / td > < td > 3.4 < / td > < td > 3.5 < / td > < / tr > < tr > < td > 4.1 < / td > < td > 4.2 < / td > < td > 4.3 < / td > < td colspan = "2" Rowspan = "2" > 4.4 < / td > < / tr > < tr > < td > 5.1 < / td > < td > 5.2 < / td > < td > 5.3 < / td > < / tr > < / table >Copy the code

Iframe frame tag (embedded window)

The iframe tag can open a window on a page and load (display) the content of a page separately. The SRC attribute sets the address of which page to display separately. Use the iframe and a tag together. 1. Set the name attribute for the iframe tag. 2. Set the target attribute of the A tag to the name attribute of the iframe to jump toCopy the code

For example:

HTML "width="500" height="300" name=" BBJ "></iframe> <ul> <li><a href="1.font tag.html" BBJ target = "" > 1. The font tags. HTML < / a > < / li > < li > < a href =" 2. Special characters. The HTML "target =" BBJ "> 2. Special characters. The HTML < / a > < / li > < li > < a href =" 3. Title tag. HTML "target =" BBJ "> 3. The title tag. HTML < / a > < / li > < li > < a href =" 5. Img tags. HTML "target =" BBJ "> 5. Img tags. HTML < / a > < / li > < / ul >Copy the code

The form tag

Input type=text represents a normal text input field and the value property is the default value of the text field. Input type= Password represents a password input field. Input type=radio represents a single box The name property can group them checked="checked" means that by default input type=checkbox form a filter box checked="checked" means that by default input type=submit is the submit button The value property can modify the text of the button. Input Type =reset is a reset button. The value property can modify the text of the button so that all form items are restored to their default values Type =file Indicates the file upload domain. Input type=hidden Indicates the hidden domain. When we need to send some information to the server that we don't want the user to see. This is where you can use hidden domains. Select is a drop-down list box option is an option in the drop-down list. Selected ="selected" means it's selected by default. Textarea means multiple lines of textCopy the code

For example:

<form action=""> User name: <input type="text"><br/> Password: <input type="password" /> <input name="sex" type="radio" /> male <input name="sex" type="radio" /> female <br/> Select interest: <input type="checkbox" /> Drinking <input type="checkbox" /> smoking <input type="checkbox" /> <select> <option> Chinese </option> < Option > American </option> < Option > Japanese </option> </select><br/> <textarea rows="10" cols="20"></textarea><br/> <input type="submit" value=" reset"/> </form>Copy the code

Example of adding a table to a form:

Registered users < center > < h1 > < / h1 > < form action = "" > < table > < tr > < td > username: < / td > < td > < input type =" text "> < / td > < / tr > < tr > < td > password: < / td > < td > < input type = "password" / > < / td > < / tr > < tr > < td > confirm password: < / td > < td > < input type = "password" / > < / td > < / tr > < tr > < td > select gender: < / td > < td > < input name = "sex" type = "radio" / > male < input name = "sex" type = "radio" / > women < / td > < / tr > < tr > < td > interests: </td> <td> <input type="checkbox" /> Alcohol <input type="checkbox" /> smoking < TD > Select nationality: </td> <td> <select> <option> Chinese </option> <option> American </option> <option> Japanese </option> </select> </td> </tr> <td> < / td > < td > < textarea rows = "10" cols = "20" > < / textarea > < / td > < / tr > < tr > < td > < input type = "submit" value = "registration" / > < / td > <td><input type="reset"/></td> </tr> </table> </form> </center>Copy the code

Form is the address of the server to which the form is submitted action Method The way the request is made GET or POST

When we submit the form. If the data for the form item is not sent to the server 1. The form item must have a name attribute, and there is no name attribute when submitting the form. Data is not sent to the server. 2. Option, check box, and (optional drop-down list items). All add a value attribute. Otherwise only the value on will be submitted to the server. If the form item is not in the submitted form, the data is not sent to the server. The difference between GET and POST requests

The address bar of the browser displays the action attribute +? + Request parameters (form information) for example: http://localhost:8080/? Action =add&username=wzg168&password=123456&sex= boy&Hobby = hj&Country = CN&desc =1234 1. The browser address bar only has the action property value. 2Copy the code

Div, SPAN, p tags

Div: the div tag (block tag) occupies a single line by default. Span: is an inline tag. The default width is the length of the encapsulated dataCopy the code

Requirement 1: Demo of div, SPAN, P tags

</div> <div> <span> SPAN tag 1</span> <span> SPAN tag 2</span> <p> Paragraph 1</p> <p> Paragraph 2</p>Copy the code