1. Basic knowledge of HTML

Keywords: Attribute Javascript

1.1 Title Label

<hn></hn>
  • n: 1-6
  • h1 maximum h6 minimum
  • Automatic line wrapping and blank default bolding
  • Common attributes:
1. align: alignment
 2. left: left right: right center: Center
 3. Format: <h2 align= "center">.</h2>

Case code

<h1 align="center">Ha-ha</h1>

1.2 font label (specifying the font, font size, font color of text)

Common attributes:

  • face: Font
  • size: size, ranging from 1 to 7
  • color:

Case code

<font size="7" color="blue">Ha-ha</font>
<font size="7" color="#0000ff">Ha-ha</font>
<font face="Microsoft YaHei">hehe</font>

1.3 Other labels

- Roughening: < b > </b >, < strong > </strong > 
- italics: < I > </i > 
- Paragraph label: (<p></p>)
- Horizontal line: <hr/> 
- Line change: <br/>

1.4 Picture Labels:

Common attributes:
1. alt: Substitute text (Substitute text for picture if the picture path is not displayed properly)
2. title: Move to the text displayed in the picture
3. width: Width (pixels: 123 px, percentage: 20%)
4. height: high (pixels: 123 px, percentage: 20%)
5. src: Picture Path

  • Relative Path
  • / or write nothing about the current directory
  • . / Superior Catalogue
  • Absolute Path

Case code

<img src="../img/logo2.png" title="Ha-ha" width="20%" height="120px">

<img src="../img/logo21.png" alt="Dark horse log" >

1.5 List Tags

Ordered: <ol></ol> 
Disorder: < UL > </ul > 
List item: < Li ></li>
type property, setting the shape before the list

Case code

<ul type="circle">
    <li>haha</li>
    <li>hehe</li>
    <li>xixi</li>
</ul>
<ol type="A">
    <a href="http://baidu.com"><li>haha</li></a>
    <a href="http://baidu.com" target="_blank"><li>hehe</li></a>
    <a href="#"><li>xixi</li></a>
</ol>

1.6 hyperlinks:

Common attributes

  • href: Jump Path
    • # Current page
    • Javascript:void(0): No jump
  • target: Open there
    • Default: _self (current page open)
    • _ blank (open in blank page)

1.7 Form Labels:

Commonly used sub-labels: <tr></tr>
 - <tr> </tr>:
    1. Common sub-labels:
        -<td> Column:
            - Common attributes of td:
            - align: content alignment
            - colspan: Cross-column merge value: number of columns merged
            - rowspan: Cross-line merge
        - <th>: Table header cells are centered and bolded by default
    2. Common attributes of tr:
        - align: content alignment
 - Common attributes of table:
    - border: border Pixel Value
    - width:
    - lign: Form alignment

Case code

<table border="1" width="40%" height="200px" align="center" bgcolor="antiquewhite">
    <tr>
        <th>hehe</th>
        <th>hehe</th>
        <td>hehe</td>
    </tr>
    <tr align="center">
        <td rowspan="2">11&&21</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr align="right">
        <td>22</td>                                 
        <td>23</td>
    </tr>
    <tr>
        <td colspan="2">31&&32</td>
        <td align="center">33</td>                                  
    </tr>
    <tr>
        <td>41</td>
        <td>42</td>                                 
        <td>43</td>
    </tr>
</table>

1.8 Form Page

Form label: < form > </form >
1. Common attributes:

  • method: How the form is submitted: get (default) and post
  • action: The path to submit information defaults to the current page
1. The difference between get and post:
- The get request appends all parameters to the address bar, and the post request does not.
- get request parameter size is limited, post request parameter size is not limited
 - post is safer than get
  1. Common subtags
    • input 
Common attributes:
type:
    text: Textbox default
    password: password Box
    Radio: radio: radio box
    checkbox: multiple checkboxes
    file: file box

    submit: submit
    reset: reset
    Button: Normal button

    Hidden: Hidden fields can submit past submissions when they are hidden on the page
    image: Picture submission instead of submit 
    date: Some browser support
name:
    You can set several radio boxes (check boxes) into a group
    To save information to the server, you must have the name attribute
readonly:
    readonly="readonly" read-only
disabled:
    disabled="disabled" disabled
  • select: Drop-down
Format:
    <select name="pro">
        < option > Heilongjiang </option >
    </select>
  • textarea: Text Domain
Common attributes:
    cols:column
    rows:row

Be careful:

  • Handwritten content for text box password box text field passed
  • For check boxes and multiple check boxes, values are not passed in
  • To pass values in the past, you must set the value attribute
  • If you want to pass the value of the selected content to the drop-down selection, add the value attribute.

Set default values:

  • Textbox Password Box: Just add the value attribute
  • Checkboxes: Add checked="checked"
  • Drop-down Selection: Add Select="selected"
  • Text field: tag body

Case code

<form action="" method="get">
    Full name:<input type="text" name="usename" value="dml" readonly="readonly"/><br/>
    Password:<input type="password" name="password" value="123" disabled="disabled"/><br/>
    Gender:<input type="radio" name="sex" value="1"/>male
        <input type="radio" name="sex" value="0" checked="checked"/>female
    <br/>
    Hobbies:<input type="checkbox" name="habit" value="look" checked="checked"/>Read a Book
    <input type="checkbox" name="habit" value="sleep"/>Sleep?
    <input type="checkbox" name="habit" value="movie"/>Watch movie
    <input type="checkbox" name="habit"value="play" checked="checked"/>play
    <br/>
    Head portrait:<input type="file" name="photo"/><br/>
    Origin:<select name="pro">
            <option value="000" selected="selected">Please choose</option>
            <option value="001">Hezhou</option>
            <option value="002">city in Guangxi</option>
            <option value="003">Yulin</option>
            <option value="004">Wuzhou</option>
        </select>
        <select name="city">
            <option value="00" selected="selected">Please choose</option>
            <option value="01">Zijin Mountain</option>
            <option value="02">The Liujiang River</option>
            <option value="03" >Beiliu</option>
            <option value="04">Cangwu</option>
        </select>
    <br/>
    Self introduction.<br />
    <textarea name="intr" cols="40" rows="4" hidden="hidden">Ha-ha</textarea>
    <br/>
    <input type="submit" /> &nbsp;&nbsp;&nbsp;<input type="reset" />&nbsp;&nbsp;&nbsp;<input type="button" value="Ordinary button"/>
</form>

1.9 Framework Page: Frameeset

  1. Common attributes:
    • cols: Vertical Cutting
    • For example: cols = "40%, 60%"
    • For example: cols = "40%,*, 10%"
    • rows: horizontal cutting
  2. Common subtags:
    • frame
    • Common attributes:
      • src: The url of the displayed page
      • name:
    • Note: It's better not to coexist with body.

Case code

<! - Cut the page horizontally into three parts - >
<frameset rows="18%,*,10%">
    <frame src="head.html"/>
    <frameset cols="20%,*" >
    <! - Cut the middle page vertically into two parts - >
        <frame src="left.html" />
        <! - The page that jumps after the hyperlink clicks on the left. HTML page is displayed on the page named = "main"
        <frame src="main.html" name="main"/>
    </frameset>
    <frame src="foot.html"/>
</frameset>

left.html code

<body>
<h2><a href="people.html" target="main">Personnel management</a></h2>
<h2><a href="shop.html" target="main">Commodity management</a></h2>
<h2><a href="system.html" target="main">system management</a></h2>
</body>

1.10 escape character

>   &gt;  //great then
<   &lt;
&   &amp;
Spaces & nbsp;

1.11 yuan information: meta

<meta charset="UTF-8"><!--Specify what code the browser uses to open this page-->

Posted by prinzcy on Sun, 09 Jun 2019 14:27:51 -0700

Hot Keywords

©2025 Programmer Group