注释
command + /
基础认知
-
HTML标签的结构:双标签/单标签
-
HTML标签的关系:父子关系(嵌套关系)/兄弟关系(并列关系)
-
标签:(command + D 选择相同内容)
(1)排版标签
标题标签(h1-h6)
段落标签(p)
换行标签<br>
水平线标签<hr>
(2)文本格式化标签
(3)图片标签<img src= " " alt=" " title =" ">
alt
是替换属性,当图片不显示的时候,显示的文字
title
是提示文本,悬停的时候提示
其他属性width height
图片路径./
当前../
上级
(3)音频标签<audio src= " " controls>
controls
显示音频播放的控件
autoplay
自动播放(部分浏览器不支持)
loop
循环播放
音频标签目前支持三种格式:mp3、wav、ogg
(4)视频标签<video src= " " controls>
controls
显示视频播放的控件
autoplay
自动播放(谷歌浏览器中需配合muted实现静音播放)
loop
循环播放
视频标签目前支持三种格式:mp4、webm、ogg
(4)链接标签<a href="#" target = " ">
target
目标网页的打开形式:_self
默认值,覆盖原网页打开
_blank
在新窗口跳转
HTML基础
列表标签
无序列表
ul标签只能包裹li,而li可以放任何标签
<ul> 包裹 <li> 标签
有序列表
ol标签只能包裹li,而li可以放任何标签
<ol> 包裹 <li> 标签
自定义列表
dl标签只能包裹dd dt,而dd dt可以放任何标签
<dl> (整体)包裹 <dt>(每个列表的主题) <dd>(具体的内容) 标签
表格
dl标签只能包裹dd dt,而dd dt可以放任何标签
<table> (整体 包裹tr)
<tr>(每行 包裹td)
<td>(单元格,包裹内容)
表格属性
border 边框宽度 width 表格宽度 height 表格高度
其他标签
<th> 表头单元格
<caption> 表格大标题
表格的结构标签
<thead> 表格头部
<tbody> 表格主体
<tfoot> 表格底部
合并单元格
1. 左上原则,确定删除的单元格
2. 给保留的单元格设置:跨行合并(rowspan)跨列合并(colspan)
属性值 合并单元格的数量
只有同一个结构标签的单元格才能够合并
表单
应用场景:登陆注册搜索
input系列标签
inpu
t标签可以通过type
属性值不同,展示不同的效果
文本框
type
属性值:text
常用属性
placeholder=“占位内容”
:占位符,提示用户输入内容的文本
单选框
type
属性值:radio
常用属性
name=“组名”
:分组,相同名字的只能选一个
checked”
:默认选中
单选框
type
属性值:file
常用属性
multiple
:多文件选择
按钮
以上属性得配合form
标签使用
value = "提示文字" 修改提示文字用value
button按钮标签
type
属性
select下拉菜单标签
select
标签:下拉菜单的整体
option
标签:下拉菜单的每一项
属性
selected
:下拉菜单的默认选中
textarea文本域标签
标签名textarea
属性
cols
:可见宽度
rows
:可见行数
右下角可以拖拽,实际开发css设置
lable标签
两种使用方法:
使用简单方法即可。
<input type="radio" name="sex" id="nan"><lable for="nan">男</lable></input>
<lable><input type="radio" name="sex">女</input></lable>
2022.3.6
打卡学习视频40/198
明天继续
学了html认知和基础的标签,表格表单的系列标签,表单还剩一点点啦。