HTML总结2020-10-13

※※※※※※※※※※※※※ 本文共有1468字 ※※※※※※※※※※※※※

HTML hypertext MarkUp Language 超文本标记语言

用来描述网页的语言，其中含有大量的HTML标签，学习HTML其实就是学习组成HTML的标签
HTML不是一种编程语言，而是一标记语言
现在来说HTML有三种，分别是HTML4.0 HTML5.0 XHTML
其中XHTML由HTML发展演变而成，是一种严格模式下的HTML
HTML文档就是一种HTML文件，后缀名为.html 或 .htm
一个HTML文档主要有以下部分
<html>
4.1<!doctype html> DTD 文档声明其中DTD是为了让浏览器辨认网页标准，有利于网站的SEO
4.1.1 DTD 文档类型定义
4.1.2 SEO 搜索引擎优化
4.2<head></head>头部标签主要设置网页标题，网页小图标，引入外部样式，帮助网站进行SEO优化
4.3<body></body>主要实现网页内容大部分的代码都在body中
</html>
一个网页一般有三层组成分别是结构层、样式层、逻辑层
5.1结构层 HTML标签
5.2样式层 CSS层叠样式表
5.3逻辑层 js代码
HTML中标签属性元素之间的关系
<a href="" > good good study </a>
a是标签 href是标签a中的一个属性
元素 = 标签 + 属性 + 标签中的内容

HTML中的标签

HTML中的标签一般成对出现，一般分为单标签、双标签
常见的单标签有<hr /> 添加分隔线 换行
标签的分类还可根据其自有属性分为 block inline inline-block
其中块标签独占一行，可以设置宽高，默认宽度为父元素的100%
内联标签大小随内容改变，不可以设置宽高，不会独占一行
内联块标签大小随内容改变，可以设置宽高，不会独占一行
h1-h6标签，经常使用h1包裹住网站的logo来增强SEO
p标签 paragraph 段落标签默认添加了magin 是一个block标签支持自动换行
文本设置的相关标签
 都表示加粗 strong强调的含义更重
 都表示倾斜 em强调含义重
<del></del> <s></s> 都表示删除线 del含义重
<ins></ins> 都表示下划线 ins含义重
推荐使用含义重的标签弃用 b i s u
div 和 span
6.1 div division 分隔分割帮助我们实现网页的布局是一个block标签
没有特殊含义
6.2 使用div实现圣杯布局时通常有两种方法一、实现浮动、二弹性布局 flex
6.3 span 也没有特殊含义是一个行内标签 inline
image标签
是一个行内块标签常用属性有 src alt（图片未显示时展示、有利于SEO） tittle（鼠标移入停留后展示） height width border
a标签 anchor 锚点
主要属性有 href 添加链接地址
target打开的目标地址 _blank _self
格式 <a href="" target ="" >文本或图片</a>
8.1 链接的分类
一般有内部链接、在一个网站内进行跳转
外部链接、锚点链接、其他链接
8.2 锚点链接
格式<a href="#xxx">

点击链接后会跳转至指定标签处
其中顶部锚点比较特殊，当在底部设置好<a href ="#top"></a>不用设置</top>就可以实现跳转

其中#top 还可以省略为# 也可实现跳转

<a href =""></a> 和<a href="#"> 都可以实现跳转到页面开头位置，只不过前者会重新刷新页面

列表标签
主要有有序标签、无序标签、自定义标签
分别是 ol li ******* ul li ***** dl dt dd******
英文缩写分别为 order list unorder definition term description
表格标签 table
常用标签有 <tr></tr> <th></th> <td></td>
常用属性有 width height border
cellpadding：表示单元格内容与单元格边框之间的margin大小
cellspacing: 表示单元格边框之间的距离

多个单元格合并，分为行合并以及列合并，设置格式为<td colspan="x"></td>
表示从当前单元格开始要合并的列单元格的数量
colspan:表示列合并 rowspan：表示行合并

form 表单
常见属性action，表示表单提交时的路径
包含的其他标签
11.1 input标签有重要的type属性可以设置多种样式常见的有 text number
password radio checkbox
11.2 seclct+option 标签可以设置下拉选项框
11.3 textarea 可以设置输入内容区域

lable for id
<lable for="uname">姓名</lable>
<input id ="uname" type ="text"></input>
在鼠标点击姓名时，会自动获取焦点到输入框中

补充知识：
A ：路径分为相对路径和绝对路径
相对路径：相对于当前目录下的文件路径
./ 表示当前目录（可以忽略不写） ../表示上级目录 ../../ 表示上上级目录
绝对路径：在计算机上存储的绝对地址，URL也是绝对路径
D：文本分类：纯文本和超文本
纯文本表示只有文字，没有样式，用记事本打开不会出现乱码
超文本：文字+样式常见的有Word文档、视频、音乐、程序、链接等
B ：SEO 搜索引擎优化(Search Engine Optimization)
C： DTD 文档类型定义(Document Type Definition)