超级详细的 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 能自动生成主体框架
Document
1. 注释 ---> ctrl + /
ctrl + / 可以快速进行注释,或者取消注释
2. 标题标签 ---> h1 h2 h3 h4 h5 h6
标签分六级 h1 -- h6
HTML
简要
认识标签
内容: 标签是基本结构
3. 段落标签 ---> p
内容: 标签是基本结构
难度: 很简单
- 这个是根据浏览器进行排版的
- html 内容首尾处的换行 空格 均无效
- html 内容中间的多个空格 只相当于一个空格
- 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--->
男
女
吃饭
睡觉
打游戏
① lable 标签:
搭配 input 使用,可以选中相应的单选/复选框,提升用户体验
- for 属性:指定当前 lable 和哪个相同的 input 的标签对应(此时点击才有用)
![]()
② select 标签
- option 属性:之间的文字就是选项
- selected="selected" 表示默认
![]()
③ textarea标签
④ 无语义标签:div & span
这俩就是两个盒子 用于网页布局
div 标签 divsion 的缩写,分割 ------ 独占一行,是一个大盒子
span 标签 跨度 ------ 不占一行,是一个小盒子