静态页面中绝大部分内容由4类属性的物质组成：文本、图像、视频音频等多媒体文件和超链接
首先从编辑文本的知识点学起
1.换行 <p>...</p> <br>...</br>
<p>...</p>内的文本是一个段落
<br>...</br>内的文本从<br>标签后另起一行
二者使用
3.文本段落对齐 使用<align>标签实现,通常把align放在<p>标签中使用
<p align=left>...</p> <!--左对齐-->
<p align=center>...</p> <!--居中-->
<p align=right>...</p> <!--右对齐-->
<p>标签在默认情况下相当于<p align=left>,即默认情况下文本是和窗口的左边对齐
当出现两个或两个以上同属性作用的标签对同一个对象作用时，那么这个对象就依照就近原则，离它最近的那个标签属性起作用
1.文本字体大小
<h?>...</h?> ?代表从1-6,字体一次从小到大
<strong>...</strong> 强调文本内容，通常是粗体
<em>...</em> 强调文本内容，通常是斜体
<b>...</b> 粗体字
<i>...</i> 斜体字
<u>...</u> 加下划线
<strike>...</strike> 加删除线
<big>...</big> 稍大字体
<small>...</small> 稍小字体
<var>...</var> 变数，通常是斜体字
<cite>...</cite> 引文，通常为斜体字
<dfn>...</dfn> 定义，通常为斜体字
<address>...</address> 地址，通常为斜体字
<tt>...</tt> 打字机等宽体字
<samp>...<samp> 样本
<code>...</code> 显示原始码使用
<kbd>...</kbd> 键盘输入
其中<strong>、<em>、<var>、<cite>、<dfn>、<address>、<code>、<kbd>、<samp>、
<tt>标签属于逻辑标签(在浏览器中不一定会准确显示),<i>、<b>、<u>标签属于实体标签(显示固定效果)
2.特殊符号(固定格式 '&...;')
注册商标 ®
版权商标 ©
常用特殊符号
引号 "
和号 &
英镑符号 £
竖直线 ¦
节号 §
度数符号 °
加减号 ±
上标2 ²
上标3 ³
乘号 ×
除号 ÷
AE组合 Æ
Ae组合 æ
二分之一 ½
四分之一 ¼
1.无序列表 <ul>...</ul>
在<ul>标签中还需要使用<li>标签来定义列表中的每一行，默认情况下，无序列表的条目符号是实心的黑色小圆圈
2.有序列表 <ol>...</ol>
有序列表中同样使用<li>标签来定义列表中的每一行
3.定义列表
使用<dl>标签来定义列表,使用<dt>来定义页面中的每一行，使用<dd>标签来定义缩进行
4.列表嵌套<将一个列表的标签完全放在另一个标签内，是一种父子级的关系>
教师、学生按无序列表个给出，其中教师有三位，按有序列表给出每个老师的姓名，学生有两位，按定义列表形式给出姓名年龄
首先从编辑文本的知识点学起
<html>
<head>
<!-- 标题 -->
<title>日常小练</title>
<!--新方法，定义修饰页面的样式表，避免了繁琐的重复编写-->
<style type="text/css">
.p1{
font-size:xx-large; //设置字体大小
font-style:italic; //设置字体样式
font-weight:bold; //设置字体样式
}
</style>
</head>
<body>
<p class="p1">我是一个粉刷匠</p>
<p class="p1">粉刷本领强，我能把那小房子刷的很漂亮</p>
<!--(旧方法)以下分别设置文本字体大小，斜体，加粗的效果，标签重复使用，工作效率低下-->
<!--<p><h1><strong><em>我是一个粉刷匠</em></strong></font></p>
<p><h1><strong><em>粉刷本领强，我能把那小房子刷的很漂亮</em></strong></font></p> -->
</body>
</html>1.换行 <p>...</p> <br>...</br>
<p>...</p>内的文本是一个段落
<br>...</br>内的文本从<br>标签后另起一行
二者使用
<html>
<head>
<title>使用文本换行</title>
</head>
<body>
我有一只小毛驴我从来也不骑，<p>有一天我心血来潮骑着它去赶集，我左手把这小皮鞭，真呀么真得意</p>...摔了我一身泥
<p>----------------</p>
我有一只小毛驴我从来也不骑，<br>有一天我心血来潮骑着它去赶集，我左手把这小皮鞭，真呀么真得意</br>...摔了我一身泥
</body>
</html>二者区别是:使用<p>标签使文本换行时行距是单倍行距，而使用<br>标签时文本换行是0倍行距,即使用<p>标签的文本与接下来的文本之间有一个空行，而使用<br>标签的文本与接下来的文本之间没有空行
<html>
<head>
<title>使用空格</title>
</head>
<body>
<p><font size="+2">空格 123 符号</font></p>
<p><font size="+2">空格 符号</font></p> <!--结果‘空格’与‘符号’之间有1个空格-->
<p><font size="+2">空格  符号</p> <!--结果‘空格’与‘符号’之间有3个空格-->
</body>
</html>
若不想使用 又想保留连续的空格符号，则可以使用等宽字体，标签写法为 <pre>...</pre>,其作用是使文本格式化为等宽字体，不仅能保留文本中的空格符，也能使文本分行被保留
<html>
<head>
<title>使用<pre>标签</title>
</head>
<body>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
</pre>
</body>
</html>3.文本段落对齐 使用<align>标签实现,通常把align放在<p>标签中使用
<p align=left>...</p> <!--左对齐-->
<p align=center>...</p> <!--居中-->
<p align=right>...</p> <!--右对齐-->
<p>标签在默认情况下相当于<p align=left>,即默认情况下文本是和窗口的左边对齐
<html>
<head>
<title>文本段落对齐</title>
</head>
<body>
<p>文本段落左对齐</p>
<p align=left>文本段落左对齐</p>
<p align=center>文本段落居中
<p align=right>文本段落右对齐
</body>
</html>当出现两个或两个以上同属性作用的标签对同一个对象作用时，那么这个对象就依照就近原则，离它最近的那个标签属性起作用
<html>
<head>
<title>文本段落对齐</title>
</head>
<body style="text-align:center">
<h3>人生三阶段</h3>
<p align=right>王国维 <!--此句运行格式正确，但不知道是否规范-->
<!--<p style="text-align:right">-->
<p>昨夜西风凋碧树，独上高楼，望尽天涯路
<p>衣带渐宽终不悔，为伊消得人憔悴
<p>众里寻他千百度，蓦然回首，那人却在灯火阑珊处
</body>
</html>1.文本字体大小
<h?>...</h?> ?代表从1-6,字体一次从小到大
<strong>...</strong> 强调文本内容，通常是粗体
<em>...</em> 强调文本内容，通常是斜体
<b>...</b> 粗体字
<i>...</i> 斜体字
<u>...</u> 加下划线
<strike>...</strike> 加删除线
<big>...</big> 稍大字体
<small>...</small> 稍小字体
<var>...</var> 变数，通常是斜体字
<cite>...</cite> 引文，通常为斜体字
<dfn>...</dfn> 定义，通常为斜体字
<address>...</address> 地址，通常为斜体字
<tt>...</tt> 打字机等宽体字
<samp>...<samp> 样本
<code>...</code> 显示原始码使用
<kbd>...</kbd> 键盘输入
其中<strong>、<em>、<var>、<cite>、<dfn>、<address>、<code>、<kbd>、<samp>、
<tt>标签属于逻辑标签(在浏览器中不一定会准确显示),<i>、<b>、<u>标签属于实体标签(显示固定效果)
2.特殊符号(固定格式 '&...;')
注册商标 ®
版权商标 ©
<html>
<head>
<title>特殊符号</title>
</head>
<body style="text-align:center">
<p>注册商标®
<p>版权©
</body>
</html>
常用特殊符号
引号 "
和号 &
英镑符号 £
竖直线 ¦
节号 §
度数符号 °
加减号 ±
上标2 ²
上标3 ³
乘号 ×
除号 ÷
AE组合 Æ
Ae组合 æ
二分之一 ½
四分之一 ¼
居中的点 ·
3.文本加标注 <acronym title="...">...</acronym> (仍然没有搞清楚这个标签...)HTML5 不支持 <acronym> 标签。使用 <abbr> 标签代替它。
三、文本列表1.无序列表 <ul>...</ul>
在<ul>标签中还需要使用<li>标签来定义列表中的每一行，默认情况下，无序列表的条目符号是实心的黑色小圆圈
<ul>
<li>...</li>
...
<li>...</li>
</ul> <html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<!--注意此处使用<p>标签仅为了使两行之间有空行-->
<li>姓名____________</li>
<p><li>班级_________</li>
<p><li>学号_________</li>
</ul>
</body>
</html>2.有序列表 <ol>...</ol>
有序列表中同样使用<li>标签来定义列表中的每一行
<ol>
<li>...</li>
...
<li>...</li>
</ol><html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<!--注意此处使用<p>标签仅为了使两行之间有空行-->
<li>姓名____________</li>
<p><li>班级_________</li>
<p><li>学号_________</li>
</ol>
</body>
</html>3.定义列表
使用<dl>标签来定义列表,使用<dt>来定义页面中的每一行，使用<dd>标签来定义缩进行
<dl>
<dt>...</dt>
<dd>...</dd>
...
<dt>...</dt>
<dd>...</dd>
</dl><html>
<head>
<title>定义列表</title>
</head>
<body>
<p><h2><strong>学生信息</strong></h2></p>
<dl>
<dt>姓名</dt>
<dd>张三</dd>
<dt>年龄</dt>
<dd>18</dd>
<dt>学号</dt>
<dd>2016203491</dd>
</dl>
</body>
</html>4.列表嵌套<将一个列表的标签完全放在另一个标签内，是一种父子级的关系>
教师、学生按无序列表个给出，其中教师有三位，按有序列表给出每个老师的姓名，学生有两位，按定义列表形式给出姓名年龄
<html>
<head>
<title>列表嵌套</title>
</head>
<body>
<ul>
<li><strong><h3>教师
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
</h3></strong></li>
<li><strong><h3>学生
<ol>
<li>
<dl>
<dt>姓名</dt>
<dd>王中王</dd>
<dt>年龄</dt>
<dd>21</dd>
</dl>
</li>
<li>
<dl>
<dt>姓名</dt>
<dd>子涵</dd>
<dt>年龄</dt>
<dd>18</dd>
</dl>
</li>
</ol>
</h3></strong></li>
</ul>
</body>
</html>
实例二 制作会议通知
<html>
<head>
<title>制作会议通知</title>
</head>
<body>
<h2 align="center"><strong>关于青大放假的通知</strong></h2> <!--设置字体，版式-->
<p>很高兴又一次迎来了美好的假期,哈哈哈哈</p> <!--段落（换行）-->
<br>现将有关事宜 通知如下</br> <!--换行-->
<ul>
<li>
<dl>
<dt>放假时间</dt>
<dd>无限期（hiahia）</dd>
<dt>原因</dt>
<dd>无</dd>
</dl>
</li>
<li>注意事项
<ol>
<li>好好学习</li>
<li>天天向上</li>
</ol>
</li>
</ul>
<pre><h2><strong>
祝大家假期愉快
好好玩耍！！！哈哈哈哈
</strong></h2></pre>
</body>
</html>
3831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
