HTML基础

HTML

HTML常用設置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="keywords" content="關鍵詞1，關鍵詞2"/>
    <meta name="description" content="網站描述。"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="shortcut icon" href="/image/chicken.icon">
</head>
<body>

</body>
</html>

注意：

定义字符编码的标签必须放在最上方；
乱码现象：文件编码和charset字符串编码不一致时，浏览器会根据charset定义去读取内容，所以就会出现乱码。

1. head

1.1 title 标题

<title>Document</title>

1.2 meta 元

<meta charset="UTF-8">   编码

<meta http-equiv="Refresh" content="5" />   页面延迟刷新
<meta http-equiv="Refresh" content="5;Url=http://www.baidu.com" />  页面延迟刷新跳转
<meta name="keywords" content="欧美，日韩，国产，网红" />   关键字，用于搜索引擎收录和关键字搜索
<meta name="description" content="野鸭子是一个面向全球的皮条平台。" /> 描述信息，用于在搜索引擎搜索时，显示网站基本描述信息
<meta http-equiv="X-UA-Compatible" content="IE=edge">   meta IE浏览器
<meta name="renderer" content="webkit">                 meta 国产浏览器
（國產瀏覽器一般都支持 IE内核（兼容模式）和webkit 内核（高速模式）两种模式，默認IE，如上設置默認高速模式渲染）
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> 
width=device-width ，表示宽度按照设备屏幕的宽度。
initial-scale=1.0，初始显示缩放比例。
minimum-scale=0.5，最小缩放比例。
maximum-scale=1.0，最大缩放比例。
user-scalable=yes，是否支持可缩放比例（触屏缩放）

1.3 link 引入

<link rel="shortcut icon" href="图标文件路径">  网页标题上的图标
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">  css

2. body

先明白兩個概念：

块级标签----->独占整行。

行内标签----->内容有多少就占多少空间。

<h>标题（1-6）	<p>段落	<br>换行	<b>加粗	<strong>也是加粗
<strike>中间横线	<em>斜体	<sub><sup>下角标，上角标	<div>盒子
<hr>横线	&nbsp空格	&lt	&gt 	&quot		&copy 		&reg
<span>		<ul>无序列表		<ol>有序列表	<li>	<dl>自定义<dt><dd>

内联标签只能嵌套内联标签

块标签：div,form,table,p,pre,h1-5
内联标签：span,a,strong,em,label,input,select,img,br

2.1 div和span

div，仅块级标签样式。span，仅行内标签样式。

br 换行

p 块段落（段落和段落之间有些间距，一般用于多内容多段落展示，例如：文章、作文、博客等）

h 块标题（加大加粗的样式,从h1~h6依次变小）

a 超链接（a标签主要有两个作用：分别是做超链接，点击之后可以跳转到指定地址；做锚点，点击后跳转到页面指定位置。）

ul 列表系列
ul、li（无序）ol、li（有序）dl、dt、dd（定义列表）

table 表格

tr等于table row th等于table head td等于table division

<table border="1">    <!-- 边框 -->
    <thead>
        <tr>
            <th colspan="3">人员信息</th>   <!-- 合并单元格 -->
        </tr>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>安娜</td>
            <td>18</td>
            <td>看书</td>
        </tr>
        <tr>
            <td rowspan="3">娜娜</td>
            <td>18</td>
            <td>吃</td>
        </tr>
        <tr>
            <td>25</td>
            <td>睡</td>
        </tr>
        <tr>
            <td>30</td>
            <td>玩</td>
        </tr>
        <tr>
            <td>明明</td>
            <td>男</td>
            <td>跑</td>
        </tr>
    </tbody>
</table>

img 图片

<img src="img/lover.png" alt="美女">
<img src="https://i0.hdslb.com/bfs/archive/7fd16d78b326fd55264d827837685928b46c2271.png" alt="说明">

form 表单（把输入的内容提交到后台）

<form action="http://www.baidu.com" method="post">
    <p>用户名：<input type="text" name="user"></p>
    <p>密  码：<input type="password" name="pwd"></p>
    <p>性别：
        <input type="radio" name="gender" value="2">男
        <input type="radio" name="gender" values="3">女
    <p/>
    <p>爱好：
        <input type="checkbox" name="favor" value="2">篮球
        <input type="checkbox" name="favor" value="8">足球
        <input type="checkbox" name="favor" value="10">橄榄球
    </p>
    <p>城市：
        <select name="city">
            <option value="1">上海</option>
            <option value="2">北京</option>
        </select>
    </p>
    <p>备注：<textarea name="memo"></textarea></p>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

注意：

提交时，只会提交form标签内部【用户交互】相关的标签。

<input type="submit" value="提交">用于提交当前所在的表单。

<input type="reset" value="重置">用于重置当前标签中的选项。

form标签内置属性：

action="/xx/"，表示表单要提交的地址。

method="post"，表示表单的提交方式（get 或 post。get获取，post修改）。

enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置。
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
    <input type="file" name="xxxxx">
    <input type="submit" value="提交">
</form>
form内部【用户交互】相关标签必须设置name，后端通过name获取。
提交表单之后，实际上会将表单中的数据构造成一种特殊的结构，发送给后台，类似于：
{
    user:用户输入的姓名,
    pwd:用户输入的密码,
    ...
}
radio、checkbox、select 除了要设置name属性以外，还必须设置value属性，因为这三种标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。

input 输入【用户交互】

type:

text，文本框。

password，密码框。

radio，单选框（必须设置name属性相同，否则无法实现）。

checkbox，复选框。

file，文件上传。
<input type="text">
<input type="password">

<input type="radio" name="gender">男
<input type="radio" name="gender">女

<input type="checkbox" name='hobby'>篮球
<input type="checkbox" name='hobby'>足球
<input type="checkbox" name='hobby'>橄榄球

<input type="file">

select 下拉框【用户交互】

<h3>单选</h3>
<select name='position1'>
    <option>上海</option>
    <option>北京</option>
    <option>深圳</option>
</select>
<h3>多选</h3>
<select multiple name='position2'>
    <option>上海</option>
    <option>北京</option>
    <option>深圳</option>
</select>

textarea 多行文本框【用户交互】