一、新建文本文档，写下结构体：
<html>
<head></head>
<body></body>
</html>
在<body>和</body>之间写入想写的内容。将文件重命名为以.html为扩展名的文件。再打开即可。
二、修改写入的内容: 打开文件，打开方式为记事本，修改内容，保存即可（Ctrl+S）
三、<h1> h为标题标签，<h1>为一级标题
h1标签的作用是将标题字体变大加粗，h1的范围独占一整行，即被<h1></h1>包含的内容独占一整行。
<html>
<head></head>
<body>
<h1>h1标签是一级标题</h1>
<h2>h2标签是二级标题</h2>
<h3>h3标签是二级标题</h3>
<h4>h4标签是二级标题</h4>
<h5>h5标签是二级标题</h5>
<h6>h6标签是二级标题</h6>
</body>
</html>
四、换行：
<br>是换行标签，没有结束（没有</br>这种写法）
<html>
<head></head>
<body>
周一<br>
周二
</body>
</html>
效果：
周一
周二
五、段落
<p></p>
p标签是段落标签，也会自动换行，独占一整行，但是这个换行比<br>的行间距大。
六、斜体
<em>你好</em>
<em>冬奥会</em>
斜体字 你好 和 冬奥会 之间会有间隔
（em不具备自动换行的能力）
七、下划线
<u>你好</u>
也不具备换行的能力
八、文字加粗
<strong>你好</strong>
不具备自动换行的能力
练习：李清照简介
九、水平分割线
用于分类模块
<hr>
十、HTML5里面的特殊符号：
1、空格： 代表一个空格，两个就是两个空格 （&：shift+7）
2、版权符号：©
3、大于号：>
4、小于号：<
5、双引号："
（英文分好可以不加，但最好加上）
十一、插入图片
首先图片的位置应与.html在同一位置（同一路径）
<img src="图片名称，如1.jpg">
<img src="图片的名称，如1.jdp" width="200px" heigth="200px" title="Hello">
注意：在所有的计算机语言中，符号必须是英文符号。
每个属性之间必须有空格如：src与width，width与heigth之间需空格。 title：当鼠标悬浮在图片上方时显示出来的图片标题，双引号内容可以更改
练习2
十二、超链接
覆盖当前标签页：
<a href="https://www.baidu.com">百度</a>
不覆盖当前标签页：
建立新的标签页
<a href="https://www.baidu.com" target="blank">百度</a>
点击图片进入新的网页或其他
<a href="..."><img src="..."></a>
十三、邮箱链接
<a href="mailto:123456789@qq.com">联系我们</a>
十四、锚链节
回到底部（点击底部，回到底部”救命“）
<a href="#db">底部</a>
<a name="db">救命</a>（这个命令应该放在”底部",就是你想“救命”出现的位置）
name之后的“”内容不允许使用中文，只能使用英文
一、无序列表
无任何顺序或排序
<ul>
<li>内容一<li>
<li>内容二<li>
<li>内容三<li>
</ul>
每一个li独占一整行，li在ul里
1.
<html>
<head></head>
<body>
<ul>
<li>2019年</li>
<li>2022年</li>
</ul>
</body>
</html>
2.
<html>
<head></head>
<body>
<ul>
<li>2019年</li>
<ul><li>7月3日</li></ul>
<li>2022年</li>
<ul><li>7月4日</li></ul>
</ul>
</body>
</html>
3.
<html>
<head></head>
<body>
<ul>
<li>2019年</li>
<ul><li>7月3日</li></ul>
<li>2022年</li>
<ul><li>7月4日</li>
<ul><li>11点12分</li></ul>
</ul>
</ul>
</body>
</html>
二、有序列表
有顺序的排列
1.
<html>
<head></head>
<body>
<ol>
<li>2019年</li>
<li>2020年</li>
<li>2021年</li>
</ol>
</body>
</html>
改变数字类型 (默认就是数字)
<html>
<head></head>
<body>
<ol type="a"> (可以改为abc..,ABC..,i ii iii..., I II III..等)
<li>2019年</li>
<li>2020年</li>
<li>2021年</li>
</ol>
</body>
</html>
三、定义列表
<dl> -----声明一个定义列表
<dt>水果</dt> ------声明列表项
<dd>苹果</dd> ------定义列表内容
<dd>香蕉</dd>
<dd>橘子</dd>
<dt>动物</dt>
<dd>猴子</dd>
<dd>大象</dd>
<dd>猫头鹰</dd>
</dl>
四、表格
1.无边框
<table>
<tr> ----一行
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr></tr>
</table>
2.有边框
<table border="1"> 数字代表边框的粗细
<tr> ----一行
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr></tr>
</table>
五、合并行和列
上下合并是合并行
左右合并是合并列
rowspan="2" 数字表示加上本身合并两行，但是会挤出下行多余的内容
colspan="2" 两列 下列
1.
<table border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td></tr>
<tr>
<td>数学</td>
<td>91</td></tr>
</table>
六、在网页中放入音频和视频
1.
<video src="视频的路径"> （视频和.html文件应在同一位置）
</video>
2.
<video src="视频的路径" controls>
</video>
controls这个属性提供了播放 音量 全屏等功能
3.
<video src="视频的路径" controls loop>
</video>
loop这个属性提供了循环播放的功能
autoplay这个属性属于自动播放（在浏览器已被禁止）
4.音频
<audio src="音频的路径" controls> （音频和.html文件应在同一位置）
</audio>
七、内联框架
<iframe src="B.html" name="aaa"></iframe>
<a href="C.html" target="aaa">点击进入C</a>
iframe是内联框架，src是默认显示网页B，为当前的内联框架命名为aaa
点击文字（超链接）跳转到网页C，但是不经过覆盖当前网页或打开新的网页去跳转
而是通过一个叫做aaa的内联框架来打开网页C
03-06
9604
9604
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
