前端学习 课堂笔记 HTML篇

h系列标签

<h1>1级标题</h1>

<h2>2级标题</h2>

<h3>3级标题</h3>

<h4>4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

特点：重要程度依级递减，文字都有加粗

文字都有变大，并且从h1→h6文字逐渐减小，独占一行

<p>段落</p>

特点：段落之间有间隙，独占一行

<br>换行

<hr>水平线

b/strong  加粗

u/ins       下划线

i/em        倾斜

s/del       删除线

b,u,i,s皆为语义标签，后者表示的语义更强烈！

图片标签<img src=”” alt=””>

属性注意点:

1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分

 音频标签

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持)
loop	循环播放

我所使用的edge浏览器，因为广告拦截插件导致无法自动播放

属性名: alt

属性值:替换文本

当图片加载失败时，便会显示alt的文本；当图片加载成功时，不会显示alt的文本

属性名: title

属性值:鼠标悬停在图片上显示

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器需要配合muted实现静音播放)
loop	循环播放

无序列表

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

 注意点:
1、ul标签中只允许包含li标签        2、li标签可以包含任意内容

有序列表

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

自定义列表

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点:
dd前会默认显示缩进效果
注意点:
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容 

表格标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

 标签的嵌套关系: table > tr > td

属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

实际开发时针对于样式效果推荐用CSS设置

表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表格单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

增加结构，提高代码执行效率

合并单元格

合并单元格步骤:
1.明确合并哪几个单元格 

2.通过左上原则，确定保留谁删除谁，上下合并→只保留最上的，删除其他左右合并→只保留最左的，删除其他

3.给保留的单元格设置:跨行合并(rowspan）或者跨列合并(colspan)

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨: thead、tbody、tfoot)

表单标签

1. 1. input系列标签
2. 2. button按钮标签
3. 3. select下拉菜单标签
4. 4.textarea文本域标签
5. 5. label标签

6. 标签名	type属性值	说明
   input	text	文本框，用于输入单行文本 密码框，用于输入密码 placeholder：占位符。提示用户输入内容的文本
   input	password
   input	radio	单选框           name：一组只有一个被选中，checked：默认选中
   input	checkbox	多选框，用于多选多
   input	file	文件选择,用于之后上传文件。multiple：多文件选择（选择文件时使用CTRL）
   input	submit	提交按钮，用于提交
   input	reset	重置按钮，用于重置
   input	button	普通按钮，默认无功能，之后配合js添加功能

   select下拉菜单标签

   使用场景：在网页中提供多个选择项的下拉菜单表单控件示签组成:

   select标签：下拉菜单的整体option标签:下拉菜单的每一项

   常见属性：

   selected：下拉菜单的默认选中

   textarea文本域标签

   场景:在网页中提供可输入多行文本的表单控件标签名: textarea

   常见属性:

   cols:规定了文本域内可见宽度

   rows:规定了文本域内可见行数注意点:

   右下角可以拖拽改变大小

   实际开发时针对于样式效果推荐用CSS设置

   做手机端网页

7.