HTML

超文本标记语言(Hypertext Markup Language)

超文本是链接，标记是标签

1. 标签属性

双标签	用法	备注/快捷键
html	整个网页	ctrl+enter
head	头部	给浏览器看的
title	网页标题
body	内容主题	给用户看的
h1-h6	标题	h1只能用一次
p	段落	换行且段落之间有空隙
<img src='url'>	图像	不换行,可以直接填在线图片
<a href='url'>	跳转到本地文件或超链接	href="#"表示空链接
<audio src="url">	音频
<video src='url'>	视频

属性	作用	备注
alt	替换文本	图片无法显示时显示的文字
title	提示文本	鼠标停在图片上的显示
width	宽度	默认等比例缩放
height	高度
target="_blank"	在新窗口打开
src	url
controls	显示控制面板
loop	循环播放
autoplay	自动播放	浏览器一般禁用
muted	静音播放	视频属性，浏览器支持静音播放

文本格式化	备注
strong/b	加粗
em/i	倾斜
ins/u	下划线
del/s	删除线

单标签	备注	快捷键
br	换行
hr	水平线
＜!--注释--＞	注释	ctrl+/

Tips

• 快捷生成双标签方法 关键字回车
• 以./开头有提示
• .表示当前文件所在文件夹，/表示进入某个文件夹，..表示上一级文件夹
• 在html5中，属性名和属性值一致可以简写为一个单词

2. 列表，表格，表单

2.1.1 无序列表

布局排列整齐不需要规定顺序，ul嵌套li,独占一行，
ul只能包含li标签，li可以包含任意内容

<ul>
    <li>1</li>
    <li>2</li>
</ul>

2.1.2 有序列表

ol嵌套li

<ol>
    <li>1</li>
    <li>2</li>
</ol>

2.1.3 定义列表

dl嵌套dt和dd,dl是定义列表，dt是标题，dd是描述

    <dl>
        <dt>head</dt>
        <dd>1</dd>
        <dd>2</dd>
    </dl>

2.2 表格

table嵌套tr行，tr嵌套th表头、td内容
border='1' 添加边框

    <table border="1">
		<thead>
        <tr>
            <th>姓名</th>
            <th>分数</th>
        </tr>
		</thead>
		<tbody>
        <tr>
            <td>张三</td>
            <td>99</td>
        </tr>
		</tbody>
    </table>

内容划分：thead头部，tbody主体，tfoot底部，包裹住tr内容即可。

合并单元格方法：保留最左最上的单元格并td中添加属性（需要合并的单元格数量）
行合并rowspan='2'，列合并colspan='2'

2.3 表单

2.3.1 input标签

<input type="text" placeholder="提示信息"> type属性值不同功能不同,placeholder为占位文本显示提示信息
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="file" multiple>

type属性值	说明	属性
text	文本框	单行文本
password	密码框
radio	单选框	name单选功能，checked默认
checkbox	多选框	checked默认选中
file	上传文件	multiple多文件上传

2.3.2 下拉菜单

select嵌套option，默认选择第一个option，selected默认选择

城市：
<select>
    <option>江西</option>
    <option selected>北京</option>
</select>

2.3.3 文本域标签

多行输入文本的表单控件
<textarea>请输入文本</textarea>
属性：name，id，cols，raws

2.3.4 label标签

绑定文字和控件关系，增大点击范围
方法一：label只包裹内容，设置for属性值与控件的id值相同
方法二：label直接包裹控件，不需要属性

<input type="radio" name="gender" id="man"><label for="man">男</label>
<label><input type="radio" name="gender">女</label>

2.3.5 按钮button

submit 提交（默认），reset重置，button无功能配合js使用
需要在form表单区域内

<form action="">
用户名：<input type="text"><br>
密码：<input type="text"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>

2.4 无语义的布局标签

布局网页，划分网页区域，摆放内容
div独占一行 大盒子
span不换行 小盒子

2.5 字符实体

代码中空格只识别一个

显示结果	描述	实体名称
	空格	 
<	小于	&lt;
>	大于	&gt;