HTML
标签
- 单标签
- 双标签
文字样式变形
- strong 加粗
- em 倾斜
- del
删除线 - ins 下划线
- p> 换行
插入图片
img src="链接" alt="若显示失败输入的字符" width="左右大小" height="高低" title="鼠标放在图片上显示的字"/> (src必须)
路径
- 相对路径
- 下一条路径 img src=”本路径中含有图片的文件夹/图片名称（包含后缀）”/>
- 上一条路径 img src=”../图片名称（包含后缀）”/>
- 绝对路径
- 此电脑中的文件 img src=”C.........\图片名称（包含后缀）”> (注意相对和绝对的斜杠不一样)
- 完整的网络地址 img src=”直接将网址输入”/>
链接标签
| 链接类型 | 说明 | 标签 |
|---|---|---|
| 外部链接 | target中为下划线self就是关本界面开新界面，下划线blank就是直接开一个新界面 | a href=”直接将网址输入” target=”…”>显示出的字符 |
| 内部链接 | 即自己多个网页之间转跳的链接 | a href=”直接输入html的名字（加后缀”>显示出的字符 |
| 空链接 | 常用于页面尚未完善时的框架 | a href=”#”>显示出的字符 |
| 下载链接 | 当href指向一个zip或exe文件时，点击链接会直接下载，如果需要不点击，可以使用a.download来实现 | |
| 网页元素链接 | 文本、表格、音频、视频都能进行超链接 | a href=”…”> img src=”…”/> |
| 锚点链接 | 可以直接转跳到页面内上下文 首先要对跳的地方进行设置 然后进行设置超链接 | h1 id=”…”>显示出的字符 a href=”#…”> 显示出的字符 |
| 注释 | ctrl+/ | !–输入想要输入的注释–> |
| 特殊字符 | 描述 | 字符的代码(前面都加&) |
|---|---|---|
| 空格 | nbsp; | |
| < | 小于号 | lt; |
| > | 大于号 | gt; |
| & | 和号 | amp; |
| ￥ | 人民币号 | yen; |
| © | 版权 | copy; |
| 注册商标 | reg; | |
| ° | 摄氏度 | deg; |
| +- | 正负号 | plusmn; |
| × | 乘号 | times; |
| ➗ | 除号 | divide; |
| ^2^ | 二次方 | sup2; |
| ^3^ | 三次方 | sup3; |
表格标签
表格的基本语法
- table>是用于定义表格的标签。
- tr>标签用于定义表格中的行，必须嵌套在table标签中。
- td>标签用于定义表格中的单元格，必须嵌套在tr标签中。
- th>标签用于制作表头，必须嵌套在tr标签中。
- thead>标签用于制作表头区域，必须嵌套在table标签中。
- tbody>用于制作表格主体部分，必须嵌套在table标签中。
表格属性（都要写到table标签中，CSS还会学，小小掌握即可）
- align=”…”表示表格与文字的对齐方式
- border=”…”表示边框厚度
- cellpadding=”…” 规定文字与表格之间的空白，默认为一像素
- cellspacing=”…”规定单元格之间的空隙，默认为2像素
- width、height=”…” 规定单元格的宽度、高度
合并单元格（必须在第一行和第一列添加标签 且记得删除多余的单元格，必须用于td标签中）
rowspan=”要合并的行”
colspan=”要合并的列”
列表标签
- 无序列表（重点）–>整齐简单不要求顺序用无需列表
- ul>
- li> 定义列表项 可以存放任何元素 相当于一个容器
- ol>表示有序列表 同样使用li标签
- dl>用于描述自定义列表（dl标签中只能存在dt和dd标签）
- dt>用于描述名词
- dd>用于对名词进行解释
表单标签
表单域
- form action=”url地址” method=”提交方式” name=”表单域名称”>
- action属性用于指定接收并处理表单数据的服务器程序的url地址 还没学完后面会扩展
- method属性用于设置表单数据的提交方式，其取值为get或post
- name属性用于指定表单的名称，以区分同一个页面中的多个表单域
表单控件（表单元素）
input type=”属性值” name=”名称” value=”用户自定义” checked=”checked” maxlength=”一个正整数”>输入表单元素
type的属性值：
属性值 作用 button 定义可点击按钮（多数情况下用于通过javascript启动脚本） checkbox 定义复选框（与radio相对） file 定义输入字段和浏览按钮，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段，该字段中的字符被掩码 radio 定义单选按钮（与checkbox相对，多选一必须有相同name） reset 定义重置按钮，重置按钮会清除表单中的所有数据 submit 定义提交按钮，提交按钮会把表单数据发送到服务器 text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 name属性：定义input元素的名称
value属性：规定input元素的值
checked属性：规定此input元素首次加载时应当被选中 （用于单选和多选按钮 页面一打开就被选中就加这个属性）
maxlength属性：规定输入字段中的字符的最大长度
label for=”名称”>要点击的字符或图片标签：用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，增加用户体验。
- id属性：与label标签搭配使用 放在input里面
select>下拉表单元素用于多个选项选一个简洁页面
- option>选项只能嵌套在select元素中 （在option标签中定义selected=”selected”，当前项为默认选项）
textarea>文本域元素用于键入大量内容时
提示信息
- 记得添加增加用户体验的提示信息
emmet语法
- 标签*n+tab可以快速生成n个标签
- 父子级关系输入标签一>标签二+tab可以快速生成父子级标签
- 兄弟级关系输入标签1+标签二+tab可以快速生成兄弟级标签
- 输入标签.类名可以快速生成有类名的标签（类名后面加$*n可以生成很多不同的类名）
HTML5新特性
新特性虽然强大 但是都有兼容问题 基本是IE9+以上的版本才支持，如果不考虑兼容性问题，可以大量使用这些新特性
HTML5新增的语义化标签
参见CSS规范使用标签 打*的是语义化
HTML5新增的多媒体文件
视频
尽量放mp4文件
样式为video src=””是一个双标签
常见属性为autoplay（自动播放）/controls（播放控件显示）/width/height/loop（循环播放）/preload（是否预加载 属性值为auto/none）/src/poster（等待加载的画面图片）/muted（静音播放）
音频
- 尽量放mp3文件
- 样式基本同视频 属性只有autoplay/controls/loop/src
HTML新增的表单类型
input type后面的属性值增加了很多 例如email/url/date/time/month/week/number/tel/search/color
新增了很多表单属性
- required:required；表示该表单不能为空
- placeholder:提示文本； 表示表单的提示信息
- autofocus:autofocus;自动聚焦
- autocomplete:on/off; 当用户在字段开始键入时，浏览器基于之前键入过的值，显示出字段中填写的选项
- mutiple:mutiple; 可以多选文件提交