首先介绍一个概念:HTML语义化
HTML语义化指的就是根据网页中内容的结构,选择合适的HTML标签进行编写,使得页面结构更加清晰。
1.标题标签 <h1>~~~<h6>
'h'即为"head" ,意为“头部、标题”。h标签有自己的样式,即加粗和字号更大。h1~h6这六个标签根据标题的重要性大小是逐次递减的,且一个h标签独占一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
----pink老师
</body>
</html>
以下为这段代码的页面效果:
2. p标签 - 段落标签
<body>
<p>我是段落</p>
<p>我是段落我是段落</p>
</body>
3.<br/> 换行标签 (单标签)
4.<strong> </strong> 加粗显示
5.<i> </i> 斜体
6.<img> 插入图片
img标签有以下属性:
(1)src属性指定图片存储的路径
这里的存储路径分为绝对路径和相对路径,关于二者的区别给大家分享一篇超详细的文章
链接在这里:相对路径和绝对路径的区别(详解)_学英语的程序员-CSDN博客_arcgis相对路径和绝对路径
(2)width属性指定我们图片的宽度,高度会等比例缩放! 不要手动设置高度
(3)title属性用来设置鼠标悬停时的提示信息
(4)alt属性用来设置当我们图片加载失败的时候,显示的信息。
<body>
<img src="images/paopao.png" width="200px" />
<img src="images/paopao.png" title="泡泡" alt="加载失败" />
</body>
7. a标签 超链接
a标签有自带的样式,默认为蓝色 有下划线 可以自己看一下~
特点:在原本页面上刷新,不保留原有页面
<body>
<a href="www.baidu.com">百度</a>
</body>
如果需要在点击时打开新窗口,保留原来的页面,我们需要添加一个属性 target="_blank
<body>
<a href="" target="_blank"> </a>
</body>
8.无序列表/有序列表
无序列表<ul> //无序列表默认前面有小圆点
有序列表<ol> //有序列表默认前面有序号
<ul> 和 <ol>必须配合<li>使用,不可以单独使用。如果要去掉列表自带的样式(小圆点、序号等),可以设置display:none)
//无序列表
<ul>
<li> 序列1 </li>
<li> 序列2 </li>
<li> 序列3 </li>
</ul>
//有序列表
<ol>
<li> 序列1 </li>
<li> 序列2 </li>
<li> 序列3 </li>
</ol>
9.表单标签 form
<form action=" " ></form>
action中的内容是用户填写完表单之后提交上传的地址
10.input输入框
<input type="text"> //普通文本框
<input type="password"> //密码框(输入框加密)
<input type="radio"> //单选框
<input type="checkfox"> //复选框
<input type="file"> //上传文件
<input type="submit"> //代表提交按钮,会用在form表单内部
input输入框可以通过name属性区分不同的字段
如果两个或多个文本框属于同一个填写项,设置name属性的值相同
11.label 标签
首先有一个input标签,再有一个label标签,然后给输入框添加一个id属性(当前页面下,id是唯一的),给label添加一个for属性,值为id的值,这样就可以将文本与文本输入框连接起来。
(这样设置完以后,点击文本也可以选中选项)
12.button按钮
<button>普通按钮,页面中任何地方都可以用到</button>
13.<textarea> </textarea> 文本域(多行文本框)
cols 属性:列 rows属性:行
14.下拉列表 //select 和 option 配套使用
<select>
<option value="1">选项1</option>
<option value="2">选项2</option> //value 存储时用的数据
</select>
15.表格标签
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td> //tr标签表示行,td标签表示列(行中的单元格)
<td>4</td>
</tr>
</table>
16.还有两个用于布局的标签 span 和 div