Front-end study notes (1) HTML of the front-end three swordsmen

What is HTML

Hyper Text Markup Language is called Hyper Text Markup Language.

Hypertext
refers to the use of hyperlinks to organize textual information in various spaces together.
Markup language A language
composed of various tags, such as .html, .td, .xml, etc.
Markup languages are not programming languages.

How to use HTML

HTML syntax

html document suffix name .html or use .htm
Tag classification
Containment tags: There are start tags and end tags. Such as <html> </html>
self-closing and label: the start label and the end label are the same, the label body has no content such as
.
Notes: HTML language is not case sensitive, but the official recommendation is to use lowercase.
Nested tags
need to be nested correctly, without confusion.
Error nesting:
Nested correctly:

Label classification

File label

html: the root tag of the html document

head: head tag. Used to specify some attributes of the html document. Introduce an external resource
title: title tag.
body:
<!DOCTYPE html>：The document defined in the body tag html5 is an html document

Text label

Notes:

<h1> to <h6>：Heading tags
h1~h6: The font size gradually decreases.
<p>：Paragraph tags.
<br>：Line break tags
<hr>：display a horizontal line.
hr tag attributes:

color：颜色
width：宽度
size：高度
align：对其方式
center：居中
    left：左对齐
     right：右对齐

<b>：Font Bold
<i>：font Italic
<font>:font label
font attributes:

color：颜色
size：大小
face：字体

<center>:Relative to the parent element text centered
Property definition:
color:

English Words: red,green,blue
rgb (value 1, value 2, value 3): Value range: 0~255 such as rgb(0,0,255)
#Value1value2value3: Value range: between 00~FF. For example: #FF00FF
width:
Value: width='20', the unit of the value, the default is px (pixel)
Numerical value %: the proportion of the proportion relative to the parent element

Picture label

img: Display picture
Attribute:
src: Specify the position of the picture
alt: If the picture is not displayed, then display the content in the alt attribute.

<img src="image/天坛.jpg" align="right" alt="天坛" width="500" height="500"/>

In the above example, if the picture cannot be displayed, the content in the alt attribute will be displayed.
Notes: When writing the src directory, you need to pay attention to the path writing. The src attribute follows the basic rules of relative paths.
The path beginning with
./: represents the current directory./image/1.jpg
…/: represents the upper level directory

List label

Ordered list:
ol: (orderlist)
li:
ordered list can achieve ordered numbering

<!--有序列表 ol-->
    早上起床干的事情
    <ol type="A" start="5">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ol>

Unordered list:
ul:
li: unordered
number.

早上起床干的事情
    <ul type="disc">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>


    早上起床干的事情
    <ul type="square">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>

Link attribute

a: Define a hyperlink
href: specify the URL (Uniform Resource Locator) to access the resource
target: specify the way to open the resource

_self: default value, open on the current page
_blank: open on a blank page
click on the picture to jump

<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>

Block label

div: each div occupies a whole line, block-level tag
span: text information is displayed in one line, inline tags are inline tags

Semantic tags:

To improve the readability of the program in html5
footer: footer
header: header

Form label

	table：定义表格
		width：宽度
		border：边框
		cellpadding：定义内容和单元格的距离
		cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
		bgcolor：背景色
		align：对齐方式
	 tr：定义行
		bgcolor：背景色
		align：对齐方式
	 td：定义单元格
		colspan：合并列
		 rowspan：合并行
	 th：定义表头单元格
	 <caption>：表格标题
	<thead>：表示表格的头部分
	 <tbody>：表示表格的体部分
	<tfoot>：表示表格的脚部分

Form label

form: used to define the form, you can define a range, the range represents the range of collecting user data
attributes

action: Specify the URL of the submitted data
methond: Specify the submission method
There are 7 categories, 2 of which are commonly used

The difference between get and post:

get: The
request parameters are displayed in the address bar
. The size of the request parameters is limited. The
security right
post: the
request parameters will not be displayed in the address bar. The
request parameter size is not limited. The
security is better.
Notes: If the form wants to be submitted, The name attribute must be specified.

Form item label

input: You can change the style of element display through the type attribute value

type attribute:

text: text input box, default value
placeholder: specify the prompt information of the input box, when the content of the input box changes, the prompt information will be cleared automatically
password: password input box
radio: single selection box

notes：

If you want multiple radio buttons to achieve the effect of single selection, the name attribute value of multiple radio buttons must be the same.
Generally, each radio button will be provided with a value attribute to specify the value submitted after it is selected
checked attribute, you can specify the default value

checkbox: checkbox
notes:

Generally, each radio button will be provided with a value attribute to specify the value submitted after it is selected
checked attribute, you can specify the default value

file: file selection box
hidden: hidden field, used to submit some information.
Button:

submit: Submit button. You can submit the form
button: common button
image:
the path of the image specified by the src attribute of the image submission button

label: Specifies the text description information of the input item.
notes: The for attribute of label generally corresponds to the id attribute value of input. If it corresponds, click on the label area to make the input box get focus.

select: drop-down list

Child element: option, specify list item

textarea: text area

rows: Specify how many rows there are by default.
cols: Specify how many columns there are by default.

Case number one

Practice form submission code

<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" >  男
         <input type="radio" name="gender" value="female" checked>  女
            <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <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="id" value="aaa"> <br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"> <br>
    生日：<input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>

    省份：<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>
         </select><br>

    自我描述：
        <textarea cols="20" rows="5" name="des"></textarea>

    <br>
    <input type="submit" value="登录" >
    <input type="button" value="一个按钮" ><br>
    <input type="image" src="img/regbtn.jpg">
</form>

Case two

Implement the registration page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="text" name="password" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>

            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td>
                    <input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>
            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg" alt="验证码">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</body>
</html>