1.基本标签的使用形式
<!--加粗文本-->
<b>字体变粗b</b>
<!--强调内容-->
<strong>字体加粗strong</strong>
<i>文字变斜体i</i>
<em>文字变斜体em</em>
<u>文字加下划线</u>
<del>删除线</del>
<br />换行
<p>段落</p>
<pre>用原来
样式
输出内容</pre>
<span>标准行内标签，一般用来修饰文本</span>
<div>标准块标签，一般用来布局页面</div>
<h1>哈哈</h1>
<h2>哈哈</h2>
<h3>哈哈</h3>
<h4>哈哈</h4>
<h5>哈哈</h5>
<h6>哈哈</h6>
这些基本标签的代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--加粗文本-->
<b>字体变粗b</b>
<!--强调内容-->
<strong>字体加粗strong</strong>
<i>文字变斜体i</i>
<em>文字变斜体em</em>
<u>文字加下划线</u>
<del>删除线</del>
<br />换行
<p>段落</p>
<pre>用原来
样式
输出内容</pre>
<span>标准行内标签，一般用来修饰文本</span>
<div>标准块标签，一般用来布局页面</div>
<h1>哈哈</h1>
<h2>哈哈</h2>
<h3>哈哈</h3>
<h4>哈哈</h4>
<h5>哈哈</h5>
<h6>哈哈</h6>
</body>
</html>
其运行结果为：
2.行内标签与块标签
2.1.行内标签
行内标签：指的是如a、span、b、strong、em、i、u、del
这些标签的内容如果可以在一行中展示，则不会换行，直到占满一行后才会换行输出
2.2.块标签
块标签：指的是div、p、hr、br、hn
这些标签，即使内容不够一行，也会换行输出
3.HTML5 新增
其代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>定义页面的顶部（页眉）内容</header>
<section>中间部分</section>
<footer>尾部部分</footer>
<article>主要是用来表示文章内容的</article>
<nav>导航条</nav>
<aside>侧边栏</aside>
<address>用来在文档中呈现联系信息，包括文档作者或文档维护者的名字，他们的网站链接、电子邮件、真实地址、电话号码等</address>
<mark>标注或者高亮一些我们需要的关键字词</mark>
<progress>表示当前完成进度情况</progress>
<cite>表示作品或文章中的标题</cite>
<small>html5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注的版权信息，网站备案等</small>
<canvas>画布标签，用来在页面上画图案</canvas>
</body>
</html>
其运行结果为：
4.特殊字符
| 特殊字符 | 转义码 |
| 空格 | |
| < | < |
| > | > |
| ¥ | ¥ |
| " | " |
| © | © |
| ® | ® |
| ± | ± |
| ‰ | ‰ |
| ÷ | ÷ |
5.常见的图片格式
<img src = "01.jpg"/>
<--
img 标签用来引入图片到页面中
src是一个必须的属性，该属性表示图片的地址
-->
5.1.img标签的常见属性
| 属性名称 | 属性值 | 功能 |
| width | 数字（像素）px | 图片的宽 |
| height | 数字（像素）px | 图片的高 |
| border | 数字（像素）px | 图片的边框 |
| align | left（左）、center（中）、right（右） | 图片的水平对齐方式 |
| vspace | 数字（像素）px | 图片与文字的水平距 |
| hspace | 数组（像素）px | 图片与文字的垂直距离 |
| alt | 字符串 | 图片的替换文本 |
alt：当浏览器不能显示所指定的图片，这时可以设置一段文字来说明此图。
6.视频音频标签
<video>视频标签</video>
<audio>音频标签</audio>
controls 表示播放器的组件
autoplay 表示自动播放
注：video、audio标签均需要书写src属性，表示视频或者音频的位置。
7.表格标签
<table>
<!--表格头部-->
<thead>
<!--行-->
<tr>
<!--列-->
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
</thead>
<!--表格中间-->
<tbody>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</tbody>
<!--表格尾部-->
<tfoot>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</tfoot>
</table>| 属性名 | 属性值 | 功能 |
| width | 数字（像素）px | 单元格宽度 |
| height | 数字（像素）px | 单光格高度 |
| align | left（左）、center（中）、right（右） | 单元格水平对齐方式 |
| valign | top（上）、middle（中）、right（下） | 单元格竖直对齐方式 |
| bgcolor | 颜色 | 单元格的背景颜色 |
| background | 图片 | 单元格的背景图片 |
| rowspan | 数字 | 垂直方向跨行 |
| colsoan | 数字 | 水平方向跨列 |
7.1.cellpadding与cellspacing的区别
cellpadding 表示表格的边距
cellspacing 表示表格的间隔
7.2单元格跨行rowspan
其代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px">
<tr >
<td rowspan="2">haha</td>
<td>haha2</td>
<td>haha3</td>
<td>haha4</td>
</tr>
<tr>
<td>haha2</td>
<td>haha3</td>
<td>haha4</td>
</tr>
<tr>
<td>haha</td>
<td>haha2</td>
<td>haha3</td>
<td>haha4</td>
</tr>
</table>
</body>
</html>
其运行结果为：
7.3单元格跨列colspan
其代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="2">haha</td>
<td colspan="2">haha2</td>
</tr>
<tr>
<td>haha1</td>
<td>haha2</td>
<td>haha3</td>
<td>haha4</td>
</tr>
<tr>
<td>haha</td>
<td>haha2</td>
<td>haha3</td>
<td>haha4</td>
</tr>
</table>
</body>
</html>
其运行结果为：
8.超链接与锚链接
html文件最重要的应用之一就是超链接，通过网上提供的超链接功能，用户可以链接到网上的其他网页。如果没有超链接，就只能在浏览器地址栏中输入各个网页的地址，这是一件非常麻烦的事情。
8.1超链接
<a href = "0..html" target = "_blank">超链接 </a>
- href :用来明确链接的目标文件
- target属性：用来明确目标文件的打开方式
- target = "-blank":表示在新窗口打开目标文件，省略在原窗口打开目标文件
- target属性默认值为self：表示当前选项卡打开页面
其代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="index.html" target="_self">超链接</a>
</body>
</html>
我们可以看到链接到之前的代码“index.html”(也就是1.基本标签的使用形式）
8.2锚链接
在制作网页时可能会遇到网页内容过长的情况，这样用户浏览起来就不太方便。要解决这个问题可以在网页上部创建一个导航，利用导航直接链接到下面定义好的锚点
和淘宝这些网络的楼层效果类似，就是让页面定位到需要的地方，注意在链接的href属性上加"#id",之后在需要停止的位置的标签上设置对应的id即可。
当点击ul标签后的超链接，系统就会自动跳转至相应的页面。
9.列表标签（有序、无序、数据列表）
9.1右序列表-ol
<ol type = "1" start = "1" resvered>
<li></li>
<li></li>
</ol>
| 种类 | 表现形式 |
| type="1" | 用数字表示条目 |
| type="a | 用字母表示条目 |
| type="I" | 用罗马数字表示条目 |
其代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol type="a" start="a" reversed>
<li>haha1</li>
<li>haha2</li>
<li>haha3</li>
</ol>
</body>
</html>
type="a" 表示他的类型是a
start = "a" 表示他是从a开始的
reverser 表示他的顺序为原本顺序的逆序
其运行结果为：
9.2无序列表-ul
<ul type = "circle">
<li></li>
<li></li>
</ul>
| 种类 | 表现形式 |
| type="circle" | 用圆形表示条目 |
| type="disc" | 用实心圆表示条目 |
| type="square" | 用方形表示条目 |
9.3数据列表-dl
数据列表主要用来描述存在标题的列表组
<dl>
<dt>这个是标题</dt>
<dd>这个是内容</dd>
<dd>这个是内容</dd>
</dl>
其代码表示为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>这个是标题</dt>
<dd>这个是内容</dd>
<dd>这个是内容</dd>
</dl>
</body>
</html>
其运行结果为：
10.表单标签form
表单是用form标签来定义的
<form name = "表单名称" method = "表单提交方式" action = "表单处理的文件"></form>
- method:方法有get（可看见的）、post（加密的）这两种提交方式
| 属性名称 | 属性值 | 属性作用 |
| action | 要处理文件的路径 | 表单提交后，处理表单的文件 |
| method | 请求方式 | method属性用来明确表单的提交方式 |
| name | 字符串 | 表单的名称 |
10.1.input标签
<input type = "元素名称" name = "元素名称" value="元素值" id="客户端唯一标识">
| 类型 | 作用 |
| type="text" | 单行文本框 |
| type="password" | 密码框 |
| type="radio" | 单选按钮 |
| type="checkbox" | 多选按钮 |
| type="submit" | 提交按钮 |
| type = "reset" | 复位按钮 |
| type = "button" | 按钮 |
| type = "image" | 图像按钮 |
| type="hidden" | 隐藏域 |
| type = "file" | 文件域 |
| 属性名称 | 属性值 | 功能 |
| name | 字符串 | 元素的名称 |
| value | 字符串 | 元素的值 |
| id | 字符串 | 客户端唯一标识 |
| size | 数字 | 以字符个数设定的元素宽度 |
| maxlength | 数字 | 元素接受字符数的上限 |
| checked | 元素是否被选中 |
10.2.select标签
select元素主要是表单的下拉选择框
<select name = "元素名称" multiple="multiple">
<option value = "值" selected>选项1</option>
<option value = "值" selected>选项2</option>
<option value = "值" selected>选项3</option>
<option value = "值" selected>选项4</option>
</select>
| 属性名称 | 属性值 | 属性作用 |
| option | 子项 | 下拉框中的选项 |
| value | 字符串 | 选项的值 |
| name | 字符串 | 下拉框的名称 |
| selected | 默认被选中的选项 | |
| multiple | "multiple" | 以列表形式显示 |
注意：
当select标签设置multiple属性时，select以列表形式显示，当select标签不设置multiple属性时，以下拉框形式显示。列表框在选择时按住键盘的ctrl或shift建可以实现多选，而下拉框只能单选。
10.3.textarea标签
textarea也是表单标签的三大核心元素之一。
<textarea name="元素名称" clos="文本框宽度" rows="文本框高度">
内容
</textarea>
| 属性名称 | 属性值 | 属性作用 |
| cols | 数字 | 以字符个数设定的多行文本框的宽度 |
| rows | 数字 | 以行数设定的多行文本框的高度 |
| name | 字符串 | 多行文本框的名称 |
11.综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<h1>用户注册</h1>
<!--form是所有表单标签的提交标签
action属性：表示提交的地址url
method:表示提交的请求方式
enctype:如果没有文件上传，则使用
-->
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
<label for="username">用户名称:</label>
<input type="text" id = "username" name="username" placeholder="请输入用户名称" readonly/>
<br />
用户密码:<input type="password" />
<br />
用户性别：<input type="radio" value="男" name="user" checked/>男
<input type="radio" value="女" name="user"/>女
<br />
用户爱好：
<input type = "checkbox" value="篮球" name="hobby" />篮球
<input type = "checkbox" value="LOL" name="hobby" checked />LOL
<input type = "checkbox" value="王者" name="hobby" />王者
<input type = "checkbox" value="唱歌" name="hobby" />唱歌
<br />
用户头像：
<input type = "file" name="haha" />
<!--
div>p*10?ul>li-10>{haha}------快速生成代码
-->
<br />
用户博客地址：
<input type="url" name="url" id="url"/>
<br />
<input type = "submit" value="用户注册" />
<br />
<button>提交数据</button>
<br />
<!--button 不做任何修饰-->
<input type="button" value="提交数据"/>
<br />
用户邮箱：
<input type = "email" name="" />
<p>
用户地址：
<select name="address" id="address">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="西安" selected>西安</option>
</select>
</p>
<p>
用户意见：<br />
<textarea name="" rows="30" cols="50"></textarea>
</p>
</form>
</body>
</html>
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
