【HTML】前端学习记录1

注释

command + /

基础认知

1. HTML标签的结构：双标签/单标签

2. HTML标签的关系：父子关系（嵌套关系）/兄弟关系（并列关系）

3. 标签：（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系列标签

input标签可以通过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认知和基础的标签，表格表单的系列标签，表单还剩一点点啦。