HTML基础
文章出自拉勾大前端--前端就业班
对于梦想我曾经想过放弃，但这个躯体由我主宰，我想去追求星辰大海，咸鱼也有想翻身的一天，这短短的一生，我们最终都会失去，你不妨大胆一些，爱一个人，攀一座山，追一个梦。我不是一无是处，希望我身上微薄的光，有一日能遇上你漆黑的夜。
一、咸鱼想翻身的第一步--拉勾找厂上班
我是一个后知后觉的90后，说白了就是懒，然而内心的众多想法让我不得不向社会低头，从大学毕业以后，就一直没找到自己合适的工作，年轻的时候就想着怎么考证，从而荒废了自己最真实的想法，那么最真实的想法是啥呢，当然是提升自己，想做一名程序员，说起学前端最真实的想法就是感觉前端最简单。系统学和自学又是不一样的概念，在自学无果的情况下，在vue社区看到拉钩教育（不得不说乱打广告真的有用），尝试报着试试的态度去学下吧，才发现拉勾教育并不是什么小机构，也没有让我失望，解除了我对报班学习的种种误会。总之，找厂上班靠拉钩了！
学习感受
- 我一直觉得自己是一个不善言辞的人，圈子也很小，从拉勾小姐姐找上我的那一刻，我仿佛找到了自己的圈子，第一感觉就是学习氛围很好，入学手续和其他什么的也很简单，有这么多一起学习的小伙伴，自己学起来也很有动力，这个群体让我感受就是世界所有人都在奋斗，不再每天碌碌无为，这样真的挺好
- 学习上，我自己是有一年左右的自学经验的，说白了就是野孩子，没有经过系统的学习，还真的不知道自己错过了这么多东西，知识点和要点老师在课上都讲的非常清楚，自己以前遇到的问题也慢慢的被解决的，也就在这个时候我感觉到自己还是有很多东西需要虚心下来学习的，拉勾让我有了上学那味了，也感觉找回了曾经学习的氛围，没事的时候在群里东拉西扯，反正目前对就业还是比较有信心的
二、有些可以不装在脑子里的东西--笔记
HTML基本结构
基本骨架
- HTML文件最基本的四个标签，组成了网页的基本骨架，包括：<html>、<head>、<title>、<body>四组标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
<html>标签
- 定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在<html>标签内部。
<head>标签
- 用于存放<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。
在<head>标签中我们必须要设置的标签是title
<title>标签
- 作用1：让页面拥有一个属于直接的标题。
- 作用2：title中的关键字可以作为搜索引擎抓取的关键字，提高SEO搜索引擎优化
- 作用3：内部的内容会显示在搜索结果的标题部分
- 作用4：作为浏览器收藏夹默认的网页标题
建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字
<body>标签
- 作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签
<body>标签内部的元素内容会显示在浏览器的窗口中
DTD
- 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition,简称DTD。也称作文档声明类型，DocType Declaration
HTML5版本 <!DOCTYPE html>告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面
命名空间
- <html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性
语言
- xml:lang="en"和lang="en" 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
- lang="zh-cn" 表示中文（中国）
HTML5版本 <html lang="en">
字符集
- <head>标签内部的meta标签通过http-equiv属性定义了当前的网页所使用的字符编码
HTML5版本 <meta charset="UTF-8">
常用字符集编码
-
国际通用字库
- UTF-8: 以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小
-
中文国标字库
- gb2312: 共收入汉族6763个和包括拉丁字母、希腊字母、日文、俄语西里尔字母在内的682个
- gbk: 是gb2312的扩展，增加了繁体字，共收入21886个汉字和图形符号，其中汉子21003个，图形符号883个，一个汉字为2个字节大小
字符集常见问题
-
使用情况建议
- 如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8
- 如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk
注意：<meta>标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现字库不匹配，浏览器加载是出现乱码
HTML常用标签
注释
- 在源代码中添加描述性提示信息，便于我们阅读代码
- 对于HTML纠错也大有帮助，可以通过注释某一行HTML代码，以便检索错误的位置
- 暂时注释掉一部分不用的代码，便于后期恢复代码
<!-- 书写注释内容 -->注释只在源代码中可见，在浏览器窗口是不显示的
标题标签
- 标题,是通过<h1>-<h6>六个标签分别来对六个级别的标题进行定义的
- <h1>定义最大的标题，<h6>定义最小的标题
- <h1>-<h6>标签都是双标签，且是容器级标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
标题作用
- 标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。
标签级别
- 标题标签之间是不能相互嵌套的，下一级标题与上一级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题
权重
- 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次之，以次类推
- <h1>在整个HTML中权重非常高，内部应该放重要的内容，比如LOGO
- <h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，如果一个页面出现多个<h1>，反而降低权重。约定，一个页面只会出现一个<h1>
段落标签
- 段落是通过<p>标签进行定义的
- 标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等
- 作用：<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式
<p>这是段落标签</p>
换行标签
- <br>标签是HTML中的一个简单的换行符
- <br>标签是一个单标签
- 在需要换行的位置可以使用<br>标签书写，只是进行简单的强制换行
<p>这是第一<br />个段落</p>
文本格式化
- HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等
<b>定义粗体文本</b> <i>定义斜体<i/> <u>定义下划线</u>
图像标签
- 图像由<img>标签进行定义
- <img>标签是单标签，本身相当于一个特殊的文本
- <img>标签的作用是在指定的位置插入一张图片
- 在HTML文件，常用的插入图片的类型有jpg,png,gif
<img src="smile01.jpg" ><img>标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化，其他属性可以根据需求进行设置
音频标签
- 音频使用<audio>标签进行定义
- 同图片一样，需要使用src属性设置音频查找的路径
- 音频文件支持的格式包括： mp3、ogg、wav
//设置控制器控制音频 <audio src="" controls="controls"></audio>
视频标签
- 视频的设置方法和音频类似
- 视频使用<video>标签进行定义
- 使用src属性设置视频查找路径
- 视频文件支持的常用格式： mp4、ogg、webm
//设置控制器控制视频频 <video src="" controls="controls"></video>
超级链接标签
- 在HTML中使用<a>标签来创建链接
- 可以实现两种跳转：跨页面跳转、页面内跳转
<a href="" target="_blank" title="超级链接"></a> -
target属性
- _self:默认值，表示跳转的页面在当前窗口打开，不会打开新窗口
- _blank: 表示跳转的页面在新窗口打开
-
title属性
- title设置的鼠标悬停的提示文本，与<img>标签类似
设置锚点
- 在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的
- 在目标位置设置一个空的<a>，只设置一个name属性，name设置方式和id相同，也必须是唯一的
<a href="#maodian"></a>
跨页面锚点跳转
<p id="maodian"></p>
<a href="http://www.baidu.com#maodian"></a>
列表
- 列表用于制作HTML中的一系列项目
- 通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建
- 根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表
-
无序列表标签
- 无序列表标签分别是<ul>和<li>
- <ul>内部只能嵌套<li>,<li>标签不能脱离<ul>单独书写
- <li>标签是一个经典容器级标签
- 无序列表之间的<li>没有先后顺序之分，重要程度相同
-
有序列表标签
- 有序列表标签由<ol>和<li>组成
-
定义列表标签
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合
- 由三个标签组成完整结构，包含<dl>、<dt>、<dd>
- dt和dd标签也是容器级标签，内部可以放置任意内容
布局标签
-
<div>标签
- 最经典的容器级标签，内部可以放置任意内容
- 划分网页区域，进行结构布局
-
<span>标签
- 不改变整体效果，辅助进行局部调整
HTML基本语法
表格
- table: 定义表格的大结构
- tr: 表格的行，定义的表格由多少行组成
- td: 表格数据，定义行内单元格
表格的单元格之间有默认的空隙，会导致双线边框。解决方法:设置标签样式属性style。属性值:border-collapse : collapse;表示边框塌陷。
-
单元格属性
- rowspan跨行和并。上下的合并。
- colspan:跨列合并。左右的合并。
-
分区标签
- caption: 表格的标题，内部书写标题文字
- thead: 表格的头部。内部嵌套tr>th
- tbody: 表格的主体。内部嵌套tr>td
- tfoot: 表格的页脚。内部嵌套tr>td
注意:不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的
表单
-
表单的组成
- HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件
- 在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成
-
表单域标签
- HTML表单域使用<form>标签进行定义
- <form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内
-
表单域标签属性
- action: 指定接收并处理表单数据的服务器程序的url地址
- methid: 设置表单提交方式 get/post
- name: 规定表单的名称
<form action="data.php" method="post" name="dxa">
表单控件
-
<input>标签
-
单行文本输入框：text
- <input>标签的type属性值为text
- 定义提供用户输入的单行文本的输入框，不能输入多行文字
- 常用value属性定义默认的输入文字
用户名: <input type="text" value="请输入你的用户名">
-
密码输入框：password
- <input>标签的type属性值为password
- 定义提供用户输入的密码框
密码: <input type="password">
-
单选框：radio
- <input>标签的type属性值为radio。
- 定义提供用户点击选择的单选框
- 单选框一般都是成组出现，多个单选框组成一组选择的情况
- 同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性实现单选效果
性别: <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女
-
复选框：checkbox
- <input>标签的type属性值为checkbox
- 复选框允许用户在有限数量的选项中选择零个或多个选项
- 同一组复选框最好也设置相同的name属性
爱好: <input type="checkbox" name="hobby" checked="checked">羽毛球 <input type="checkbox" name="hobby">兵乓球 <input type="checkbox" name="hobby">篮球
-
单行文本输入框：text
按钮
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="image" src=""> 图片按钮
文件上传
- <input>标签的type属性值为file
- 定义文件上传按钮，可以提供用户选择本地文件进行上传服务器
- 使用input的multiple属性，可以决定是否可以选择多个文件
<input type="file" multiple="multiple" />
文本域<textarea>
- 文本域使用<textarea>标签定义，制作可输入多行的区域
- 文本域可以设置默认输入文字，在双标签之间书写默认文字
- <textarea>有两个属性，可以设置显示区域的大小
- rows: 行，数字表示显示最大行数，超出部分会被隐藏并显示滚动条
- cols: 列，数字大小表示出现滚动条，每一行显示的最大字节数
<textarea name="" id="" cols="" rows=""></textarea>
下拉菜单
- 下拉菜单需要两个标签完成的结构
- <select>:选择，表示定义下拉菜单的整体结构
- <option>:选项，表示下拉菜单的每一项
城市： <select> <option selected="selected">北京</option> <option>上海</option> <option>广州</option> </select> -
分组管理
- 下拉菜单选项如果变复杂，可以将<option>进行分组管理
- 可以使用<optgroup>对选项进行分组，<optgroup>是一个双标签
- select>optgroup>option
城市： <select> <optgroup lable="国内"> <option selected="selected">北京</option> <option>上海</option> <option>广州</option> <optgroup> <optgroup lable="国外"> <option selected="selected">巴黎</option> <option>纽约</option> <option>东京</option> <optgroup> </select><lable>标签的作用是帮表单元素定义标记。如果将表单控件与提示内容使用<lable>进行绑定后，当用户鼠标点击<lable>内的提示内容，浏览器就会自动将焦点转到和标签相关的表单控件上
<label>标签
```
性别: <input type="radio" name="sex" checked="checked" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
性别: <label><input type="radio" name="sex" checked="checked">男</label>
<label><input type="radio" name="sex" checked="checked">女</label>
```fa
