HTML

concept

HTML ( Hyper Text Markup Language HTML ) is the most basic web development language

Hypertext : Hypertext is a hyperlink mesh text method, together with a variety of text messages spatial organization.
Markup Language : a tag language configuration. <Tag name> as html, xml
- Markup Language is not a programming language

Getting Started

grammar

html document suffix name is .htmlor .htmboth exactly the same meaning
Label classification
- Containment Tags: have start and end tags <html> </html>
- Self-closing and tags: start and end tags together <br/>
Tags can be nested : the need for properly nested, you can not have me, I have you.
And then start tag can be defined attributes. Constituting a key property is the value required marks (marks can be single or double)
html tags are not case sensitive, but it is recommended to use lowercase

Sample Code

<html>
    <head>
        <title>这是Title</title>
    </head>

    <body>
        <font color="red">Hello World</font> <br/>
        <font color="green">Hello World</font>
    </body>
</html>

HTML tag - file label

Constitute the most basic html tags

<html>

Html document root tag
<head>

Head tag. Some attribute is used to specify html document. The introduction of external resources
<title>

Title tag.
<body>

Body tag.
<!DOCTYPE html>

Custom document type

HTML tags - the text label

And related text labels

<h1> to <h6>: Title Tag
- The latter figure representing different levels of labels
- As the number increases, decreasing font
<p>: Paragraph tag, after a passage automatic line feed
<br>: Break tag
<hr>: Horizontal label h5 not supported
- color: color properties
- width: width
- size: thickness
- align: left right center alignment
<b>: Bold font
<i>: Italic
<font>: Font tags h5 no longer support
- color: color
- size: size
- face: font style
<center> h5 has not supported such that the label elements in the center tag center
Attribute definitions:
- color：
  - red green blue
  - Range value (val1, val2, val3) rgb 0 ~ 255
  - ffffff
- width：
  - Values: width = "20" is the default value of the unit pixel px
  - Value%: expressed as the ratio relative to the parent element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 注释内容 -->
    <!-- br 换行 -->
    白日依山尽<br/>
    黄河入海流<br>

    <!-- 标题标签 h1~h6 -->
    这是一个标题<br/>
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <h4>这是一个标题</h4>
    <h5>这是一个标题</h5>
    <h6>这是一个标题</h6>

    <!-- 段落标签 <p> -->
    1 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    2 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    3 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    4 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    <p>1 这是一段话，这是一段话，这是一段话，这是一段话。</p>
    <p>2 这是一段话，这是一段话，这是一段话，这是一段话。</p>
    <p>3 这是一段话，这是一段话，这是一段话，这是一段话。</p>
    <p>4 这是一段话，这是一段话，这是一段话，这是一段话。</p>

    <!-- 显示水平线 hr -->
    <hr color="blue" size="5" align="left" width="200"/>

    <!--  加粗 斜体 <b> <i> -->
    正常样式<br/>
    <b>加粗</b>---------<i>斜体</i><br/>

    <!-- 字体标签 <font> -->
    <font color="red" size="5" face="楷体">字体标签测试</font>

    <!-- 展示一张图片 img -->
    <img src="imgs/pic.png"/>
</body>
</html>

HTML tag - an image tag

For displaying pictures

<img> For displaying pictures, and a self-closing tags.

Attribute parameters:
- src : display URL of the image
  - Using a relative path , such as "./image/pic.png","../WEB-2/image/pic.png", where a point representing the current directory, a directory on behalf of the two points.
- alt : If the image fails to load, it will display the value of alt
- align: Location picture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 展示一张图片 img -->
    <img src="imgs/pic.png" alt="这是一张图片"/>
</body>
</html>

HTML tags - tags list

Ordered list
- <ol> order list ordered list
  - type: can choose a variety of properties: number, a, A, i, I
  - start: from a few start
- <li> Each column represents the list
Unordered list
- <ul> unorder list unordered list
  - of the type: H5 is no longer supported by the provisions of the rich list item style
    - origin disc square circle circle square
- <li> Each column represents the list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!-- 有序列表 ol -->
    起床要做的事情：<br/>
    <ol type="A" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ol><br/>

    <!-- 无序列表 ul -->
    起床要做的事情：<br/>
    <ul type="disc" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul><br/>
    <ul type="square" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul><br/>
    <ul type="circle" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul><br/>
</body>
</html>

HTML tag - link label

<a> Define a hyperlink.

Attribute parameters
- href: URL specified access to resources (Uniform Resource Locator), you can also specify the current internal resources of the project, can be inserted into the e-mail address to use "mailto: [email protected]"
- target: _self default value in the current page open _blank Open in blank page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <!-- 链接标签 <a> -->
    <a href="https://www.baidu.com/">点我</a>
    <br/>

    <a href="https://www.baidu.com/" target="_blank">打开新的选项卡</a>
    <br/>

    <a href="mailto:[email protected]">联系我们</a>
    <br/>

    <!-- 实现点击图片跳转链接的效果 -->
    <a href="2-TextLable.html"><img src="imgs/pic.png"/></a>
    <br/>
</body>
</html>

HTML tags - Block Label

<span> Itself does not have any effect, the text information displayed in a row, also known as inline tags, inline tags

<div> And span compared, div style has no effect

Each div can fill a row

These two labels do not have any style effects, can be used in conjunction with css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
    <!-- div span -->
    <span>span测试1</span>
    <span>span测试2</span>
    <hr/>
    <div>div测试1</div>
    <div>div测试2</div>
</body>
</html>

HTML tags - semantic tags

html5 in order to improve the readability of the program, it provides tabs. The label itself will not have any style, with the use of CSS

Such as:

<header><header/>
<footer><footer/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
</head>
<body>
    <!-- 头部标签 -->
    <header>

    </header>

    <!-- 尾部标签 -->
    <footer>

    </footer>
</body>
</html>

HTML tags - table tags

<table><table/> : Defines a table

width: width
border: Borders
cellpading: and define the content of the cell from
cellspace: Defines the distance between the cells, If 0 is specified, then the distance between the table 0
bgcolor: background color

<tr><tr/> : Definition line

<td><td/> : Define the cell

colspan: Merge column
rowspan: Merge Rows

<th><th/> : Defines header cell

<caption> : Defines a table caption

The following three did not have any effect, we need to use with CSS:

note! If the ranks of the merger when the row is about a different label, is not merged. In such a cell <thead>, the other <tbody>then the two cells can not be merged

<thead>: The head of a table
<tbody>: Subject of a table
<tfoot>: Indicates the end of the list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!-- 表格标签 -->
    <table border="2" width="50%" cellpadding="0" cellspacing="0">
        <caption>学生成绩信息表</caption>
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>60</td>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>90</td>
        </tr>
        </tfoot>
    </table>

    <hr/>

    <table border="2" width="50%" cellpadding="0" cellspacing="0">
        <caption>学生成绩信息表</caption>
        <tr>
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>60</td>
        </tr>

        <tr>
            <td>2</td>
            <td colspan="2">李四</td>
        </tr>
    </table>
</body>
</html>

HTML tags - form labels

Forms

Concept: a user input for acquiring data
<form>: Scheduled to be used for the form, can define a range , range represents the range of the user data acquisition
- Attributes:
  - action: Specifies the attribute data submitted URL
  - method: Specifies the submission (a total of 7 two more commonly used)
    - get :( default value )
      1. Request parameters will in the address bar, encapsulates the request line
      2. Length of the request parameter is limited
      3. get request less secure
    - post：
      1. Request parameter is not displayed in the address bar, it encapsulates the body of the request in
      2. Length of the request parameter is no limit
      3. Request more secure post
- Data (table item) in the order form is submitted, you must specify its name attribute.

Form Item

<input>: Type attribute values can adapt, adapt elements of style show
- property type:
  - text: text entry box
    1. placeholder: message specifying the input box, input box when the content changes, the prompt will automatically empty the contents
    2. value: setting default values
  - password: password input box
  - radio: radio button
    1. To achieve the radio, you need to set the value of the same name
    2. Generally give every single day box for a value attribute specifies the value that was selected after submission
    3. checked attribute, you can specify a default value
  - checkbox: check box
  - file: file selection box
  - hidden: hidden fields
  - submit: submit button
  - button: push button
  - image: image submit button
    - src: Specifies the path of the picture
  - color: color picker
  - date: Select the time
  - datetime-local: hours with a time of minutes
  - email: Mailbox input device, and detects the regular expression comes
<lable>: Text entry specifies the descriptive information
- lable id attribute value of the corresponding attribute for the input and, if the corresponding, the input will get the focus input box.

<select>:drop-down list

structure:

<select>
    <option></option>
    <option></option>
    <option></option>
</select>

<textarea>: Text fields
- cols: Specifies the number of columns
- rows: Specifies the number of lines

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--
        form  用于定于表单的，可以定义一个范围，范围代表采集用户数据的范围
     -->
    <form action="#" method="get">
        <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br/>
        密码：<input type="password" name="password" placeholder="请输入密码"><br/>

        性别：<input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女<br/>

        爱好：<input type="checkbox" name="hobby" value="shpping">逛街
        <input type="checkbox" name="hobby" value="java" checked>Java
        <input type="checkbox" name="hobby" value="game">游戏<br/>

        上传头像：<input type="file" name="file"><br/>

        隐藏域：<input type="hidden" name="hide" value="aaa"><br/>
        取色器：<input type="color" name="color"><br/>
        生日：<input type="date" name="brithday"><br/>
        生日：<input type="datetime-local" name="brithday"><br/>
        邮箱：<input type="email" name="email"><br/>
        年龄：<input type="number" name="age"><br/>

        省份：
        <select name="province">
            <option>-----请选择-----</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">山西</option>
        </select><br/>
        自我描述：<textarea cols="50" rows="5"></textarea>

        <input type="button" name="button" value="这是一个按钮">
        <input type="image" src="imgs/pic.png">
        <input type="submit" value="登录">
    </form>
</body>
</html>

Finishing simple HTML knowledge

HTML

concept

Getting Started

grammar

Sample Code

HTML tag - file label

HTML tags - the text label

ffffff

HTML tag - an image tag

HTML tags - tags list

HTML tag - link label

HTML tags - Block Label

HTML tags - semantic tags

HTML tags - table tags

HTML tags - form labels

Forms

Form Item

Sample Code

Guess you like