排版标签
(1)<h></h>
标题标签
有1-6级标题,从1到6逐渐变小,文字都有加粗,每个标题独占一行
(2)<p></p>
段落标签
段落直接的间隙,独占一行
(3)<br>
换行标签
用来强制换行
(4)<hr>
水平线标签
在页面中显示一条水平线,用于主题的分割转换
文本格式化标签
(1)加粗 <b>
或者 <strong>
(2)下划线 <u>
或者 <ins>
(3)倾斜 <i>
或者 <em>
(4)删除线 <s>
或者 <del>
媒体标签
(1)图片标签 <img src=" " alt=" " title=" ">
图片标签属性:src后加图片路径;
alt后加文本替换内容,及图片加载失败时显示的文本,图片加载成功时不显示;
title提示文本,当鼠标悬停时显示的内容;
width宽 height高,宽和高只设置其中一个属性时,图片会等比变化(等比放大或缩小)
(2)音频标签<audio src=" " controls></audio>
controls、autoplay、loop属性均有默认值
音频标签属性:src后加音频路径;
controls显示播放的控件;
autoplay自动播放(部分浏览器不支持,如谷歌);
loop循环播放;
目前支持MP3、Wav、Ogg三种格式
(3)视频标签<video src=" " controls>
视频标签属性:src后加视频路径;
controls显示播放的控件;
autoplay自动播放(谷歌浏览器需配合muted实现静音播放);
loop循环播放
目前支持MP4、WebM、Ogg
链接标签
<a href'=" "></a>
也叫a标签、超链接、锚链接
a标签文字默认有下划线
超链接属性:href目标网页网址;
target目标网页打开方式_self
为默认值,在当前网页中打开,_black
在新窗口中打开
空链接
<a href="#"></a>
功能:点击之后回到网页顶部;开发中不确定该链接最终跳转位置,用空链接占个位置
列表标签
以行的方式整齐的显示内容
无序列表最常用,有序列表可用于排行榜,自定义列表可用于底部导航
(1)无序列表
<ul> <li> </li> <li> </li> </ul>
ul表示无序列表的整体,用于包裹li标签;
li表示无序列表的每一项,用于包含每一项的内容;
列表每一项前面有小圆点
(2)有序列表
<ol> <li> </li> <li> </li> </ol>
ol表示有序列表的整体,用于包裹li标签;
li表示无序列表的每一项,用于包含每一项的内容;
列表每一项前面有数字
(3)自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
dl表示自定义列表的整体,用于包裹dt和dd标签;
dt表示自定义列表的主题;
dd表示针对主题的每一项内容,dd会显示默认缩进效果
表格标签
1.表格基本使用
<table>
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
表格基本标签:table表示表格的整体,用于包裹tr和td标签;
tr表示表格的每一行;
td表示表格的单元格
表格标题和表格单元格标签:caption表示表格整体大标题,默认在表格整体顶部居中位置显示;
th表头单元格,用于表示每一列小标题,默认加粗居中显示,th标签要写在tr标签里面(用于替换td标签)
表格的结构标签:thead表格头部;
tbody表格内容;
tfoot表格底部;
表格头部和底部会比身体窄一点;表格的结构标签可以省略,但是加上以后结构看起来会更加清晰;表格的结构标签内部用于包裹tr标签
表格的属性:border表格的边框,可设置为1;
width表格的宽度;
height表格的高度
2.表格单元格合并
同一个结构标签中的单元格才可以合并,如表格头部的单元格不可以和表格身体的单元格合并(可以不写结构标签,按照自己的想法合并)
rowspan和colspan的值占几个设置为几
表单标签
表单标签如下:
1.input标签
<input type=" " placeholder=“ ”>
input标签type属性的值可以为以下:text表示文本框,为默认值,placeholder表示文本框提示内容;
password表示密码框,placeholder为提示内容;
radio表示单选框,用name属性可以进行分组,有相同name属性的单选框为一组,一组中同时只能有一个默认值,用checked设置默认值;
checkbox表示多选框,用checked设置默认选项,默认选修可以有多个;
file表示文件,用multiple属性可以选中多个文件,默认值只能选1个文件夹
按钮 submit提交按钮,点击之后提交数据给后端服务器;
reset重置按钮,点击之后恢复表单默认值;
button普通按钮,默认无功能,用value给普通按钮写提示文字,配合js添加功能
实现按钮功能要把实现按钮功能的内容放在form标签里面
例子:
基本语法
文本框
单选框
多选框
2.button标签
<button type=""></button>
button标签type属性的值可以为submit,提交按钮,点击之后提交
数据给后端服务器;
reset重置按钮,点击之后恢复表单默认值;
button普通按钮,默认无功能,用value给普通按钮写提示文字,配 合js添加功能
实现按钮功能要把实现按钮功能的内容放在form标签里面
input标签实现按钮功能和button标签实现按钮功能区别:展现按钮的方式不同,button为双标签,中间可写入自己需要提示的内容;
谷歌浏览器中button标签type属性默认为submit提交按钮,button标签除包裹文字外,还可以包裹图片等;input标签是单标签,展示按钮的形式较为单一
3.select下拉菜单标签
用于在网页中多个选择项的下拉菜单
<select>
<option></option>
</select>
select标签是下拉菜单的整体
option标签是下拉菜单的每一项
selected属性用来设置下拉菜单的默认选中,如果不写selected属性则默认选项为第一项(代码中下拉菜单第一行展示内容)
4.textarea文本域标签
<textarea cols=" " rows=" "></textarea>
cols和rows可以改变文本域标签的宽高,建议用css设置
input标签与textarea标签实现文本输入的不同点:虽然两者都可以实现文本输入,但是input只能实现一行文本的输入,而textarea标签可以实现多行文本的输入;textarea标签可以在右下角将文本输入的范围变化
5.label标签
配合其他表单标签使用,用于绑定内容与表单标签的关系
使用方法:一种方法是用label标签把内容(文本)包裹起来;在表单标签上添加id属性;在label标签的for属性中设置对应的id属性值;
另一种方法是先用label标签把内容(文本)和表单标签一起包裹起来,然后把label标签的for属性删除即可
语义化标签
1.没有语义的标签
<div></div>
独占一行
<span></span>
一行显示多个
2.有语义的标签,独占一行
<header></header>
网页头部
<nav></nav>
网页导航
<focter></focter>
网页底部
<aside></aside>
网页侧边栏
<section></section>
网页区块
<article></article>
网页文章
字符实体
展示效果如下
代码如下
如果html代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格;如果想实现浏览器解析多个代码可以通过字符实体实现
字符实体结构:&英文;