一、基础认知
- HTML(Hyper Text Markup Language,超文本标记语言)
专门用于网页开发的语言,主要通过HTML标签
对网页中的文本、图片、音频、视频等内容进行描述 - HTML页面固定结构
<!DOCTYPE html> <html lang="en"> //1 <head> //2 <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页的标题</title> //2.1 </head> <body> //3 网页的主体内容 </body> </html>
- 开发工具
Visual Studio Code
、Webstorm、Sublime、Dreamweaver、Hbuilder - HTML中标签与标签之间的关系
父子关系(嵌套关系
)、兄弟关系(并列关系
)
二、HTML标签
1. 排版标签
- 标题标签【
双标签
,文字都有加粗和变大,从1~6逐渐变小,独占一行】<h1>我是1级标题</h1> <h2>我是2级标题</h2> <h3>我是3级标题</h3> <h4>我是4级标题</h4> <h5>我是5级标题</h5> <h6>我是6级标题</h6>
- 段落标签【
双标签
,段落与段落之间存在空隙且独占一行】<p>我是段落标签</p>
- 换行标签【
单标签
,让文字强制换行】<br>
- 水平线标签【
单标签
,在页面中显示一条水平线】<hr>
2. 文本格式化标签
-
【
双标签
】 语义化标签有利于机器解析,对搜索引擎优化(SEO)有帮助标签 说明 标签 说明 b 加粗 strong 加粗 u 下划线 ins 下划线 i 倾斜 em 倾斜 s 删除线 del 删除线
3. 媒体标签
- 图片标签【
单标签
,img 标签展示对应的效果需要借助标签的属性进行设置】<img src="" alt="当图片不显示时,显示的文本" title="当鼠标悬停时才显示的文本">
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以
空格
隔开 - 标签名与属性之间必须以
空格
隔开【例如上面的img
与src
之间要用空格隔开】 - 属性之间没有顺序之分
- 音频标签【
双标签
】<audio src="" controls></audio>
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持) loop 循环播放 音频标签目前支持三种格式:MP3、Wav、Ogg
- 视频标签【
双标签
】<video src=""></video>
属性名 功能 src 视频的路径 controls 显示播放的控件 autoplay 自动播放(谷歌浏览器中需配合 muted 实现静音播放) loop 循环播放 视频标签目前支持三种格式:MP4、WebM、Ogg
4. 链接标签
- 【
双标签
】链接标签的作用就是点击之后,从一个页面跳转到另一个页面<a href="#" target="_blank">超链接</a>
target
有两种取值,一种是默认值_self
表示在当前窗口中跳转(覆盖原网页);一种是_blank
表示在新窗口中跳转(保留原网页)
5. 列表
-
无序列表【
双标签
】<ul> <li>榴莲</li> <li>苹果</li> <li>香蕉</li> </ul>
li
是无序列表的每一项ul
标签中只允许包含li
标签li
标签可以包含任意内容- 列表的每一项前默认显示圆点标识
-
有序列表【
双标签
】<ol> <li>100分</li> <li>80分</li> <li>70分</li> </ol>
ol
标签中只允许包含li
标签li
标签可以包含任意内容- 列表的每一项前默认显示序号标识
-
自定义列表【
双标签
】<dl> <dt></dt> <dd></dd> <dd></dd> <dd></dd> </dl>
dl
表示自定义列表的整体,用于包裹dt/dd
标签dt
表示自定义列表的主题dd
表示自定义列表的针对主题的每一项内容dl
标签中只允许包含dt/dd
标签dt/dd
标签可以包含任意内容dd
前默认显示缩进效果
6. 表格
- 使用场景:在网页中以行+列的单元格的方式整齐展示数据
<table border="1"> <caption></caption> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td colspan="2"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
table
表示整体,可用于包裹多个tr
tr
表示表示每行,可用于包裹td
td
表示单元格,可用于包裹内容border
属性表示边框宽度width
属性表示表格宽度height
属性表示表格高度caption
表示表格大标题,默认在表格整体顶部居中位置显示th
表示表头单元格,通常用于表格第一行,默认内部文字加粗并居中显示
- 表格的结构标签:让表格的内容结构分组,突出表格的不同部分,使语义更加清晰
标签名 名称 thead 表格头部 tbody 表格主体 tfoot 表格底部 - 合并单元格
- 跨行合并(垂直合并成一个):
rowspan
- 跨列合并(水平合并成一个):
colspan
- 上下合并只保留最上的,删除其他
- 左右合并只保留最左的,删除其他
- 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(thead、tbody、tfoot)
- 跨行合并(垂直合并成一个):
7. 表单
input
系列标签【单标签
】<input type="text" placehold="占位符,提示用户输入内容"> <!--文本框,用于输入单行文本 --> <input type="password" name="" id=""> <!--密码框,用于输入密码 --> <input type="radio" name="" id=""> <!--单选框,用于多选一 --> <input type="checkbox" name="" id=""> <!--多选框,用于多选多 --> <input type="file" name="" id=""> <!--文件选择,用于上传文件 --> <input type="submit" value=""> <!--提交按钮,点击之后提交数据给后端服务器 --> <input type="reset" value=""> <!--重置按钮,点击之后恢复表单默认值 --> <input type="button" value=""> <!--普通按钮,默认无功能,之后配合 js 添加功能 -->
radio
如果要实现分组的话,可以使用name
属性,有相同name
属性值的单选框为一组,一组中只能同时有一个被选中;如果想默认选中某一项,只需要添加checked
属性file
如果想要实现多文件选择,只需要添加multiple
属性- 如果需要实现按钮功能,需要配合
form
标签使用。用form
标签把表单标签一起包裹起来即可 value
是用于给按钮添加文字的
button
按钮标签<button type="">按钮上显示的文字</button>
type
属性有submit
、reset
和button
select
下拉菜单标签<select name="" id=""> <option value="" selected>北京</option> <option value="">上海</option> <option value="">广州</option> <option value="">深圳</option> </select>
select
标签是下拉菜单的整体option
标签是下拉菜单的每一项selected
属性是下拉菜单的默认选中
textarea
文本域标签<textarea name="" id="" cols="30" rows="10"></textarea>
- 在网页中提供可输入多行文本的表单控件
cols
规定了文本域中可见宽度rows
规定了文本域内可见行数
label
标签<label for=""></label>
- 常用于绑定内容与表单标签的关系
- 使用方法
方法 1:使用
label
标签把内容(如:文本)包裹起来,在表单标签上添加id
属性,最后在label
标签的for
属性中设置对应的id
属性值。
方法 2:直接使用label
标签把内容(如文本)和表单标签一起包裹起来,需要把label
标签的for
属性删除。
8. 语义化标签
- 没有语义布局标签:
div
、span
div
标签:一行只显示一个(独占一行)span
标签:一行可以显示多个
- 有语义的布局标签
标签名 语义 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 article 网页文章 以上标签显示特点和
div
一致,但是比div
多了不同的语义
9. 字符实体
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
' | 撇号 | ' |
¢ | 分(cent) | ¢ |
£ | 磅(pound) | £ |
¥ | 元(yen) | ¥ |
€ | 欧元(euro) | € |
§ | 小节 | § |
© | 版权(copyright) | © |
总结
每天学习一点点,快乐就会多一点
以上就是 HTML相关知识 笔记啦,小梁加油哦!!!