HTML学习笔记（一）
一：声明文档类型
<!DOCTYPE html>
二：注释方式
<!--注释内容--> 快捷键：ctrl+/
三：文档结构
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ...... 5 </head> 6 <body> 7 ...... 8 </body> 9 </html>
四：<head></head>标签内的六大标签
- link: 链接外部的css和js文件
- script: 定义页面脚本
- base: 链接定位，少用
- title: 定义页面标题
- style: 定义css内部样式
- meta: 元信息标签，定义信息给搜索引擎看，告诉它该网页的作用，优化搜索结果，不显示(前期少用）
五：<body></body>标签内
标签对：
- 标题<h1>~<h6>：<h1>标题的重要性最高，<h6>标题最低,一个页面只能有一个<h1>，而<h2>~<h6>可以有多个,标题标签<h1>~<h6>是有顺序的
- 段落<p>：段落与段落之间会自动换行，并且段落与段落之间有一定的空隙
- 文本格式化：斜体<em>，粗体<strong>，上标sup，下标sub
- 长文本引用：<blockquote></blockquote>
- 短文本引用：<q></q>
- 地址信息：<address></address>
- 网页需要显示一行代码：<code></code>
- 网页显示多行代码：<pre></pre>
- 块元素：<div>行内元素：<span></span>
单标签：
- 水平线<hr/>
- 换行<br/>
<br/>换行和<p></p>换行的区别：
- <p></p> 是分段，会造成段与段之间有空隙
- <br/>是换行，不会有空隙
六：插入图像：<img>
1 <img src="" alt="" title="" /> 2 <!--src:文件地址,alt:图片的描述信息，给搜索引擎看,title:鼠标移动到图片上时显示的文字，给用户看-->
七：超链接：<a>
- 外部链接：
1 <a href="链接地址" target="窗口打开方式">使用超的链接文字</a> 2 <!--窗口打开的方式："_blank": 在新的空白窗口打开；"_self"：在当前窗口打开-->
- 内部链接：
1.自家网站的网页切换：使用路径定义 如：href="网页3.aspx "
2.锚点链接：（网页的上下内容切换）步骤：
01.div设置内容块的id
02.在href=" " 中加上#id
- 链接邮件：
使用方法：href=" mailto : 2763652785@qq.com?subject=邮件主题 & body= 邮件内容 "
注意：mailto后要再加参数，第一个须加上？，此后用&代替。
八：列表：
- 有序列表
01. <ol></ol>内定义，列表项是<li></li>
02. ol和li配合使用，不能独立！不能插入其他标签！
03. 样式用css控制！！！这里摒弃所有修饰性属性
1 <ol> 2 <li>有序列表项</li> 3 <li>有序列表项</li> 4 <li>有序列表项</li> 5 </ol>
- 无序列表
01. <ul></ui>内定义，列表项是<li></li>
02，03同上
1 <ul> 2 <li>无序列表项</li> 3 <li>无序列表项</li> 4 <li>无序列表项</li> 5 </ul>
- 自定义列表
01.<dl></dl>内定义
02.<dt></dt> ：要定义的名词
03.<dd></dd> ：具体解释（dt 和 dd 要交替使用！！！）
1 <dl> 2 <dt>定义名词</dt> 3 <dd>定义描述</dd> 4 …… 5 </dl>
案例效果图：
九：表格
- 基本结构：
1 <table> 2 <tr> 3 <td>单元格1</td> 4 <td>单元格2</td> 5 </tr> 6 <tr> 7 <td>单元格3</td> 8 <td>单元格4</td> 9 </tr> 10 </table>
效果：
- 合并：
1. rowspan=" "（合并“行”）：是td内属性，<td rowspan="跨度的行数">
例子（行）：
2. colspan=“ ”（合并“列”） ：是td内属性，<td colspan="跨度的列数">
例子（列）：
- 表格结构优化：
1 <table> 2 <caption>表格标题</caption> 3 <!--表头--> 4 <thead> 5 <tr> 6 <th>表头单元格1</th> 7 <th>表头单元格2</th> 8 </tr> 9 </thead> 10 <!--表身--> 11 <tbody> 12 <tr> 13 <td>标准单元格1</td> 14 <td>标准单元格2</td> 15 </tr> 16 <tr> 17 <td>标准单元格1</td> 18 <td>标准单元格2</td> 19 </tr> 20 </tbody> 21 <!--表脚--> 22 <tfoot> 23 <tr> 24 <td>标准单元格1</td> 25 <td>标准单元格2</td> 26 </tr> 27 </tfoot> 28 </table>
如图：把<table>的结构分割为四部分：caption、thead、tbody、tfoot
caption作为标题，thead表头、tbody表身、tfoot表脚
好处：虽然结构变得复杂了，但会让代码更具有逻辑性，后台更加条理清晰。
2018-04-10 22:11:09
上一篇： HTML学习笔记(二)
下一篇： html如何显示有换行的文本？