html快速入门

---

一、HTML4

1.HTML概述

HTML是用来描述网页的一种语言，是超文本标记语言；标记语言是一套标记标签；HTML使用标记标签描述网页。

2.块内元素

块级元素独占一行，行内元素不能独占一行
使用规则：

（1）块级元素中能写行内元素和块级元素
（2）行内元素中能写行内元素，但不能写块级元素
（3）h1~h6不能互相嵌套
p中不要写块级元素

3.文本标签

标签名	标签语义
em	着重阅读的内容
strong	十分重要的内容
span	没有语义，用于包裹短语的通用容器

4.img标签

常用属性：

src：图片路径
alt：图片描述
width：图片宽度
height：图片高度

5.超链接

（1）基本属性

a标签：从当前页面进行跳转
href：要跳转的具体位置
target：跳转时如何打开页面，常用值如下：
_self：在本页签中打开
_blank：在新页签中打开

注意：若浏览器无法打开文件，则会引导用户下载
若想强制触发下载，请使用download属性，属性值为下载文件的名称
（2）跳转到锚点
1】什么是锚点？——网页中的一个标记点
2】具体使用方式
第一步：设置锚点

注意点：
具有href属性的a标签是超链接，具有name属性的a标签是锚点
name和id都是区分大小写的，且id最好别是数字开头
第二步：跳转锚点

（3）唤起指定应用
通过a标签，可以唤起设备应用程序

// 唤起设备拨号
<a herf="tel:10086">电话联系</a>
// 唤起设备发送邮件
<a herf="mailto:10086@qq.com">邮件联系</a>
// 唤起设备发送短信
<a herf="sms:10086">短信联系</a>

6.列表

（1）有序列表
有顺序或侧重顺序的列表

<ol>
	<li></li>
</ol>

（2）无序列表
无顺序或不侧重顺序的列表

<ul>
	<li></li>
</ul>

（3）列表嵌套
列表中的某项内容，又包含一个列表

<ul>
	<li></li>
	<ul>
		<li></li>
	</ul>
</ul>

（4）自定义列表
1】概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表
2】一个d1就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）

<dl>
	<dt></dt>
	<dd></dd>
</dl>

7.表格

（1）基本机构：表格由表格标题、头部、主体及脚注组成
（2）表格涉及到的标签

table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格注脚
tr：每一行
th、td：每一个单元（表格头部中用th，表格脚注中用td）

（3）具体编码

<table border="1" cellspacing="0">
    <caption>人员信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>16</td>
            <td>篮球</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>21</td>
            <td>乒乓球</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>共计2人</td>
        </tr>
    </tfoot>
</table>

（4）常用属性

1】标签table，表格
width：设置表格宽度
height：设置表格最小高度，表格最终高度可能比设置的值大
border：设置表格边框宽度
cellspacing：设置单元格之间的间距
2】标签thead，表格头部
height：设置表格头部高度
align：设置单元格的水平对齐方式，可选值包括：left、center、right
valign：设置单元格的垂直对齐方式，可选值包括：top、middle、bottom
3】tbody表格主体、tr行、th表头单元格、tfoot表格脚注的属性与thead相同
4】td标签td，普通单元格
width：设置单元格的宽度，同列所有单元格全部都受影响
height：设置单元格的高度，同列所有单元格全部都受影响
align：设置单元格的水平对齐方式，可选值包括：left、center、right
valign：设置单元格的垂直对齐方式，可选值包括：top、middle、bottom
rowspan：指定要跨的行数
colspan：指定要跨的列数
5】其他标签
br：换行
hr：分割
pre：按原文显示（一般用于在页面中嵌入大段代码）

8.表单

（1）form标签
常用属性：

action：表单要提交的地址
target：跳转的新地址的打开方式，可选值：_self、_blank
method：请求方式，可选值：get、post

（2）文本输入框

<input type="text">

常用属性：

name：数据的名称
value：输入框的默认输入值
maxlength：输入框最大可输入长度

（3）密码输入框

<input type="password">

常用属性：

name：数据的名称
value：输入框的默认值
maxlength：输入框最大可输入长度

（4）单选框

		<input type="radio" name="gender" value="male">男
		<input type="radio" name="gender" value="famale">女

常用属性：

name：数据的名称，多个radio的name属性值要保持一致
value：提交的数据值
checked：单选按钮默认选中

（5）复选框

        <input type="checkbox" name="hobby" value="study" checked>学习
        <input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="dance">跳舞

常用属性：

name：数据的名称
value：提交的数据值
checked：复选框默认选中

（6）隐藏域
提交表单时，携带一些固定的数据

        <input type="hidden" name="teg" value="xyz">

常用属性：

name：指定数据的名称
value：指定真正提交的数据

（7）提交按钮

        <button>提交</button>
        <input type="submit" value="提交">

（8）重置按钮

        <button type="reset">重置</button>
        <input type="reset" value="重置">

（9）普通按钮

        <button type="button">普通按钮</button>
        <input type="button" value="普通按钮">

（10）文本域

<textarea name="remark" cols="30" rows="4"></textarea>

常用属性：

cols：显示的列数，会影响文本域的宽度
rows：显示的行数，会影响文本域的高度

（11）下拉框

        <select name="from">
            <option value="黑">黑龙江</option>
            <option value="辽">辽宁</option>
            <option value="吉" selected>吉林</option>
        </select>

常用属性：

name：数据的名称
option标签设置value属性，提交的数据是value的值，若没有设置value属性，提交的数据是option中间的文字
option标签设置了selected属性，表示默认选中

（12）禁用表单控件
给表单控件的标签设置disabled属性，即可禁用表单控件
input、textarea、button 、select 、option 都可以设置disabled属性
(13）label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：
1、让label标签的for属性的值等于表单控件的id。
2、把表单控件套在label标签的里面。

        <!-- 第一种 -->
        <label>
            账号：<input type="text">
        </label>
        <!-- 第二种 -->
        <label for="account">账号：</label>
        <input id="account" type="text">

（14）fieldset、legend标签
fieldset标签：表单控件分组，legend标签：分组名称

        <fieldset>
            <legend>主要信息</legend>
            .....表单控件
        </fieldset>

（15）框架标签
iframe 标签，功能和语义：框架（在网页中嵌入其他文件）
常用属性：

name：框架名字，可以与target属性配合
width：框架的宽度
height：框架的高度
frameborder：是否显示边框，值：0或者1

iframe 标签的实际应用

1、在网页中嵌入网页、广告及其他文件
2、与超链接或表单的target属性配合使用，展示不同的内容

iframe 标签的使用

        <!-- 1、iframe标签可以嵌入一个普通网页、广告网页、其他内容如图片、视频 -->
        <iframe src="https://www.taobao.com" width="600" height="300" frameborder="1"></iframe>
        <br>
        <!-- 2、iframe标签与超链接的target属性配合使用 -->
        <a href="https://www.taobao.com" target="container">淘宝</a>
        <!-- 3、iframe标签与表单的target属性配合使用 -->
        <form action="https://so.toutiao.com/search" target="container">
            <input type="text" name="keyword">
            <input type="submit" value="搜索">
        </form><br>
        <iframe name="container" width="200" height="60" frameborder="1"></iframe>

9.HTML实体

在HTML中，可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是HTML实体。比如小于号<用于定义HTML标签的开始。如果希望浏览器正确地显示这些字符，必须在HTML源码中插入字符实体。

字符实体由三部分组成：一个&和一个实体名称（或者一个#和一个实体编号），最后加上一个分号；。

常见字符实体总结

	描述	实体名称	实体编号
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
´	反引号	&acute;	&#180;
¢	分（cent）	&cent;	&#162;
£	镑（pound）	&pound;	&#163;
¥	元（yen）	&yen;	&#165;
€	欧元（euro）	&euro;	&#8364;
©	版权（copyright）	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

10.HTML全局属性

常用的全局属性
（1）id

含义：给标签指定唯一标识，注意id是不能重复的。
作用：可以让label标签与表单控件相关联；也可以与CSS、Javascript配合使用。
注意：不能在以下HTML元素中使用：head、html、meta、script、style、title标签。

（2）class

给标签指定类名，随后通过CSS就可以给标签设置样式。

（3）style

给标签设置CSS样式

（4）dir

内容的方向，可选值：ltr、rtl。
注意：不能在以下HTML元素中使用：head、html、meta、script、style、title标签。

（5）title

给标签设置一个文字提示，一般超链接和图片用得比较多。

（6）lang

给标签指定语言。
注意：不能在以下HTML元素中使用：head、html、meta、script、style、title标签。

11.meta元信息

    <!-- 1.配置字符编码 -->
    <meta charset="utf-8">
    <!-- 2.针对IE浏览器的兼容性配置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 3.针对移动端的配置 -->
    <meta name="viewpoint" content="width=device-width,initial-scale=1.0">
    <!-- 4.配置网页关键字 -->
    <meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
    <!-- 5.配置网页描述信息 -->
    <meta name="description" content="80字以内的一段话，与网站内容相关">
    <!-- 6.针对搜索引擎爬虫配置 -->
    <meta name="robots" content="此处可选值见下表">

值	描述
index	允许搜索爬虫索引此页面
noindex	要求搜索爬虫不搜索此页面
follow	允许搜索爬虫跟随此页面上的链接
nofollow	要求搜索爬虫不跟随此页面上的链接
all	与index，follow等价
none	与noindex ，nofollow 等价
noarchive	要求搜索引擎不缓存页面内容
nocache	noarchive 的替代名称

    <!-- 7.配置网页作者 -->
    <meta name="author" content="tony">
    <!-- 8.配置网页生成工具 -->
    <meta name="generator" content="Visual Studio Code">
    <!-- 9.配置定义网页版权信息 -->
    <meta name="copyright" content="2021-2030©版权所有">
    <!-- 10.配置网页自动刷新 -->
    <meta http-equiv="refresh" content="">

---

input type=”image”，定义图形形式的提交按钮，
其他属性：name:定义标签名称
src:定义作为提交按钮显示的图像的url
alt:定义作用图像的替代文本

2、文件标签
（1）html标签
声明HTML标签，使浏览器正确处理此HTML文件，HTML文件由两部分head和boby
（2）head标签
head用于加载一些重要的资讯，它的内容不会被显示，只有boby内容才会被显示。
在 head元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
（3）title标签
title只能出现于head中，它代表的是标题
（4）boby标签
boby中的内容会被显示，常用属性：
text:用于设定文字颜色
background：用于设定背景图片
bgcolor：用于设定背景颜色
3、排版标签
（1）注释 !–注释–
（2）p标签
p是段落标签，可以将html文档分割为若干个段落，常用属性：
align：用于设定对齐方式，可选left,center,right，默认值为left
（3）br标签
br是换行标签，浏览器会自动忽略空白与换行
（4）hr标签
hr会生成一条水平线，常用属性：
align:设置水平线对齐方式，可选left,center,right
size:设置水平线厚度，以像素为单位，默认为2
width：设置水平线长度，可以数绝对值或相对值，默认为100%
color：设置水平线颜色，默认为黑色
html中添加一条竖线

<div style="float:left;margin-top: 30px;width: 1px;height: 200px; background: darkgray;"></div> 

4、关于html中数值单位
HTM的数值默认单位为像素（px），在有限位置可以使用百分比来设置，如
hr width=”30%”，这个代表水平线长度为总长度的30%
5、块标签

（1）div标签
用于在文档中设定一个块区域，常用属性：
align，可选left,center,right
①head部分
②menu部分使用一个一行一列的table来控制
③search部分
④content部分
（2）span标签
用于在行内设定一个块区域
6、字体标签
(1)font
font用于规定文本的字体（face），大小（size），颜色（color）
（2）h1-h6
h1-h6用于定义标题，h1最大标题，h6最小标题
（3）文本格式化标签
bstrong加粗，iem斜体
sub定义下标字，sup定义上标字
ins定义插入字，del定义删除字
7、图形标签
（1）img
img是一个图形标签，用于在页面上引入图片，常用属性：
src：用于设定要引入图片的url
alt：用于设定图像的替代文字
width、height，分别用于设定图片的宽度和高度
border：图片边框厚度
align：用于设定图片的文字的对齐方式
8、链接标签
（1）a
a用于定义超链接，用于从一个页面链接到另一个页面，常用属性：
href：用于设定链接指向页面的url
name：用于设定緢的名称
target：用于设定在何处打开链接页面
9、表格标签
（1）table
table用于定义表格，常用属性：
align：设定表格的对齐方式
bcolor：用于设定表格的背景颜色
border：用于设定表格边框的宽度及颜色，eg:border: 1px solid #e9e9e9;
width：用于设定表格的宽度
（2）tr
tr定义标签的行，包括一个或多个th或td元素，常用属性：
align：用于设定表格中行的内容对齐方式
bcolor：用于设定表格中行的背景颜色
（3）td
td用于定义表格单元，常用属性：
Align：设定单元格内容的对齐方式
bcolor：用于设定单元格背景颜色
colspan：用于设定列合并
（4）caption
caption用于定义表格标题，caption标签必须紧随table标签之后，一个表格只能有一个标题，通常标题会被居中于表格之上
（5）th
th用于定义表格的表头，th内部的文本通常呈现为居中加粗文本；HTML表中有两种类型的单元格：表头单元格th：包含表头信息
标准单元格td：包含数据
10、from标签
from代表一个表单，表单用于向服务器传输数据；from能够包含input，可以是文本字段，复选框，单选框或提交按钮等，还可以包括taxtareaselect等；常用属性：
name:用于定义表单的名称
action:用于规定提交表单时向何处发送表单数据
method:用于规定提交的方式，可选get或post
get和post区别
get方式只能少量数据，而post可以携带大量数据
get方式提交时，数据会在地址栏上显示，安全性差，post方式提交不会在地址栏上显示数据，更加安全。
11、input标签
input标签用于搜索用户信息，根据不同的type属性值，输入字段拥有多种形式，输入字段可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等。
(1)text
inputtype属性说明，如input type=”text”
其他属性：name:定义标签名称
value:定义标签值 size:定义输入字段的长度
maxlength:定义可输入最大字符个数
(2)password
input type=”password”，定义密码字段，其他属性：
name:定义标签名称
value:定义标签值 size:定义输入字段的长度
maxlength:定义可输入最大字符个数
（3）radio
input type=”radio”，定义单选按钮，其他属性：
name:定义标签名称
value:定义标签值
checked:定义该标签默认被选中
（4）checkbox
input type=” checkbox”，定义复选框，其他属性：
name:定义标签名称
value:定义标签值
checked:定义该标签默认被选中
（5）button
input type=” button”，定义按钮，其他属性：
name:定义标签名称
value:按钮显示名称
（6）hidden
input type=”hidden”，定义隐藏的输入字段，其他属性：
name:定义标签名称
value:定义标签值
（7）file
input type=” file”，定义输入字段和“浏览”按钮，供文件上传，其他属性：name:定义标签名称
（8）submit
input type=”submit”，定义提交按钮，提交按钮会把表单数据发送到服务器；其他属性：
name:定义标签名称
value:按钮显示名称
（9）reset
input type=”reset”，定义重置按钮，重置按钮会清除表单中的所有数据，其他属性：name:定义标签名称
value:按钮显示名称
（10）image
input type=”image”，定义图形形式的提交按钮，
其他属性：name:定义标签名称
src:定义作为提交按钮显示的图像的url
alt:定义作用图像的替代文本
（11）select与option标签
①select用于定义下拉列表，常用属性：
name:定义下拉列表的名称
size:用于定义下拉列表中可选项的数目
multiple：定义可选择多个选项
②option用于定义下拉列表中的选项值，option需要位于select标签内。常用属性：value:定义送往服务器的选项值
Selected：定义选项为选中状态
（12）textarea用于定义一个多行文本输入控件（多行文本框，文本域），常用属性:name:定义多行文本框名称
cols: 定义多行文本框可见宽度
rows: 定义多行文本框可见行数
wrap: 定义多行文本框中文字如何换行
12、ul和ol
ul定义无序列表，其中li定义列表项，其他属性：type:小圆圈，小方块，默认小黑点
ol定义无序列表，其中li定义列表项，其他属性：type:指定序号的类型
start：从几开始，必须是数字
13、特殊字符

浏览器内核分为渲染引擎和JS引擎
14、Html中如何把字插入边框内

<style>
			.box {
				position: relative;
				border: 1px solid black;
			}

			.box::before {
				content: attr(title);
				position: absolute;
				left: 20%;
				transform: translateX(-50%);
				-webkit-transform: translate(-50%, -50%);
				padding: 0 10px;
				background-color: #fff;
			}
		</style>
		<div class="box" title="使用方法">
			<ol>
				<li>这是啥</li>
				<li>干啥</li>
				<li>干啥</li>
			</ol>
		</div>