Web页面基础
文章目录
一、HTML（hyper text markup language）的介绍
HTML（超文本标记语言）是一种用于创建网页的标记语言。由一系列的标签组成。通过标签进行对也面内容以及排版进行调整的方式实现页面的创建。
HTML的基本结构：
1、标签：html中标签是用来定义网页上的各种元素，是基本的构建模块。如：段落、标题等等
2、元素：由开始标签html和结束标签/html和中间的内容组成。
3、属性：是用来对HTML元素进行提供的附加的信息。以及对内容进行样式的更改。
二、HTML的标签
一、基础标签
1、html是网页的根标签，中间包含所有的标签，其他内容都需要写在html内部。
2、head是头部标签，用来编写页面的修饰信息。
- meta：元信息
- charset=utf-8：表示编码方式
- title：表示网页的标题
3、body是网页主体标签，用来编写页面的内容，页面显示的内容都是在这个区域添加。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
二、其他标签
1、基本类：
1、标题标签：h1、h2、h3、h4、h5、h6 。共六级标签，
2、段落标签：p标签
3、换行标签 ：br标签
4、水平分割线标签：hr标签
5、盒子标签：div标签
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<hr>
<p>p是段落标签</p>
<br>
<p>br是换行标签</p>
</div>
</body>
</html>
2、文本类标签：
1、字体加粗：b标签
2、让字体倾斜：i标签
3、添加下划线：u标签
4、删除线：del标签
5、上标：sup标签
6、下标：sub标签
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<b>字体加粗</b><br />
<u>添加下划线</u><br />
<i>让字体倾斜</i><br />
<del>添加删除线</del><br />
<sup>添加上标</sup><br />
2<sup>5</sup>：表示2的五次方。<br />
<sub>添加下标</sub><br />
H<sub>2</sub>O:水的化学式。<br />
</div>
</body>
</html>
3、列表标签：
1、无序列表：ul
2、有序列表：ol
3、自定义列表：dl
4、列表项：li
5、自定义列表项：dt
6、自定义列表项说明：dd
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<hr />
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<hr />
<dl>
<dt>自定义列表1</dt>
<dt>自定义列表2</dt>
<dt>自定义列表3</dt>
</dl>
<dd>说明</dd>
</body>
</html>
4、表格标签：
1、表格外框：table
2、表头单元格：th
3、表格行标签：tr
4、表格单元格：td
<html>
<head>
<table border="">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>1班</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>3班</td>
</tr>
<tr>
<td>王五</td>
<td>52</td>
<td>3班</td>
</tr>
</table>
</body>
</html>
5、媒体标签：
1、图片标签：img
2、音频标签：audio
3、视频标签：video
4、超链接标签：a
<html>
<head>
<img src="img/03.png" alt="" width="100px" height="100px"/>
<hr>
<video src="" controls width="300px" height="300px"></video>
<hr />
<audio src="" controls></audio>
<hr />
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>
6、嵌入标签：
框架嵌入标签:frameset
在框架里面的 rows 表示的是横向划分，cols 表示竖向划分。
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<frameset rows="27%,73%">
<frame src="spring.png" name="1"></frame>
<frameset cols="20%,20%,20%">
<frame src="a.html" name="2"></frame>
<frame src="b.html" name="3"></frame>
<frame src="c.html" name="4"></frame>
</frameset>
</frameset>
</html>
7、表单标签：
表单域：form
1、input标签：插入类型（text文本框、passwd密码框、submit提交、reset重置、radio单选项、checkbox多选框等等）。
一般情况下配合label标签一起使用。
2、select标签：表示下拉选项。结合option
3、textarea标签：表示多行输入框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>请输入个人信息</h1>
<form action="" method="get">
<p>
<label for="username">用户名：</label>
<input id="username" name="username" type="text"/>
</p>
<p>
<label for="pwd">密 码：</label>
<input id="pwd" name="password" type="password"/>
</p>
<p>
<span>性 别:</span>
<label for="man">男</label>
<input checked id="man" name="sex" value="man" type="radio"/>
<label for="woman">女</label>
<input checked id="woman" name="sex" value="woman" type="radio"/>
</p>
<p>
<span>爱 好：</span>
<label for="zuqiu">足球</label>
<input id="zuqiu" name="super" value="zuqiu" id="zuqiu" type="checkbox"/>
<label for="lanqiu">蓝球</label>
<input id="lanqiu" name="super" value="lanqiu" id="zuqiu" type="checkbox"/>
<label for="paiqiu">排球</label>
<input id="paiqiu" name="super" value="paiqiu" id="zuqiu" type="checkbox"/>
</p>
<p>
<label for="address">住 址:</label>
<select name="address" id="address">
<option selected value="zhengzhou">郑州</option>
<option value="wuhan">武汉</option>
<option value="luoyang">洛阳</option>
</select>
</p>
<p>
<input type="submit"/>
<input type="reset"/>
</p>
</form>
</body>
</html>
三、HTML标准属性
标准属性即所有标签都可以使用的属性。
1、id 属性；单个html文件中id要唯一，不可重复。
2、class属性：一个标签可以有多个类名，一个类名可以被多个标签使用。
3、style样式：是键值对的格式。
以上就是HTML中常见的标签。
4565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
