.字体标签和格式化
1.1<h1></h1>
h1~h6
Header1~Header6
作用:
- 用于给文本添加标题语义
- 格式:
- h1xxxxh1
- 注意点:
- H 标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
- H 标签一共有 6 个, 从 H1~H6, 最多就只能到 6, 超过 6 则无效
- 被 H 系列标签包裹的内容会独占一行
- 在 H 系列的标签中, H1 最大, H6 最小
1.2</hr>
Horizontal Rule
作用:
- 在浏览器上显示一条分割线
- 格式:
<hr width=” %|px”/>- 注意点:
- 在浏览器中会单独占一行
1.3<p></p>
Paragraph
作用:
- 告诉浏览器哪些文字是一个段落
- 格式:
<p align=”center|right|left…”>xxxxxxxx</p>- 段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
align:段落内容的对齐方式
默认是 left， 内容居左
right 右
center 居中
1.4<font>
字体标签，用于展示效果中修饰文字样式
文字
size:控制字体大小.最小 1 ~ 最大 7。 如果设置范围不在 1~7 之间，设置无效
color：控制字体颜色. 使用英文设置（例如：red,blue…）
face：控制字体类型。只能设置系统字库中存在的字体类型
1.5<br/>
Break
作用:让内容换行
格式:<br/>
HTML 源码中换行，浏览器解析时会自动忽略。
换行标签，用于展示效果中换行
1.6
HTML 源码中的多个空格，显示效果最终会合并成一个。
空格符号，用于展示效果中显示一个空白的位置
1.7HTML 注释
<!--<!--被注释的内容-->-->
快捷键: ctrl + /
用于注释 HTML 源码，不在 HTML 效果中展示。
只能在源码中看到，页面展示效果中是没有
格式：<!--HTML 注释内容 -->
图片标签
2.1<img/>
用于在页面效果中展示一张图片。
src：指明图片的路径。（必有属性）
width：图片宽度
height：图片的高度
宽度和高度的设置：
默认单位是 px，像素。例如：width=”400” 其实设置的是 width=”400px”。
固定设置方式
百分比设置。例如：width=”50%”。 是父标签的百分比。 动态改变的
2.2链接标签
<a></a>
超链接标签，用于在效果中定义一个可以点击跳转的链接
href：超链接跳转的路径 (必有属性)
内网本机路径：相对路径和绝对路径
互联网路径：http://地址
本页：默认跳转到本页
超链接正常工作：①a 标签中必须有内容
②a 标签必须有 href 属性
a 标签其它用法
1)假链接(本质是跳转到当前页面)
格式<a href="#">博客</a>
格式<a href="javascript:">博客</a>
2)跳转到当前页面指定位置(锚点链接)
格式<a href="#location">跳转到指定位置
在页面的指定位置给任意标签添加一个 id 属性
例如 <p id="location">这个是目标
3)跳转到指定页面的指定位置
格式:
<a href="5_超链接标签.html#location">跳转到指定位置</a>
只需要在 5_超链接标签.html 页面添加一个 id 位置即可
列表标签
3.1<ul></ul>
无序列表(unordered list)
作用:
给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
格式:
li 英文是 list item, 翻译为列表项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 列表&表格&表单</title>
</head>
<body>
<h4>选择居住城市(CN)</h4>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
ul 是一个组标签, 一定是一堆一堆的出现在，也就是说li标签不能单独存在，必须包裹在
ul 里面
4.由于 ul 和 li 是一个整体, 所以 ul 里面不推荐包裹其它标签, 永远记住 ul 里面最好只写
li 标签
5.虽然 ul 中推荐只能写 li 标签, 但是 li 标签是一个容器标签, li 标签中可以添加任意标
签, 甚至可以添加 ul 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 列表&表格&表单</title>
理工移动通信学院
</head>
<body>
<ul>
<li>
电子数码类
<ul>
<li>电脑</li>
<li>手机</li>
</ul>
</li>
<li>
鞋帽服装类
<ul>
<li>女装</li>
<li>男装</li>
</ul>
</li>
</ul>
</body>
</html>
3.2`
有序列表(ordered list)
作用:
给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
格式:
<h4>中国房价排行</h4>
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>`
3.3<dl></dl>
定义列表(definition list)
作用:
给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应
的描述
格式:
dt 英文 definition title, 翻译为定义标题
dd 英文 definition description, 翻译为定义描述信息
<dl>
<dt>北京</dt>
<dd>国家的首都, 看升国旗的地方</dd>
<dt>上海</dt>
<dd>浦东, 遍地是黄金的地方</dd>
</dl>
4.表格标签
table：定义表格
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为 0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分
4.1<table></table>
表格标签，用于在效果中定义一个表格
border：设置表格的边框粗细
width：设置表格的宽度
4.2`
表格的行标签，用于在效果中定义一个表格行
4.3<td></td>
表格的单元格标签，用于在效果中定义一个表格行中的单元格
表格的书写顺序：
步骤 1：定义一个表格
步骤 2：定义表格中的一行
步骤 3：在表格一行中定义单元格 内容就可以写在单元格中
4.4<th></th>
表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
<th>和<td>唯一区别：<th>内容 居中加粗
示例：
4.5单元格合并
<td>或者<th>都有两个单元格合并属性：
colspan：跨列合并单元格
rowspan：跨行合并单元格
合并步骤：
① 确定合并哪几个单元格，确定是跨列合并还是跨行合并
② 在第一个出现的单元格上书写 合并单元格属性
③ 合并几个单元格，属性值就书写几
④ 被合并的单元格必须删掉
5.块标签
5.1<span></span>
行级的块标签，用于在效果中 一行上定义一个块，进行内容显示。
① span 有多少内容，就会占用多大空间。
② span 不会自动换行
5.2<div></div>
块级的块标签，用于在效果中 定义一块，默认占满一行，进行内容的显示
① 默认占满一行
② 会自动换行
适用于大量数据展示
5.3div和span的应用场景
span 是内联元素，用在一小块的内联 HTML 中
div 是块级元素，用来组合大块的代码，为 HTML 文档内大块的内容提供结构和背景的元素，
可以包含段落、标题、表格等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无意义的标签</title>
<style>
/*单独设置内联元素、块级元素的样式*/
span{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<span>姓名：</span>张三<br/>
<span>性别：</span>男<br/>
<div>块级元素，会换行</div>
<div>块级元素，会换行</div>
</body>
</html>
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进
行排版，就需要使用浮动属性
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
