认识html标签
1.!DOCTYPE 文档结构类型
2.<html>开始标记
</html>闭合标记
3.charset 字符编码集
常用字符集:UTF-8、GB2312、GBK等
4.<meta>单标记
5.<h1>h1到h6的标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
6.<p>段落
7.<ul>无序列表
- 不要独自驾车去山区
- 不要跟别人的男朋友驾车去山区
- 不要跟别人的老婆驾车去山区
- 不要跟带别人的狗驾车去山区
<ul>
<li>不要独自驾车去山区</li>
<li>不要跟别人的男朋友驾车去山区</li>
<li>不要跟别人的老婆驾车去山区</li>
<li>不要跟带别人的狗驾车去山区</li>
</ul>
8.<ol>有序列表
- 不要独自驾车去山区
- 不要跟别人的男朋友驾车去山区
- 不要跟别人的老婆驾车去山区
- 不要跟带别人的狗驾车去山区
<ol>
<li>不要独自驾车去山区</li>
<li>不要跟别人的男朋友驾车去山区</li>
<li>不要跟别人的老婆驾车去山区</li>
<li>不要跟带别人的狗驾车去山区</li>
</ol>
9.<dl>定义列表
- 名字
- 是一个人的标识
<dl>
<dt>名字</dt>
<dd>是一个人的标识</dd>
</dl>
10.<pre>预格式
11.<blockquote>大引用
这是一个大引用
<blockquote>这是一个大引用</blockquote>
12.<q>小引用
这是一个小引用
<q>这是一个小引用</q>
13.<span>跨越多个字符
这是一个红色的词
<p>这是一个<span style="color:blue;">红色</span>的词</p>
14.<a>超链接
<a href="链接" target="_blank">
15.<img>图片
<img src="" alt="提示" />
16.<div>区块
17.<strong><b>加粗
加粗
<strong>加粗</strong>
18.<em><i>斜体
斜体
<em>斜体</em>
19.<sup>上标
22
2<sup>2</sup>
20.<sub>下标
log2
log<sub>2</sub>
21.<abbr>缩写
DOTA
<abbr title="Defend Of Ancient">DOTA</abbr>
22.<figure>定义说明
图片
<figure>
<img src="XXX" alt="图片">
<figcaption>图片</figcaption>
</figure>
23.<audio>音频
<audio src="XXX" controls autoplay></audio>
controls使可控 autoplay自动播放
24.<video>视频 支持格式:MP4 webm ogg
<video src="" controls autoplay loop></video>
loop循环播放
25.<table>表格
1-1 | 1-2 | |
2-1 | 2-2 | 2-3 |
3-2 | 3-3 |
<table border="1">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
tr表示表格行,td表示表格数据,table-row,border设置边框线粗细,
colspan合并行,rowspan合并列
th表头,加粗 caption大表头
26.<style>样式控制 置于head标签中
table{
border-collapse: collapse;
}
为表格添加上边框
27.<form>表单
<form action="XXX" method="get">
<input type="text" placeholder="请输入账号" />
<input type="password" maxlength="6" />
<input type="button" value="点击我" />
<input type="reset" value="清空" />
<input type="submit" value="提交" />
<button>新的提交按钮</button>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
班长<input type="checkbox" />
学委<input type="checkbox" checked />
纪委<input type="checkbox" />
<select name="" id="">
<option value="">北京</option>
<option value="">南京</option>
<option value="">东京</option>
<option value="">西京</option>
</select>
<textarea name="" id=""></textarea>
</form>
action提交外部链接 method提交方式:get post
input类型:文本框(text),密码框(password);点击按钮(button),重置按钮(reset),提交按钮(submit);单选(radio);多选(checkbox)
placeholder:预定义文本框内容;maxlength:最大输入限制;value:文字内容;name:命名,用于表单提交数据;for:ID选择;checked:默认选择
<lable>可以增强用户体验
<select>创建下拉栏,使用<option>编辑选项
<textarea>一个可以多行输入的文本框
28.<mark>高亮
<p>我是<mark>中国人</mark></p>
29.<nav>导航栏
<nav>
<a href="XX">科技</a>
<a href="XX">体育</a>
<a href="XX">军事</a>
</nav>
30.<header><footer><article><section><aside>等h5新语义标签
header页眉 footer页脚 article内容 section区块 aside侧边栏
31.行内元素,块级元素
行内:
块级:
inline-block行内块