快速添加标签 选中文本 在按住 command + alt + t
-
单标签
- 只有开始标签没有结束标签,也就是由一个<>组成
<meta charset="UTF-8">
- 双标签
- 又开始标签和结束标签,也就是由一个<>和一个</>组成
<html>
</html>
H标签
- 被H系列标签包裹的内容会独占一行
- 在H系列的标签中,H1最大,H6最小
- 在企业中,H1标签慎用,一般一个网页中只能出现一个H1标签(和SEO有关)
P标签
- 作用
- 告诉浏览器哪些文字是一个段落
- 格式
- `<p>xxxxxx</p>`
- 注意点
- 1 在浏览器中会单独占一行
img标签
img标签不会像P标签,H标签独占一行 <img src="1.jpg" alt="">
- width和height属性
1:因为指定了img的宽度和高度属性后,很容易让图片变形,所以不想让图片变形可以只指定宽度或者高度
2:如果只指定了宽度,系统会自动计算高度是多少,图片都是等比例拉伸
- title属性
当鼠标悬停在图片的上面时,会填出要显示的文本提示内容
- alt属性
告诉浏览器,当图片找不到或者不存时,要显示的内容,就像许多被封的网站,图片都成白底得了,你们懂得,
br标签
br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做
a标签
控制页面与页面之间的跳转
href : 跳转到目的页面
target : _self(当前页面显示) _blank(另开一个页面显示)
title: 鼠标放上面会显示提示
base标签
base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
注意点:
base标签必须写在head标签的开始标签和结束标签之间
假链接
1 : # -> 点击后会自动回到顶部
2 : javascript: -> 不会自动回到网页顶部
无序列表
样式
<ul>
<li>需要显示的条目内容</li>
</ul>
用途:
1 : 新闻列表
2 : 商品列表
3 : 导航条
快捷键
1 : ul>li 在按tab键 -> 生成一堆ul标签,然后在这对ul标签中在生成一对li标签
2 : ul>li*3
定义列表
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
用途:
1 : 做网站尾部的相关信息
2 : 做图文混排
表格标签
格式
<table>
<tr>
<td></td>
</tr>
</table>
table: 代表整个表格
tr : 代表整个表格中的一行数据
td : 代表一行中的一个单元格,也就是一对td标签就是一行中的一个单元格
border : 边框属性
caption标签
在表格标签中提供了一个标签专门用来设置表格的标题
标题会自动相对于表格的宽度居中
注意点:
1 : caption一定要写在table标签中,否则没有用
2 : caption一定要竟跟在table标签后面
th标签
在表格标签中提供了一个标签专门用来存储每一列的标题
只要将当前的标题存储在这个标签中就会自动居中和加粗
常见的表单元素
input标签:
type属性: text,password等
radio可以做单选框(radio)
注意 : 默认情况下 不会互次 想要单选框互次,必须给每一个单选框标签都设置一个name属性,然后name属性还必须设置相同的值
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
checked : 默认选中一个框子
在html中如果属性的取值和属性的名称一样,可以只写一个
checkbox : 可以做多选框
button : 按钮
image : 图片
reset : 用于清空表单中已经填写好的数据
submit : 提交
注意点:要想吧表单中的数据提交到服务器必须注意两点
1 : 需要给form表单添加一个action的舒心,通过这个action属性 指定需要提交到的服务器地址
2 : 需要给需要提交到服务器的表单元素添加一个name属性
hidden : 隐藏域
作用 : 配合提交按钮将一些数据摸摸的提交到服务器
label标签
1 : 将文字利用label标签包裹起来
2 : 给输入框添加一个id属性
3 : 在label标签中通过for属性和输入框中的id进行绑定
样式1:(建议)
<form action="">
<label for="account">账号:</label><input type="text" id="account">
<label for="pwd">密码:</label><input type="password" id="pwd">
<td></td>
</tr>
</form>
样式2:
<label>账号:<input type="text" ></label>
datalist标签(了解 - 绝大多数浏览器已经不支持)
作用 : 给输入框绑定待选框
例子:
请输入你的车型:<input type="text" list="cars">
<datalist id="cars">
<option>宝马</option>
<option>奔驰</option>
<option>宾利</option>
<option>劳斯莱斯</option>
</datalist>
select标签
用于定义下拉列表
格式
<select>
<option>列表数据</option>
</select>
注意点:
1 : 不能输入内容
2 : 可以在下拉列表中选择
3 : <option selected="selected">劳斯莱斯</option> // 设置为默认数据
🌰1 单组:
<select>
<option>宝马</option>
<option>奔驰</option>
<option>宾利</option>
<option selected="selected">劳斯莱斯</option> // 设置为默认数据
</select>
🌰2 分组:
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
</optgroup>
<optgroup label="蚌埠">
<option>禹会区</option>
<option>蚌山区</option>
</optgroup>
</select>
textarea标签
可以输入多行文本
格式 :
<textarea>
</textarea>
注意点:
1 : 默认情况可以无限换行
2 : 默认情况下有自己的宽度和高度
3 : 可以通过cols和rows来指定,但是还是可以无限换行
4 : 默认情况下可以手动拉伸
video标签
格式1 :
<video src="" autoplay="autoplay">
</video>
autoplay : 自动播放
controls : 用于告诉video是否显示工具条
poster : 用于视频没有播放前的占位图片
loop : 一般用于做广告视频,用于告诉video视频播放完后,是否需要循环播放
preload : 预先加载视频,但是需要注意他和autoplay相互冲突,只能用一个
muted : 静音
width/height : 设置其中一个就可以,同时设置不按比例有可能会变形
格式2 :
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
方式三 :
可以通过js的框架html5media来播放所有的浏览器视频
video
audio标签
作用 : 播放视频
格式1 :
<audio src=""></audio>
格式2 :
<audio>
<source src="" type="">
</audio>
详情概要标签
格式:
<details>
<summary>概要信息</summary>
详情信息
</details>
marquee标签
作用 : 跑马灯
格式:
<marquee>
内容
</marquee>
属性:
direction : 方向
scrollamount : 滚动速度
loop : 滚动次数 默认-1,也就是无限滚动
behavior : 设置滚动类型 slide滚动到边界就停止,alternate滚动到边界就弹回
字符实体标签
: 空格符号
< : < 小于符号 (less than)
> : > 大于符号 (greater than)
© : 版权符号
