目录:
1.HTML基本骨架
2.head内部的可放标签
3.文本所用标签
4.列表标签
5.表格标签
6.表单标签
7.导入图片和超链接
8.行内元素和块元素
9. 特殊符号在网页中的转换和注释
10.框架
1. HTML基本骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
对于骨架各部分的概述
| 骨架部分 | 概述 |
|---|---|
| <!doctype html> | 是一个文档声明，表示这是一个HTML页面，也表示表示网页是按照html5标准编写的 |
| <html> </html> | 是最根本的标签表示整个网页，是一个双标签 |
| <head></head> | 网页的头部里边是一些网页的配置除了title标签其余都不可见，是一对双标签，标签内容是帮浏览器解析页面的 |
| <meta> | 里边是一个网页使用的字符集 |
| <title> </title> | 表示网页的标题 |
| <body></body> | 用户所能看到的内容区域 |
有时候我们会在html这个标签里边，看到一条属性：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
xmlns是html的第一个属性是一个命名空间，规定不同用户在浏览器中标签语义遵循的统一标准，第二个属性就是lang代表所有的标签语言都是英文
2. head标签内部的可放标签
2.1title标签
<title></title>：双标签，放置网页的标题
2.1meta标签
<meta>：单标签，一般用于定义页面的特殊信息，如页面关键字，页面描述等，提供给搜索引擎，告诉搜索引擎这个页面是做什么的
meta标签有两个属性：
1.name属性：常用取值只有2个：keywords、description,结合content一起用，属性keywords主要是网页的关键字，description则是对网页的描述
<meta name="keywords" content="陪博主学前端"/>
<meta name="description" content="博主是一个帅哥"/>
2.http-equiv属性：常用属性值Content-Type和refresh，结合content一起用，Content-Type是定义网页所用的编码
refresh是定义网页自动刷新跳转：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>//定义网页所用编码为utf-8
<meta http-equiv="refresh" content="6;url=https://www.bilibili.com/"/>//六秒跳转到B站""
注意在HTML5中定义网页所用编码可以直接用：<meta charset=“utf-8”/>
2.2其他标签
<style type="text/css"></style>：标签内写CSS的代码
2.3script标签
<script></script>：标签内写JavaScript代码
2.3link标签
<link type="text/css" rel="stylesheet" href="css/index.css" >：导入css文件
3.文本所用标签
3.1h标签
<h1~6></h1~6>：分别对应六种标题1~6从大到小,h1标题所占权重最高最便利搜索引擎搜索，一个页面一般要有一个h1标签一般将这个标签给logn(能代表整个网页的图标)
3.2p标签
<p></p>：段落标签
3.3两个单标签
<br/>：单标签，换行标签
<hr/>：单标签，水平线标签
3.4文本标签(双标签)
| 标签名 | 作用 |
|---|---|
| strong或者b | 粗体标签 |
| i或者em或cite | 斜体标签 |
| sup | 上标标签(比如5的平方，那么平方的2就可以使用sup修饰) |
| sub | 下标标签(化学方程式用的较多) |
| s | 中划线标签 |
| u | 下划线标签 |
| big | 大字号标签 |
| small | 小字号标签 |
3.5div标签span标签
<div></div>：可以在网页划分区域，可以用于网页的整体的布局，无特殊含义
<span></span>：没有特殊含义，代表小的范围，文本级标签，不能放容器级标签,通常和CSS连用
4. 列表标签
4.1有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
比如我们使用a,b,c进行排序：
注意：ol标签和li标签需要配合使用，不能单独使用，而且ol的子标签只能是li标签
4.2无序列表
//可用ul>li*4这种快捷键生成如下代码
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
注意ul标签里边只能是li标签，文本不能直接放在ul标签内，而是放在标签内
4.3定义列表
<dl>//定义列表
<dt>名词</dt>//定义标题
<dd>描述</dd>//定义解释
....
</dl>
举个例子
注意：dt后边可以有多个dd对dt进行解释，dt后边也可以不跟dd也不会影响整体结构
5.表格标签
5.1表格标签
| 标签 | 作用 |
|---|---|
| table | 表格 |
| tr | 代表行 |
| td | 代表单元格 |
| caption | 表格标题 |
| th | 表头单元格 |
| thead | 划分表头部分 |
| tbody | 划分表身部分 |
| tfoot | 表脚 |
行，单元格等都需要放在table标签里边，其实th和td在本质上都是单元格，但是浏览器会对th进行加粗居中，但是不会对td一居中加粗，后三个标签没有语义就是把表格分为三个部分，让表格的代码更具有可读性
例子：
table标签属性border：代表整个表格边框颜色的深度，0代表没有边框(默认是0)，以后边框深度依次加深比如：
5.2合并单元格
| 标签 | 作用 |
|---|---|
| rowspan | 合并行 |
| colspan | 合并列 |
例子：
6.表单标签
6.1form标签
我们把表单标签都放在form标签中
form标签属性
| 属性 | 作用 |
|---|---|
| name | 表单的名字 |
| method | 提交方式 |
| action | 提交地址 |
- 这里的提交方式指指表单元素使用哪一种http提交方式，method的属性值有两个，一个是get一个是post
- 提交地址用于指定表单数据提交到哪一个地址处理
6.2input标签
是一个单标签
关于input的type属性
6.3单行文本框
input属性值为text
从上边的介绍，我们可以看到，单行文本框的浏览器效果，我们还可以给单行文本框设置属性，常用的单行文本的属性为：
| 属性 | 说明 |
|---|---|
| value | 设置单行文本框的默认值，也就是默认情况下单行文本框显示的内容 |
| size | 设置单行文本框的长度 |
| maxlength | 设置单行文本框最多可以输入的字符数 |
例子：
6.4密码文本框
input属性值为password
同样的我们可以为密码文本框设置属性
| 属性 | 说明 |
|---|---|
| value | 设置密码文本框的默认值，也就是默认情况下密码文本框显示的文字 |
| size | 设置密码文本框的长度 |
| maxlength | 设置最大输入字符数 |
6.5单选框
input属性值为radio
我们单选框是必备两个属性的：
| 属性 | 作用 |
|---|---|
| name | 表示单选框按钮所在的组名 |
| value | 表示单选框的可取值 |
举个例子：
当name属性一样的时候，我们只能勾选一个，但是当name属性不一致的时候，那么就都可以勾选，所以name属性的一致性需要特别注意。还有一个缺点，那么就是只要我们不手动勾选，那么系统是不会默认勾选的，所以我们这里还有一个属性可以为我们默认勾选，那就是checked，有两种写法都会默认的勾选女：
<input type="radio" name="a" value="女" checked />女
<input type="radio" name="a" value="女" checked="checked"/ >女
6.6复选框
input属性值为checkbox
和单选框一致我们复选框也是三个属性的：
| 属性 | 作用 |
|---|---|
| name | 表示单选框按钮所在的组名 |
| value | 表示单选框的可取值 |
| checked | 默认勾选 |
6.7按钮
input属性值分为三个button，submit，reset,分别表示普通按钮，提交按钮，重置按钮
和value属性搭配使用，value里边的内容就是按钮上的内容
| 按钮类型 | 说明 |
|---|---|
| 普通按钮 | 一般都是搭配js操作 |
| 提交按钮 | 给服务器提交数据 |
| 重置按钮 | 重置用户在表单输入的内容(重置按钮只能重置它所在的form标签) |
6.8多行文本框
多行文本框不是放在input标签里，他有自己的标签textarea
两个属性：
| 属性 | 属性值 |
|---|---|
| row | 行数 |
| cols | 列数 |
6.9下拉列表
同样的不需要input标签，是靠着select和option两个标签来完成的
1.关于select标签：
他有两种属性：
| 属性 | 作用 |
|---|---|
| multiple | 设置下拉列表可以选择多项(无属性值) |
| size | 设置下拉列表显示几个列表项，取值为整数 |
想要多选需要按住ctrl加鼠标左键
2.option标签：
两个属性：
| 属性 | 作用 |
|---|---|
| selected | 是否选中(默认选中) |
| value | 选项值(可以不加，他是和js配合使用) |
我们使用一下select属性：
可以看到默认的jQuery被选中
6.10文件上传
input属性值为file
6.11综合：
7.导入图片和超链接
7.1导入图片
<img/>：单标签
三个属性：
| 属性 | 作用 |
|---|---|
| src | 指定图片路径，可以是相对和绝对路径 |
| alt | 用于图片描述，这个描述是给搜索引擎看的，当我们的图片无法显示的时候，页面会显示alt属性的内容 |
| title | 也是用于图片描述，不过是描述给用户看的，当我们鼠标移动到图片上的时候会显示title上的文字 |
7.2超链接
<a herf="链接地址">文本或者图片</a>：实现页面的跳转，有两个属性，第一个是是herf，第二个是target
herf就不用多说了，关于target的属性值：
| 属性值 | 作用 |
|---|---|
| _self | 在原来窗口打开链接(默认值) |
| _blank | 在新的窗口打开链接 |
如果我们在一个项目下面有多个网页，同样也可以在这些网页之间实现相互跳转
7.3锚点跳转
这个比如博主写博客，点击博主的目录就会跳到本页面对应的位置，这个就叫做锚点跳转(跳转到本页面的指定位置)
h标签内有一个id属性可以设置一个id值，可以让a标签的属性href等于#+id值,这样就可以实现页面内的跳转
比如：
<a href="#a1" >1.简介
<a href="#a2" >2.说明
<h1 id="a1">1.简介</h1>
<h1 id="a2">2.说明</h1>
8. 行内元素和块元素
1.块元素：独占一行的元素，不管有多少内容，都会独占一行
2.行内元素：只占自身大小，不会占一行
常见的块元素：
| 块元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | div无特殊含有，与网页布局有关 |
| hr | 水平线 |
| ol | 有序列表 |
| ul | 无序列表 |
块元素的特点：
- 块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行；
- 块元素内部可以容纳其他块元素和行内元素
行内元素：
常见行内元素:
| 行内元素 | 说明 |
|---|---|
| strong | 粗体元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用行内元素，结合css定义样式 |
9.特殊符号在网页中的转换和注释
9.1特殊符号在网页中的转换
| 特殊符号 | 代码 |
|---|---|
| > | > |
| < | &It; |
| & | & |
| 空格 | |
9.2注释
第一种：
<!--注释内容-->
第二种：ctrl+/
10.框架
框架的意思是从页面里边再嵌套页面
格式及说明：
<iframe src="链接地址" width="数值" height="数值"></iframe>
我们举个例子：
