HTML一些容易忘的东西以及html5新增方面

HTML一些容易忘的东西

个人回顾复盘使用，仅总结一些个人觉得容易遗忘的内容

一， a标签

1， href属性 用于书写跳转的链接 ，也可以作为锚点
常见的写法

• 第一种，临时链接，默认会有刷新效果,效果呈现回到顶部

<a href="#"></a>

• 第二种，取消默认刷新的方式

<a href="JavaScript:;"></a>
//<a href="javascript:void(0)"></a>

2，target属性
_self 在当前窗口打开（默认）
_blank 在新窗口打开
3，作为锚记使用

二，table表格

一些属性，大多用css写 容易遗忘
设置在table上
• border：设置边框，
• width & height：表格的宽高
• algin：对齐方式
• bgcolor：背景颜色
• cellspacing:合并单元格之间的空白
• cellpading：规定单元边沿与其内容之间的空白。
设置在单元格上
• 列合并：colspan
• 行合并：rowspan

完整版的表格代码

我是标题caption

表头1	表头2	表头3
单元格1		单元格2
单元格1	单元格2
底部

<table border="2" cellspacing ="0">
       <caption>我是标题caption</caption>
       <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</td>
        </tr>
       </thead>
       <tbody>
        <tr>
            <!-- 横向 合并的列所以叫列合并 -->
            <td colspan="2">单元格1</td>
            <!-- 纵向 合并的行所以叫行合并 -->
            <td rowspan="2">单元格2</td>
            <!-- <td>单元格3</td> -->
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <!-- <td>单元格3</td> -->
        </tr>
       </tbody>
       <tfoot>
        <tr>
            <td colspan="3"> 底部</td>
        </tr>
       </tfoot>
    </table>

三，form 表单

1，表单控件

原先就有的

<input type="text">//文本框
<input type="password">//密码框
<input type="checkbox">//复选框
<input type="radio" name="">//单选框,一组单选框通过name进行关联
<textarea name="" id="" cols="30" rows="10"></textarea>//文本域
<select name="" id="">//下拉框
       <option value=""></option>//下拉框选项
</select>

html5新增
input 的 email 提交会自动验证邮箱格式
input 的 tel 提交不会验证格式 需要结合一些属性来使用
input 的 url 提交会验证格式 但不严谨 需要结合一些属性来使用

<input type="range" min="0" max="100" step="10">//取值滑块
<input type="number" min="0" max="100" step="10"><br>//通过按钮获取一个可以微调的数字框
<input type="color" ><br>//展示一个颜色框
<input type="date" value="2023-05-21"><br>//日期框，value默认值，保持格式一致 
<input type="month" value="2023-05"><br>//月
<input type="week" value="2023-W20"><br>//周
<input type="time" value="11:22"><br>//时间在这里插入代码片

output 与datalist 遇到了在学习吧
进度条与容量

   <progress max="100" min="0" value="30"></progress>//进度条
   <meter max="100" min="0" low="20" high="80" value="75"></meter>//容量

2，属性

required=“required”要求必填
placeholder属性：提示内容
autofocus属性 自动获取焦点
autocomplete属性：自动补全（暂时没研究怎么用）
pattern：将属性值设为某个格式的正则表达式
multiple：多个输入提交

四，语义化标签

<header></header>//头部
<nav></nav>//导航栏
<main> //主体部分
  <article></article> //文章
  <aside></aside>//侧边栏
</main>
<footer></footer>//底部

五，音频与视频

<!--
音频audio
src路径,preload 预加载 controls浏览器提供的音频控件
autoplay  自动播放
loop  循环播放
 -->
<audio src="" preload="metadata" controls="controls"></audio>

<!--
视频video
（1）src():本地或服务端视频文件的地址
（2）controls：由浏览器提供的视频控件
（3）preload：预加载，让文件预先进行缓冲，优化播放速度。
				三个可选值：auto 对整个视频文件进行加载 
				默认值
				metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）
（4）loop：循环播放，布尔类型在标签内使用时默认为true。
（5）autoplay：自动播放，布尔类型在标签内使用时默认为true。
（6）poster()：给视频设置第一帧（封面）。括号内写图片的路径内容。
（7）width 、 height ：设置视频的高度和宽度
-->
<video src="" preload="auto" loop  poster="" width="400" height="350" controls="controls"></video>

六，伪类选择器

first-child
    第一个子孩子选择器：first-child
    第n个孩子选择器：nth-child(n)
    最后一个孩子选择器：last-child
    倒数第n个孩子选择器：nth-last-child(n）

first-of-type
区别：第一个先看是第几个孩子再判断是否与前面的元素一致，第二个先看元素再看是第几个孩子
input伪类选择器
	    input[type="text"]
	    input[type="text"]:disabled
	    ::before和::after 选择器
属性选择器
	    p[属性名]
	    a[href^="https"]以什么开头
	    a[href$="html"]以什么结尾

a标签的伪类
	    :hover
	        被鼠标出没的元素的元素。任何元素都可以使用
	
	    :active
	        被鼠标点击但是不松开的元素
	
	    :link
	        定义没有被访问过的元素，只适合a标签
	
	    :visited
	        定义已被访问过哦的元素，只适用于a标签