超级详细的 HTML 学习笔记，一篇入门系列！！耐心读一遍 复习必备！！

目录

简要

认识标签

基本结构

常见标签

1. 注释 ---> ctrl + /

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

3. 段落标签 ---> p

4. 换行 ---> br

5. 格式化标签

加粗 ---> strong 和 b

倾斜 ---> em 和 i

删除线 ---> del 和 s

下划线 ---> ins 和 u

6. 图片标签 ---> img

7. 超链接 ---> a

href ：可以填入不同的内容 详细看代码注释

targer：控制打开方式

8. 表格标签 ---> table

几个属性:

几种标签：

合并单元格：

9. 列表标签

10. 表单标签

11. 其他标签

① lable 标签：

② select 标签

③ textarea标签

④ 无语义标签：div & span

​编辑

---

 

简要

• html --- 全程是“超文本标记语言”，学习这个语言，主要就是学习其中的标签。
• 敲代码软件：vscode
• 展示浏览器：Chrom

认识标签

• 标签名放到 <> 中
• 大部分标签成对出现 例如 ，分别是开始标签和结束标签
• 少数的标签只有开始标签 如
  
• 开始标签可能会有一些属性，例如 id 表示这个标签的标识符

基本结构

vscode中 快捷键 ! + enter 能自动生成主体框架

常见标签

1. 注释 ---> ctrl + /

ctrl + /  可以快速进行注释，或者取消注释

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

标签分六级  h1  --  h6

    
HTML
简要
认识标签
内容： 标签是基本结构

 

3. 段落标签 ---> p

内容： 标签是基本结构
难度： 很简单

1. 这个是根据浏览器进行排版的
2. html 内容首尾处的换行 空格 均无效
3. html 内容中间的多个空格 只相当于一个空格
4. html 输入换行 不会真的换行 只是相当于一个空格

4. 换行 ---> br

    
内容： 标签是基本结构
难度： 很简单

 相比较于换行 br 两行的行间距小了很多

5. 格式化标签

• 加粗 ---> strong 和 b

• 倾斜 ---> em 和 i

• 删除线 ---> del 和 s

• 下划线 ---> ins 和 u

    加粗  倾斜  删除线  下划线

6. 图片标签 ---> img

• src: 是这个图片的地址，可以是本地地址 可以是网络地址
• alt : 是 替换本文,当图片不能被正常显示的时候,就会替换成这个文字  
• title：提示文本，鼠标停留在图片上会有提示
• width：控制高度  
• height：控制宽度  
• border：设置边框，通常使用css设定

 

7. 超链接 ---> a

href ：可以填入不同的内容 详细看代码注释

    
百度
demo1
这是一个空链接
zip压缩包文件
第一季第二季
第1集剧情
第2集剧情
第1集剧情
第2集剧情

 

targer：控制打开方式

打开方式 默认是_self   新标签页打开：_blank

    百度demo1

8. 表格标签 ---> table

几个属性:

•         align ：对齐方式，表格的对其，不是表格里内容
•         border ：边框，1表示有边框(数字越大，边框越粗) ；    " " 表示没边框
•         cellpadding ：内容距离边框的距离 默认为 1px
•         cellspacing ：单元格之间的距离    默认为2px
•         width / height ：设置尺寸
• 注意这几个属性 vscode 都提示不出来，需要手敲

几种标签：

•         tr 标签：表示表格的一行
•         td 标签：表示一个单元格
•         th 标签：表示表头单元格
•         thead 标签：表示表格的头部区域（注意和 th 区分，范围比 th 大)
•         tbody 标签：表格得到主体区域

合并单元格：

•         跨行合并 ：rowspan = "n" 
•         跨列合并 ：colspan = "n" 

信息统计
姓名
年龄
性别
小明
12
男
小红
4
女

 

9. 列表标签

• 有序列表：   ul   li 
• 无序列表：   ol   li 
• 自定义列表： dl (小标签)   dt (小标题)   dd (围绕标题说明)上面有几个小标题，下面有几个围绕这个标题来展开的   

    
无序列表
列表标签
无序标签
自定义标签
有序标签
列表标签
无序标签
自定义标签
自定义列表
动物
会飞的:
老虎
狮子
四条腿
狗

 

10. 表单标签

表单标签是让用户输入信息的重要途径

分成两个部分：

• 表单域：包含表单元素的区域，重点是 form 标签

•               form 标签：描述了要把数据按照什么方式，提交到哪个页面中。

• 表单控件：输入框，提交按钮等，重点是 input 标签

•               imput 标签：各种输入控件，比如 单行文本框、按钮、单选框、复选框

属性：

• type ：取值种类很多，button、checkbox、text、file、image、password、radio等
• name ：给 input 起个名字，尤其对于单选按钮，具有相同name的才能多选一
• value ：input 中的默认值
• checked ：默认被选，用于单选按钮和多选按钮
• maxlength ：设定最大长度

text--->

password--->

男

女

吃饭

睡觉

打游戏

11. 其他标签

① lable 标签：

搭配 input 使用，可以选中相应的单选/复选框，提升用户体验

•         for 属性：指定当前 lable 和哪个相同的 input 的标签对应（此时点击才有用)

    男

 

② select 标签

•         option 属性：之间的文字就是选项
•         selected="selected"  表示默认

    北京上海郑州

 

③ textarea标签

本文内容

④ 无语义标签：div & span

这俩就是两个盒子 用于网页布局

div 标签      divsion 的缩写，分割  ------  独占一行，是一个大盒子

span 标签   跨度  ------ 不占一行，是一个小盒子