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中常见的标签。