< !DOCTYPE > ：文档类型声明标签，告诉浏览器用哪个HTML版本显示网页 !DOCTYPE html —> HTML5

< html lang="xx" > ：当前文档显示语言（en；zh-CN；fr）en会触发浏览器翻译提示？

< meat charset="xx" > ：GB2312简体中文 BIG5繁体中文 GBK简繁体国标 UTF-8万国码

<h1>这里是h1标签</h1>

<h2>这里是h2标签</h2>

<h3>这里是h3标签</h3>

<h4>这里是h4标签</h4>

<h5>这里是h5标签</h5>

<h6>这里是h6标签</h6>

<p>段落标签 1、块级元素,会自动在其前后创建一些空白（内外边距）。即使忘用结束标签，大多浏览器也会正确地将 HTML 显示出来。 2、H5的p元素不支持align属性，用text-align规定文本对齐。 3、p元素默认按浏览器窗口宽度自动换行 4、p标签的属性：white-space  normal 默认。空白会被浏览器忽略。  pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。  nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。  pre-wrap 保留空白符序列，但是正常地进行换行。(之前这几段就是用了pre-wrap哦）  pre-line 合并空白符序列，但是保留换行符。  inherit 规定应该从父元素继承 white-space 属性的值。 <br/>强制换行标签 <br> 与<br/>很相似。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使<br>在所有浏览器中的显示都没有问题，使用<br/>也是更长远的保障。 文本格式化标签： <strong>加粗（<b>也可） <em>倾斜 （<i>也可） <del>删除线 （<s>也可） <ins>下划线 （<u>也可） 1、根据 HTML 5 的规范，<b>标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。HTML 5 规范声明：标题应该用 <h1> -<h6> 标签表示，被强调的文本应该用 <em> 标签表示，重要的文本应该用<strong>标签表示，被标记的或者高亮显示的文本应该用<mark>标签表示。 2、也可以使用 CSS 的 "font-weight" 属性设置粗体文本。

<img>图像标签有两个必需的属性：src 和 alt 1、严格说，图像不插入 HTML 页面，而是链接到HTML页面上。<img>标签的作用是为被引用的图像创建占位符。 2、通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。 3、alt 属性是在图片不能正常显示时出现的文本提示；  title 属性是在鼠标在移动到元素上的文本提示；  crossorigin图像的跨域属性。 4、一般只修改width或者height，图片自动等比例缩放。 5、可用border属性设置边框。 6、图片热区——当鼠标指向图片的不同部位时,可以打开不同的超链接。 菜鸟教程img标签参考链接

<a>超链接标签 1、有:link :visited :hover :active 4种伪类(要按顺序哦); 2、<a href=""><img src=""/></a>实现图片链接，表格/音频/视频等都可以 外部链接——百度 内部链接——testLink.html 暂空链接——href="#"默认是指回自己页面？ 锚点链接——href="#p2"定位到页面的某个位置(用元素id定位）会改变url，再次刷新会有问题，想避免得用js或jq写 (注意浏览器输入 index.html#p2 这样的地址也可锚点定位,#代表网页中的一个位置) <a id="a1" href="#p2">试试不改url的锚点跳转</a> -------------------------------------------- <script> var a = document.getElementById('a1'); a.addEventListener('click',function(e){ //阻止a标签的默认行为 e = e || window.event; e.preventDefault(); //获取整个href路径 //var target = this.href; //获取#片段识别符 var target = this.hash; //获取该锚点的位置 var offsetTop = document.querySelector(target).offsetTop; //用原生js滚动页面 document.documentElement.scrollTop = offsetTop; }) //jq写法 //$('a').on('click',function(e){ //阻止a标签的默认行为跳转,这样就不会把#判断符带入到url中 //e = e || window.event; //e.preventDefault(); // 获取id号,得到是#box1 //var target = $(this).prop('hash'); //将页面滚动到对应的位置 //$('html,body').scrollTop($(target).offset().top); //}); </script> -------------------------------------------- 下载链接——测试下载.txt 下载链接——测试下载.zip 下载链接——地址链接的是文件（.exe或.zip等等文件资源)。txt可以被浏览器解读所以直接打开了，html同理 相对路径：从一个目录为起点到你所在的目录（注意是反斜杠/) testLink.html 默认是同一目录下的资源（同级路径） res/testLink.html 默认是同一目录下的资源（下级路径） ../testLink.html 查找上级目录（上级路径） ../../testLink.html 查找上两级目录 绝对路径：从根目录为起点到你所在的目录（注意是斜杠\) C:\Users\lenovo\Desktop\HTML_Review\testLink.html 注意绝对路径在不同电脑下是不同滴 http://chenwenchen.top:8080/TeacherTool 完整的网络地址也属于绝对路径，相当于网络上的绝对地址 测试4种target 属性 a标签超链接1（target=默认_self） a标签超链接2（target=_blank） a标签超链接3（target=_top） a标签超链接4（target=_parent）

注释标签 <!--注释内容xxx--> 特殊字符 & ———— &amp < ———— &lt > ———— &gt 半方空格 ———— &ensp 全方空格 ———— &emsp 不断行空格 ——— &nbsp

表单标签<form> 1、收集用户信息、进行交互 2、表单域（整个大区域）+表单控件（可以点击、输入的元素）+提示信息 3、<form>会把自己表单域(= <form> 标签)内所有控件元素的值提交给后台 4、<form> 中有action 属性（提交地址）、method 属性（提交方式）、name 属性（表单域名称） 5、参考菜鸟教程 6、method 可以post、get 7、表单使用例子————diy注册页面

<input>输入标签 1、输入类型是由类型属性（type）定义的。type属性常用属性值如下： type ="button、checkbox、file、hidden、image、password、radio、reset、submit、text" 2、<input>标签还可能有 value，name，checked，maxlength 这些属性 3、name 和value 按道理都是要的，给后台使用。单选和复选要有相同的name 4、checked 提前赋值checked=“checked”可以使其默认勾选。(只加checked属性不赋值也有效） 5、maxlength 限制输入的最多字符数 6、button型的<input>常用于启动js脚本 7、<label>标签为元素定义标注。可实现点击标签就使input获焦点（对比FirstName和Passward，注意两种写法） ①文本域（Text Fields） -------------------------------------------------------- <label>First name:<input type="text" name="firstname"></label> <label for="t2">Last name:</label><input type="text" name="lastname" id="t2"> 文本域 <textarea cols="50" rows="5">有cols和rows属性指定宽高（但一般用css）</textarea> -------------------------------------------------------- First name: Last name: 文本域 有cols和rows属性指定宽高（但一般用css） ②密码字段 -------------------------------------------------------- Password: <input type="password" name="pwd"> -------------------------------------------------------- Password: ③单选按钮（Radio Buttons），注意单选框指的是在一个form中的所有Radio Button只能选中一个 -------------------------------------------------------- <label><input type="radio" name="sex" value="male">Male<img src="img/img1.jpg" width="30"><label> <label><input type="radio" name="sex" value="female">Female<label> -------------------------------------------------------- Male Female ④多选按钮（Checkboxes） -------------------------------------------------------- <input type="checkbox" name="vehicle" value="Bike" checked>I have a bike <input type="checkbox" name="vehicle" value="Car">I have a car -------------------------------------------------------- I have a bike I have a car ⑤提交按钮（SubmitButton）点击后提交到<form>标签中action属性规定的页面 -------------------------------------------------------- <input type="submit" value="这里是value值——提交啦！"> <input type="reset" value="type=“reset”"> -------------------------------------------------------- ⑥按钮（Button）常用于启动js脚本 -------------------------------------------------------- <input type="button" value="type=“button”的自定义按钮" onclick="alert('点我干嘛');"> -------------------------------------------------------- <select>下拉选项列表 类似列表标签，只不过列表项是<option>标签。可类似checked设置selected 可选属性如下: autofocus=""autofocus规定页面加载时下拉列表自动获得焦点 disabled="diabled"属性值为true时禁用下拉列表 form属性可以定义select字段所属的一个或多个表单 multiple为true时可选择多个选项 required规定用户在提交表单前必须选择一个下拉列表中的选项 规定下拉列表中可见选项的数目 -------------------------------------------------------- <select autofocus style="font-size:17px;"> <option value="v1">autofocus=""autofocus规定页面加载时下拉列表自动获得焦点</option> <option value="v2">disabled="diabled"属性值为true时禁用下拉列表</option> <option value="v3">form属性可以定义select字段所属的一个或多个表单</option> <option value="v4">multiple为true时可选择多个选项</option> <option value="v5">required规定用户在提交表单前必须选择一个下拉列表中的选项</option> <option value="v6">规定下拉列表中可见选项的数目</option> </select> --------------------------------------------------------