1.head内部标签
- title 定义网页的标题
- meta 定义网页的基本信息!!
- style 定义css样式
- link 链接外bo义脚本语言
2.body内部标签
- h1-h6 标题
- p 段落
- br 换行
- hr 水平线
- div 分割(块元素)
- span 区域(行内元素)
3.文本格式化标签
- strong 加粗
- em 斜体(强调)
- cite 斜体(应用)
- sup 上标（上去）
- sub 下标 (下去)
4.一般标签(<body></body>)
5.自闭合标签(<br/>)
6.块元素
- 块元素特点:独占一行,排斥与其他元素位于同一行,包括块元素和行内元素
- 块元素内部可以容纳其他块元素或行内元素
- 常见块元素:h1-h6 p hr div等
7.行内元素
- 可以与其他行内元素位于同一行
- 行内元素内部可以容纳其他行内元素，但不能容纳块元素。
- 常见的行内元素有 strong em span
8.标签的语意
- div 分割(块元素)
- span 区域(行内元素)
- p 段落
- ol 有序列表(type属性值 1 a A i l)
- ul 无序列表(disc 实心圆 circle 空心圆 square 实心正方形）
- li 列表项
- dl(定义列表) dt(定义语术) dd(定义描述)
- h1-h6 标题1~标题6
- hr 水平线
- a 超链接
- strong 强调(加粗）
- em 强调(斜体)
- 上标
- 下标
- br 换行
- fieldset legend
- caption 标题
- thead 表头
- tbody 表身
- tfoot 表脚
- th 表头单元格
- td 表身单元格
9.表格
-
table 表格
-
tr(table row) 行
-
td(table data cell) 表格单元格 单元格
-
-
thead 表头
-
tbody 表身
-
tfoot 表脚
-
th 表头单元格
-
-
-
<table> 重试 错误原因
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table> 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因 重试 错误原因
12.图像标签:<img src="图片的地址" alt="图片描述"(给浏览器看) title="图片描述"(给用户看)> src和alt属性是必不可少的
13.图片格式
- JPG:可以很好处理大面积色调的图像,如相片,网页一般的图片
- PNG:图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。
- GIF:图片图像效果很差,但是可以制作动画
14.链接: <a href="链接地址" target="目标窗口的打开方式">
-
_self: 默认方式 即在当前窗口打开链接
-
_blank 在一个全新的空白窗口中打开链接
-
_top 在顶层框架中打开链接
-
_parent 在当前框架的上一层打开链接
-
锚点链接:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <h3>绿叶学习网问卷调查</h3> </head> <body> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>锚点链接</title> </head> <body> <div> <a href="#music">推荐音乐</a><br /> <a href="#movie">推荐电影</a><br /> <a href="#article">推荐文章</a><br /> </div> ......<br /> ......<br /> ......<br /> ......<br /> ......<br /> ......<br /> <div id="music"> <h3>推荐音乐</h3> <ul> <li>林俊杰-被风吹过的下图</li> <li>曲婉婷-在我的歌声里</li> <li>许嵩-灰色头像</li> </ul> </div> ......<br /> ......<br /> ......<br /> ......<br /> ......<br /> ......<br /> <div id="movie"> <h3>推荐电影</h3> <ul> <li>蜘蛛侠系列</li> <li>钢铁侠系统</li> <li>复仇者联盟</li> </ul> </div> ......<br /> ......<br /> ......<br /> ......<br /> ......<br /> ......<br /> <div id="article"> <h3>推荐文章</h3> <ul> <li>朱自清-荷塘月色</li> <li>余光中-乡愁</li> <li>鲁迅-阿Q正传</li> </ul> </div> </body> </html> </body> </html>
15.表单
- input: <input type="表单类型" value="默认文字" size="文本框长度" maxlength="最多输入字符数"> type:text 单行文本框 password 密码文本框 button 按钮 reset 重置按钮 image 图像形式的提交按钮 radio 单选按钮 checkbox 复选框 hidden 隐藏字段 file 文件上传
- textarea标签表单 :多行文本框 <textarea rows="行数" clos="列数">多行文本框内容</textarea>
- select 和 option :<select multiple="multiple" size="可见列表项的数目">
- <option value="选项值" selected="selected"> 选项显示的内容</option
- .......
- </select>
性别:
<input type="radio" name="gender" value="male" id="male">
<label for="male">男性</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女性</label>name属性用于将这两个单选项按钮分组,确保用户只能选择其中一个
value属性分别表示两个选项的值,当用户选择其中一个时,该选项的值会被提交到表单中
id 用于关联lable 标签 ,以便用户点击标签时也能选中 label标签!!!
16.多媒体 （插入音频,视频,flash）
- 网页插入音频,视频,flash使用embed标签 <embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed> 地址可以相对地址 也可以是绝对地址 width和height单位是px
- 为某个网页设置背景音乐 ,使用的是bgsound标签 <bgsound src="背景音乐的地址"/> loop="2",表示重复2次 loop="infinite" 表示无限次循环播放 loop='-1'也表示无限次循环播放
17.浮动框架iframe
- <iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>
- 设置浮动框架是否显示滚动条scrolling 该属性取值 auto:默认值 整个表格在浏览器页面中左对齐 yes 总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置也预留 no在任何情况下都不显示滚动条。
18.XHTML 在XHTML中,所有标签必须闭合 如<p> </p> <div> </div> <br/> 标签属性必须用引号 除了表单元素之外 用id代替name <div name="wrapper"></div>------> <div id="wrapper"></div>
19. id和class (id和class都用来选择元素)以便进行css操作和javascript操作 对于大结构用id 小的用class
- id :id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次
- class:class属性 我们可以为同一个页面的相同元素或不同元素设置相同的class,然后使得相同他们具有相同的css样式 当要为两个或两个以上的元素定义相同的样式 建议使用class 属性这样可以减少重复的代码
20.浏览器标题栏小图标
<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>
21.alt属性和title属性 alt是用于图片描述 是给搜索引擎看的，并且当图片无法显示时,页面会显示alt中的内容。 <img src="图片描述(给搜索引擎看)" title="图片描述(给用户看)"> 对于img我们一定要添加alt属性
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>
22. figure元素用于包含图片和图注 figcaption元素用于表示图注文字
23.表格标签
- table 表格 caption标题 thead 表头 tbody 表身 tfoot 表尾 tr 行 th 表头单元格 td 表格单元格
24.表单语义化
- label:用于显示在输入控件旁边的说明性文字 也就是将某个表单元素和某段说明文字关联起来。 <label for="">说明性文字</label> for关联的是id
- fieldset（加框）和legend（用来为filedset元素添加标题 描述该组元素的内容或目的 lengend元素应该作为fieldset元素的第一个子元素 并且只能有一个lengend元素）
- <br/>换行符 br只适用于p标签内换行
- del标签 内容会显示删除的样式一杠穿过内容 ins标签会在内容底部显示一
25.多媒体音频标签
- audio 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放 但播放是有限的
- 参数:autoplay 在音频就绪后马上播放 controls 向用户显示控件 比如播放按钮 loop 每当音频结束时重新开始播放 src 要播放的音频的url
- video视频标签 <video src="./media/video.mp4" controls="controls"></video>
- 参数:autoplay 视频就绪就播放 contrlos向用户显示播放控价 width 设置播放器宽度 height 设置播放器高度 loop 循环播放 preload 是否预加载如果有了autoplay就忽略该属性 src 地址 poster 加载等待的画面 muted静音播放