1.标题和段落标签
标题标签,只有h1 ~h6 这6个标题标签,字体大小依次减小。
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
段落标签:p标签
<p>
段落内容
</p>
2.图片标签
支持图片格式:gif、jpg、jpeg、png、bmp、webp。
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
属性:
src
:图片的资源地址,支持本地图片、网络图片;
alt
:图片说明,当图片加载失败时会显示该内容
title
:用于鼠标放到图片上时显示文字;
3.超链接
页面跳转
标签:<a>
<!-- 超链接 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">新标签打开百度</a>
<a href="http://www.baidu.com" target="_parent">parent方式打开百度</a>
<a href="http://www.baidu.com" target="_top">top方式打开百度</a>
属性:
href
:超链接跳转地址,可以是本地路径/相对路径、url地址,若是url地址时务必添加http
或https
,否则无法正常跳转页面;
target
:定义超链接页面的打开方式,有以下几个值:
- _self:内容在当前页面显示
- _blank:内容在新的页面显示;
- _parent:在父窗体中打开链接,在窗口与顶级框架中,等同于_self
- _top:在当前窗体打开链接,并替换当前的整个窗体(框架页),清除所有包含的框架
锚点跳转
即页面内部位置跳转,通过给超链接的href
属性设置以#{id值}
的方式实现页面内部锚点跳转。
示例如下:
<p id="p0">
<a href="#p1">锚点跳转1</a>
<a href="#p2">锚点跳转2</a>
</p>
<p>
...
<p id="p1">
...
</p>
<p id="p2">
...
</p>
</p>
<p>
<a href="#p0">回到顶部</a>
</p>
上述代码定义了几个p标签,给其设置了id值,然后给超链接a标签的属性href设置跳转锚点。
4.文本修饰标签
标签 | 标签功能说明 |
---|---|
<b > |
bold的缩写,文字加粗 |
<strong > |
文字加粗,阅读时会被加重读音,推荐使用 |
<i > |
italic的缩写,字体倾斜 |
<em > |
字体倾斜,有加强语气 |
<u > |
underline的缩写,文字下划线 |
<s> |
strike的缩写,文字带删除线 |
<del> |
delete的缩写,文字带删除线 |
<sup > |
文字上标签,如:22 |
<sub > |
文字下标签,如:O2 |
示例如下:
<p><b>b标签 文字加粗</b></p>
<p><strong>strong标签 文字加粗,阅读时会被加重读音</strong></p>
<p><i>我会倾斜</i></p>
<p><em>我会倾斜,有强调作用</em></p>
<p><u>我是下划线标签</u></p>
<p><s>删除线标签</s></p>
<p><del>del删除线标签</del></p>
<p>π * 3<sup>2</sup></p>
<p>CO<sub>2</sub></p>
5.列表标签
HTML中列表分为:有序列表、无序列表、自定义列表。
类型 | 标签 | 说明 |
---|---|---|
有序列表 | <ol >、<li > |
有顺序 |
无序列表 | <ul >、<li > |
无序 |
自定义列表 | <dl >、<dt >、<dd > |
—— |
有序列表:
语法:<ol><li></li></ol>
,
规定ol标签中不能有其它内容,若想添加其它内容,必须放在li标签中。
列表的序号默认为阿拉伯数字,从1开始。
可以通过ol标签的type属性
进行设置序号的类型。
- 1,阿拉伯数字顺序
- A,大写字母顺序
- a,小写字母顺序
- I,大写罗马数字顺序,I、II、III、IV、V、VI、VII、VIII、IX、X ······
- i,小写罗马数字顺序,i ii iii iv v vi vii viii ······
可以通过ol标签的start属性
进行设置列表的起始序号,数值形式。
如下示例:
<ol type="i" start="2">
<li>小米</li>
<li>华为</li>
<li>OPPO</li>
</ol>
无序列表:
<p>无序列表</p>
<ul type="disc">
<li>小米</li>
<li>华为</li>
<li>OPPO</li>
</ul>
type属性有以下几个值:
- disc:实心圆
- circle:空心圆
- none:无样式
- square:方块
自定义列表:<dl>
、<dt>
、<dd>
dl:definition list的缩写,定义列表;
dt:definition term的缩写,可以理解为标题,定义术语;
dd:definition description的缩写,定义描述
如下示例:
<p>自定义列表</p>
<dl>
<dt>自定义列表的标题</dt>
<dd>小米</dd>
<dd>华为</dd>
<dd>OPPO</dd>
</dl>
6.table标签
涉及标签
标签 | 描述 |
---|---|
<table > |
表格 |
<caption> |
表格头部,标题 |
<tr > |
行 |
<td > |
单元格 |
<th > |
单元格,文字加粗 |
<thead > |
表格头,内包含 |
<tbody > |
表格正文内容,内包含 |
<tfoot > |
表格尾,内包含 |
<colgroup > |
列分组 |
table
属性
- border:表格边框粗细;
- cellspacing:单元格的间距;
- cellpadding:单元格的内边距;
- width:表格宽度
- height:表格高度
- align:表格在父布局中居中
- bgcolor:表格背景色
- bordercolor:表格边框颜色
td
属性
- rowspan:单元格跨行的数量
- colspan:单元格跨列的数量
- bgcolor:单元格背景色
- align:单元格文字居中
示例:
<table border="1" align="center" width="600" cellspacing="0" cellpadding="0" bordercolor="#fff" bgcolor="#d8eaef" >
<caption>阿里职级与薪资</caption>
<colgroup span="1" bgcolor="#92c5d5"></colgroup>
<thead bgcolor="#66a9be">
<tr >
<th rowspan="2">序号</th>
<th colspan="6">技术岗与管理岗的职级薪资</th>
</tr>
<tr>
<th>P序列</th>
<th>P级名称</th>
<th>M序列</th>
<th>M级名称</th>
<th>薪资</th>
<th>股票</th>
</tr>
</thead>
<tbody align="center">
<tr>
<th>1</th>
<td>P6</td>
<td>资深工程师</td>
<td>M1</td>
<td>主管</td>
<td>20W-35W</td>
<td>几乎不授予</td>
</tr>
<tr>
<th>2</th>
<td>P7</td>
<td>技术专家</td>
<td>M2</td>
<td>经理</td>
<td>30W-50W</td>
<td>2400股</td>
</tr>
<tr>
<th>3</th>
<td>P8</td>
<td>高级专家</td>
<td>M3</td>
<td>高级经理</td>
<td>45W-80W</td>
<td>6400股</td>
</tr>
<tr>
<th>4</th>
<td>P9</td>
<td>资深专家</td>
<td>M4</td>
<td>总监</td>
<td>80W-100W</td>
<td>16000股</td>
</tr>
<tr>
<th bgcolor="#92c5d5">5</th>
<td>P10</td>
<td>研究员</td>
<td>M5</td>
<td>高级总监</td>
<td>150W+</td>
<td>20000股</td>
</tr>
</tbody>
<tfoot>
<tr>
<th bgcolor="#acc47a">说明</th>
<td colspan="6" bgcolor="#d8e1c6">P-Profession M-Manager,马云在阿里的级别是M10</td>
</tr>
</tfoot>
</table>
7.块级元素和内联元素
块级元素:独占一行,block块元素
常见块级元素:
- 标题元素:
h1
~h6
- 段落元素:
p
- 列表元素:
ol
、ul
、li
、dl
、dt
、dd
- 表格元素:
table
、tr
、td
、th
、thead
、tbody
、tfoot
、caption
- 分块元素:
div
inline内联元素:不会独占一行,只占用必要的宽度。
常见内联元素:
- 文本修饰元素:
b
、strong
、i
、em
、sub
、sup
、u
、del
、s
- 链接元素:
a
- 换行元素:
br
- 图片元素:
img
- 范围元素:
span
**注意:内联元素不能嵌套块级元素
8.表单
标签:<form>
form属性
- action,用来指定处理提交表单格式,通常是一个url地址或一个电子邮件地址
- method,默认为get,值为post/get,数据提交方式
- name,对表单进行标记
- enctype,数据提交给服务器时的形式,默认:application/x-www-form-
urlencoded - target,指定提交后文档显示位置,值:
_blank
、_self
、_parent
、_top
- accept-charset=“gbk”,设置编码格式,针对非IE浏览器
- _charset=“gbk”,设置编码格式,针对IE浏览器
表单标签需要放在<form>
标签内使用,常用标签如下
标签 | 描述 | 属性 |
---|---|---|
<input > |
单行文本框 | type(值参考后内容)、name、id、readonly(只读)、disable禁用 |
<textarea > |
多行文本输入框 | name、id、cols(列数)、rows(行数) |
<input type="radio" > |
单选框 | name(控制分组)、id、checked(选中) |
<input type="checkbox" > |
复选框 | |
<input type="file" > |
文件选择控件 | |
<select > |
下拉菜单 | 包裹标签实现、 multiple(选择多行)、size(展示的行数) |
<label > |
标签 | for |
<fieldset > |
表单控件分组 | 标题 |
<button > |
双标签按钮 |
type属性
,可以分为文本输入框、密码输入框、按钮、单选框、复选框等,其值如下:
- text,普通文本输入框,默认值
- password,密码输入框,以
·
替代实际输入值 - email,邮件地址文本输入框
- tel,用于提供输入电话号码的文本框,tel类型通常会和 pattern属性配合使用
- url,用于输入URL地址的文本框
- number:数字输入框,
value
初始值,max
最大值,min
最小值,sep
数字间隔 - button,普通按钮
- submit,提交按钮,
value
属性改变按钮的文本 - reset,重置按钮,
value
属性改变按钮的文本 - radio:单选框,通过
name
属性值控是否同组,checked
设置选中 - checkbox,复选框,通过
checked
属性指定默认选中项 - image,图像形式的提交按钮,同button,通过
src
属性指定图像 - hidden,隐藏域对于用户是不可见的,通常用于后台的程序
- file,文件选择器
- search,用于输入搜索关键词的文本框
- color,颜色设置框,选择颜色值
- range,提供一定范围内数值的输入范围,在网页中显示为
滑动条
,属性类似number - datetime,以下几个属性是日期、时间相关选择器
- datetime-local
- date
- month
- week
- time
示例:
<form action="">
<!-- 输入框 -->
输入文字:<input type="text">
<br>
敏感信息:<input type="password">
<br>
<!-- 多行文本框 -->
多行文本框:<textarea name="" id="" cols="30" rows="3"></textarea>
<br>
<!-- 单选 -->
选择性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
<!-- 多选框 -->
选择科目:<input type="checkbox" name="subjects" id="1" checked>语文
<input type="checkbox" name="subjects" id="2">数学
<br>
<!-- 下拉单选择框 -->
下拉单选择框:
<select name="" id="">
<option value="1">语文</option>
<option value="2" selected>数学</option>
</select>
<br>
<!-- 下拉多选选择框 -->
下拉多选选择框:
<select name="" id="" multiple>
<option value="1">语文</option>
<option value="2" selected>
9.其它标签
-
分割线:
<hr>
-
width/size:分别控制水平线的宽度和高度
-
noshade:用来去掉水平线阴影
-
color:用于定义水平线颜色
-
align:用来调整水平线水平对齐方式,默认水平居中
-
-
预格式化的文本:
<pre>
,将完全安装HTML源代码的内容显示。 -
<map>
,定义一个图像的映射,在不同区域实现点击不同位置的跳转-
name,与img标签的属性
usemap
相关联,在图像和地图间创建关系。 -
子标签,单标签,定义图片上的热点区域,实现热点区域的位置、大小及形状
-
herf:用来定义热点区域链接的目标地址
-
shape:用来定义区域的形状,取值:default(所有区域)、rect、circle、poly(多边形)
-
coords:用来定义可点击区域的坐标。与shape属性搭配使用
-
-
10.iframe
碎片化处理的,类似Android的fragment。
语法:<iframe ></iframe>
属性有:
-
src:定义页面路径
-
width:定义宽度
-
height:定义高度
-
frameborder:定义边框,默认有边框,通过设置0取消边框
-
scrolling:控制是否显示框架的滚动条,值有:
-
yes,始终显示滚动条
-
auto,在需要的情况下显示滚动条
-
no,从不显示滚动条
-
-
name:通常与
<a>
的target属性关联