前端学习笔记HTML

vscode安装使用插件快捷键详情请跳转链接

vscode安装教程插件使用快捷键::https://www.jianshu.com/p/4c6ba8dc1c92

1-1HTML常用标签

1.标题标签

   标题文本   
   标题文本   
   标题文本   
   标题文本   
   标题文本   
   标题文本   

备注:一行只能显示一个

2.段落标签

文本内容

3.水平线标签 < hr >

是单标签

4.换行标签br

5.div 和 span标签(重点)

 这是头部 
   今日价格

备注:
div标签 用来布局的，但是现在一行只能放一个div
span标签 用来布局的，一行上可以放好多个span

1-2文本格式化标签

标签	显示效果
	文字以粗体方式显示（XHTML推荐使用strong）
和	文字以斜体方式显示（XHTML推荐使用em)
和	文字以加删除线方式显示（XHTML推荐使用de）
和	文字以加下划线方式显示（XHTML不赞成使用u）

1-3 标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 <手机 颜色="红色" 大小="5寸">  

1-4路径标签(重点、难点)

image.png

image.png

1. 相对路径

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可 image.png
下一级路径	/	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） image.png
上一级路径	../	在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推， image.png

2.绝对路径

绝对路径以Web站点根目录为参考基础的目录路径.
或者使用图床链接引入img 标签

3.音频标签

4.视频标签

5.图片路径

6.链接属性

百度一下
百度一下

1.链接标签的target属性

取值	效果
_self默认值	在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

---

2-1列表标签

1.无序列表

标签名	说明
ul	表示无序列表的整体,用于包裹li标签
li	表示无序列表的每一项,用于包含每一行的内容(课包含任意元素)

特点:无序列表的前面有个黑色的圆点
使用场景:导航栏 新闻列表

2.有序列表

标签名	说明
ol	表示有序列表的整体,用于包裹li标签
li	表示有序列表的每一项,用于包含每一行的内容(课包含任意元素)

特点:有序列表的前面是按照顺序排列的数字
使用场景:排行使用

3.自定义列表

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

特点:课用于网站的footer导航

2-2 表格标签

1.表格的基本标签

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

表格的嵌套关系:table>tr>td

2.表格的相关属性

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

3.表格标题和表头单元格标题

标签名	名称	说明
caption	表格大写标题	表示表格整体大标题,默认在表格整体顶部居中显示
th	表头单元格	表示一列小标题,通常用于第一行

4.表格的结构标签

标签名	名称
theader	表格头部
tbody	表格身体
tfootder	表格底部

5.合并单元格

将水平或者垂直多个单元格合并成一个单元格

属性名	属性值	说明
rowspan	合并伸元格的个数	跨行合井，将多行的单元格合并
colspan	合并伸元格的个数	跨列合井，将多行的单元格合并

2-3表单标签

标签	属性名	说明
文本框 text	placeholder	占位,提示用户输入内容的文本
密码框password	placeholder	占位，提示用户输入内容的文本
单选框radio	name	分组，有相同属性的单选框为一组，一组只能选择一个
	checked	默认选中单选框
复选框checkbox	checked	默认选中
文件选择框file	multiple	多文件选择
按钮框	button	普通按钮，默认无功能，后期搭配js使用
	submit	提交按钮，点击之后提交数据发给后台
	reset	重置按钮，恢复表单的默认

使用按钮需要搭配form
form使用；把表单包裹起来

1.input标签-文本框

用户名:

拓展value属性和name属性作用的介绍

用户名:

2.input标签-密码框

密码：

3.单选框

男
女

4.复选框

 游泳
 游泳
 游泳

5.文件选择框

 单选多选

6.按钮框

 提交
 重置
 按钮

7.select下拉菜单标签

标签属性	说明
select标签	下拉菜单的整体
option	下拉菜单的每一项
selected	下拉菜单默认选中

8.text area文本域标签

标签名	说明
text area	输入大段的文本
cols	规定了文本的可见宽度
rows	规定了文本的可见行数

注意：实际开发使用css更改样式

9.label标签

 健身 

2-4语义化标签

1.无语义标签

使用场景：开发网站需要使用大量的div跟span
div标签：独占一行
span标签：一行可以显示多个

2.有语义标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
action	网页文章

2-5字符实体

空格合并现象

，场景：如果在ht代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

字符名称	描述	显示结果
；	空格
<；	小于号	<
>；	大于号	>
&；	和号	&
"；	引号	"
&apos；（IE不支持）	撇号	'
¢；	分（cent）	￠
£；	镑	￡
¥	元	￥
€	欧元	€
§；	小节	§
©；	版权（copyright）	©

前端学习笔记CSS链接-https://www.jianshu.com/p/860dea69a502