HTML相关知识
一、HTML概论
1.定义
HTML：超文本标记语言，是一种用于创建网页的标记语言，它不是一种编程语言。
HTML使用标签来描述网页。
2.HTML基本结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head> <body> </body> </html>
逐行解释：
- <!DOCTYPE html>声明为HTML文档
- <html>、</html>是文档的开始标记和结束标记。中间包含头部（head）和主体（body）
- <head>、</head>定义了HTML文档的开头部分，这部分内容不会在浏览器中显示。
- <title>、</title>定义了网页的标题，在浏览器标题栏显示。
- <body>、</body>是浏览器可见的部分
二、HTML常用标签
1.head内常用标签
head内常用的标签可以分为两类：meta标签和非meta标签。
1）meta标签
meta元素可提供有关页面的原信息，针对搜索引擎和更新频度的描述和关键词。
meta元素标签位于文档的头部，不包含任何内容，提供的信息也是用户不可见的。
meta有两个属性：name属性和http-equiv属性，不同的属性又有不同的参数值，这些参数值实现不同的网页功能。
（1）http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，比帮助正确地显示网页内容，与之对应地属性值为content，content地内容其实就是各个参数地变量值。
<!--2秒后跳转到对应地网址--> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <!--指定文档地编码类型--> <meta http-equiv="content-type" charset="UTF-8"> <title></title> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
总的来说，http-equiv包含一些配置信息，告诉浏览器怎样浏览html中的内容。
（2）name：主要用于描述网页，与之对应地属性值为content，content中的内容主要是便于搜索引擎查找信息用的。
<link rel="icon" href="https://www.jd.com/favicon.ico"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!--便于网页的信息能够通过设置好的关键被搜索到--> <meta name="keywords" content=教程,软件,编程,开发,运维,云计算,网络,互联网" /> <!--描述信息，展示在搜索界面中--> <meta name="description" content="研究互联网产品和技术" />
总的来说，name属性是给搜索引擎看的。
meta类型其实还有一种meta property，主要作用就是同意网页内容可以被其他网址引用。
2）非meta标签
<!--标题，并不会在浏览器中显示--> <title>kebi</title> <!--图标--> <link rel="icon" href="你想插入的图标的路径，可以是网址，可以是文件路径"> <!--样式文件--> <link rel="stylesheet" href="这里存放你想表现的css样式"> <!--JS文件--> <script src="JS文件"></script>
注意：JS可以让你的网页动起来，CSS可以让你的网恋靓起来。
2.body内常用的标签
（1）基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> #段落前后存在空行 <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> #最多6个 <!--换行--> <br> <!--水平线--><hr>
一些常见的特殊字符
| 内容 | 对应代码 |
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版本 | © |
| 注册 | &ren; |
（2）div标签和span标签
div标签用来定义一个块级元素，并无实际意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联行，并无实际意义。主要通过CSS样式为其赋予不同的表现。
所谓块元素就是以另起一行开始渲染的元素，行内元素则不需要另起一行。这两个元素专门为定义CSS样式而生。
通常快级元素可以包含内联元素或者其他块，但是内联元素不能包含块级元素，它只能包含其他内联元素。
p标签不能包含块级标签。
（3）img标签
img元素向网页中镶嵌一幅图像。
请注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上连接图像。
<img>标签创建的是被引用图像的占位空间。
在元素内，属性的位置可以随意放置，属性之间用空格隔开。
img总共有11个参数，其中2个必选。
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
- src（必选）：规定显示图像的URL，可以是网址或者文件路径
- alt（必选）：规定图像的替代文本，当图片不显示的时候显示什么
- hight（可选）：定义图像的高度
- width（可选）：定义图像的宽度
（4）a标签
<a>标签定义超链接，用于从一张页面链接到另一张页面。
<a>元素最重要的属性是herf属性，它指示链接的目标。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
- href：规定链接向的页面的URL。可以是网址，可以是文件路径
- target：规定在何处打开链接文档，_blank在其他页面，_self在本地
<body> <p> <a href="001.jpg" target="_blank">本文本</a> 是一个指向本网站中的一个页面的链接。</p> #链接图片，<a>超文本<p>独立字段 <p><a href="http://www.baidu.com/" target="_blank">本文本</a> 是一个指向万维网上的页面的链接。</p> #链接网址 </body>
<body> <p> 这是邮件链接： <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body>
（5）select标签（创建一个多选菜单）
select元素可创建单选或多选菜单。
<select&>元素中的<option>标签用于定义列表中的可用选项。
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selectd：默认选中该项
- value：定义提交时的选项值
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
（6）lable标签
<label>标签为input元素定义标注（标记）。
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在label元素内点击文本，就会触发此控件，就是说，当用户选择该标签时，
浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>标签的for属性应当与相关元素的id属性相同。
属性说明：
- for：规定label绑定到那个表单元素
- form：规定label字段所属的一个或多个表单
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
（7）textarea标签（给你一个写字的框）
<textarea>标签定义多行的文本输出控件。
文本区域中可以容纳无限数量的文本，其中的文本的默认字体时等宽字体。
可以通过cols和row属性来规定textarea的尺寸，不过更好的办法是用CSS的height和width属性。
在文本输入内的文本行间，用“%OD%OA”（回车/换行）进行分隔。
textarea的格式和参数：
<textarea cols="30" rows="10"> 这里可以输入内容 </textarea> #textarea可以看作是一个框，使用<textarea></textarea>来创建。
属性说明：
- cols：规定文本区内的可见宽度。
- rows：规定文本区内的可见行数。
- required：规定文本区域时必填的。
- readonly：规定文本区域为只读。
- name：规定文本区域的名称。
- maxlength：规定文本区域的最大字符数。
- form：规定文本区域的一个或多个表单。
- disabled：规定禁用该文本区域。
- autofocus：规定在页面加载后文本区域自动获得焦点。
- wrap：规定当在表达中提交时，文本区域中的文本如何换行。
- placeholder：规定描述文本区域预期值的简单提示。
