02-HTML常用标签
2.1 标签的构成
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容就是标签名。
- 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容(比如:
、
)。
结构图:
![02-HTML常用标签_第1张图片](http://img.e-com-net.com/image/info8/4adb38f6d8e94eedb30c36e0661fc271.jpg)
2.2 标签的关系
可以分为:父子关系和兄弟关系
- 父子关系(嵌套关系)
![02-HTML常用标签_第2张图片](http://img.e-com-net.com/image/info8/6346bebead0f4c34aa5cf71abd9d588c.jpg)
- 兄弟关系(并列关系)
![image-20230919090057914](http://img.e-com-net.com/image/info8/8c7146b707a84c12a3a93a8a1af24a20.png)
2.3 常用标签
2.3.1 标题标签
<h1>标题h1>
- h1~h6,从一级标题到六级标题
- 重要程度依次递减
2.3.2 段落标签
<p>段落标签p>
2.3.3 换行
<br>
2.3.4 文本格式化
- 加粗
<b>超文本标记语言b>
- 下划线
<u>超文本标记语言u>
- 倾斜
<i>超文本标记语言i>
- 删除线
<s>超文本标记语言s>
2.3.5 图片标签
<img src="../img/xiongmao.jpg" alt="小熊猫" title="小熊猫 你好!!!!" width="30%" height="50%">
- src=“路径”:指定图片所在的位置(相对位置、绝对位置)
- alt=“小熊猫”:当图片加载不出来时显示的提示文本
- title=“小熊猫 你好”:当鼠标悬停在图片上时显示的文字
- width=“30%”:图片的宽度(值可以是数值,比如:90px)
- height=“50%”:图片的高度
扩展——相对位置
相对位置是本文件为主体去查找路径
- 同级:可以直接写,或者用
./
,比如:src="img/xiongmao.jpg" | src="./img/xiongmao.jpg"
- 下一级:
./文件/图片
,比如: src="./img/xiongmao.jpg"
- 上一级:
../(..表示往上一级走)
,比如:src="../img/xiongmao.jpg"
2.3.6 音频标签
<audio src="../img/music.mp3" controls loop>audio>
- src : 路径
- controls:显示播放的控件
- autoplay:自动播放(有的浏览器并不支持)
- loop:循环播放
2.3.7 视频标签
<video src="../img/video.mp4" controls autoplay muted>video>
- src : 路径
- controls:显示播放的控件
- autoplay:自动播放(需要 静音
muted
)
- loop:循环播放
2.3.8 超链接
<a href="https://pan.baidu.com/" target="_blank">点击跳转网盘a>
- href :跳转的链接地址
- target=“_blank” :重新打开一个窗口
- target=“_self”:默认值,在当前窗口跳转
2.3.9 列表
- 有序列表
<ol>
<li>哈哈哈li>
<li>嘻嘻嘻li>
<li>咯咯咯li>
ol>
- 无序列表
<h1>爱好列表:h1>
<ul>
<li>打篮球li>
<li>唱歌li>
<li>跳舞li>
ul>
- 自定义列表
<dl>
<dt><b>帮助中心:b>dt>
<dd>联系我们dd>
<dd>上门查水表dd>
<dd>线下单杀dd>
dl>
2.3.10 表格标签
<table border="3px">
<caption>学生成绩表caption>
<thead>
<tr>
<th>姓名th>
<th>成绩th>
<th>评语th>
tr>
thead>
<tbody>
<tr>
<td>文书舒td>
<td>59分td>
<td>名字不好记td>
tr>
<tr>
<td>张三td>
<td rowspan="2">100分td>
<td rowspan="2">很帅气td>
tr>
<tr>
<td>张三td>
tr>
<tr>
<td>张三td>
<td>100分td>
<td>很帅气td>
tr>
tbody>
<tfoot>
<tr>
<td colspan="3">...td>
tr>
tfoot>
table>
-
组成
table : 整体,包裹tr 和 td
tr :一行
td :一个单元格
-
属性
border:表格的外边框宽度
width:表格宽度
height:表格高度
-
表格标题和单元格标题
标题:学生成绩表
单元格标题:姓名
-
主体结构
thead:头部
tbody:主体
tfoot:尾部
-
合并
- 跨行合并(垂直合并):
rowspan="2"
- 跨列合并(水平合并):
...
- 合并数据保存原则:
左上原则
2.3.11 表单标签
1. input标签
<form action="https://www.baidu.com" >
用户名:<input type="text" placeholder="亲爱的坤,请输入您的名字" value="" name="user"> <br>
密码:<input type="password" placeholder="请输入密码" value=""> <br>
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>你猜
<br>
爱好:
<input type="checkbox" checked>唱
<input type="checkbox" checked>跳
<input type="checkbox">rap
<input type="checkbox">篮球
<br>
头像:
<input type="file" multiple>
<br>
<input type="submit" value="提交注册">
<br>
<input type="reset" value="点我试一下">
<br>
<input type="button" value="普通按钮">
form>
1. 文本框(text)
用户名:<input type="text" placeholder="亲爱的坤,请输入您的名字" value="" name="user">
placeholder=“提示” :做站位符,表示提示信息
value=“输入框的值”:如果写了,文本框会默认显示value的值
name=“user”:为input输入框取名字,一般结合 value 属性一起将数据整理发送给后端,比如:
value="张三",name="user" ==> 组成 : user="张三" 发送给后端
2. 密码框(password)
密码:<input type="password" placeholder="请输入密码" value="">
属性同上 text 文本框
3. 单选框(radio)
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>你猜
name=“sex”:将同name值的radio标签分为一组,保证一组只能选中一个
checked:默认选中
4. 多选框(checkbox)
爱好:
<input type="checkbox" checked>唱
<input type="checkbox" checked>跳
<input type="checkbox">rap
<input type="checkbox">篮球
checked:默认选中
5. 文件上传(file)
头像:<input type="file" multiple>
multiple:多文件上传
6. input按钮系列
<input type="submit" value="提交注册">
<input type="reset" value="点我试一下">
<input type="button" value="普通按钮">
- 提交(submit)
- 重置(reset)
- 普通按钮(button)
value=“名字”:按钮名字
2. button按钮
button按钮根据 type 属性不同分为3种:
- submit:提交
- reset:重置
- button:普通按钮,和js连用
基本上和 input 的 按钮差不多,
注意:
button 是一个双标签,可以嵌入图片、音频…等作为按钮
<button type="submit">点击提交 button>
<button type="submit"> <img src="../img/xiongmao.jpg" alt=""> button>
3. select下拉菜单
请选择地区:
<select>
<option >option>
<option >北京option>
<option >上海option>
<option selected>重庆option>
<option >四川option>
<option >云南option>
select>