HTML - 总结笔记

Hi-郑郑

已于 2022-06-11 23:20:08 修改

阅读量538

点赞数

分类专栏：自我总结-笔记文章标签：前端

于 2022-04-10 15:42:03 首次发布

本文链接：https://blog.csdn.net/hi_zh/article/details/124079375

版权

自我总结-笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML部分(超文本标记语言)

前端通过什么软件转换成用户眼中的页面的
五大浏览器
为什么需要Web标准
Web标准中分成三个构成
HTML骨架结构
HTML的注释
HTML的标签结构
HTML标签与标签之间的关系
排版标签
文本格式化标签
文本格式化标签
链接标签
列表标签
表格标签
表单标签
语义化标签
字体实符

1. 前端通过什么软件转换成用户眼中的页面的

通过浏览器转化（解析和渲染）成用户看到的网页

2. 五大浏览器

IE浏览器[内核:Trident]、火狐浏览器（Firefox）[内核:Gecko]、谷歌浏览器（Chrome）[内核:Blink]、Safari浏览器[内核:Webkit]、欧朋浏览器（Opera）[内核:Blink]

3. 为什么需要Web标准？

让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

4. Web标准中分成三个构成：

HTML（页面元素）、CSS（页面样式）、JavaScript（页面交互）

5. HTML骨架结构

```html
<html>    <!--网页的整体-->
<heat>    <!--网页的头部-->
    <title>网页的标题</title>    <!--网页的标题-->
</head>
<body>    <!--网页的主题内容-->
    网页的主题内容
</body>
</html>
```

6.HTML的注释

1. 注释语法
```

```
  - 注释是让程序员观看的，注释部分不会被浏览器渲染
  - 快捷键 ctrl + /

7. HTML的标签结构

单标签
```
<br>
```

双标签

<strong>两个尖括号之间的文字被加粗</strong>

8. HTML标签与标签之间的关系

父子关系（嵌套关系）
```
<head>
    <title></title>
</head>
```
兄弟关系（并列关系）
```
<head>
</head>
<body>
</body>
```

9. 排版标签

标题标签
段落标签
换行标签
水平线标签

9.1 标题标签

代码

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义
- 1~6级标题，重要程度依次递减
特点
- 文字都有加粗
- 文字都变大，并且从h1 → h6文字逐渐减小
- 独占一行
注意点
- h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

9.2 段落标签

代码
```
<p>我是第一段文字</p>
```
语义

段落

特点
- 段落之间存在间隙
- 独占一行

9.3 换行标签

代码
```
<br>
```
语义

换行

特点
- 单标签
- 让文字强制换行

9.4 水平线标签

代码
```
<hr>
```
语义

主题的分割转换

特点
- 单标签
- 在页面中显示一条水平线

10. 文本格式化标签

代码

<!-- 普通语义 -->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<!-- 强调语义 -->
<strong>加粗</strong>
<em>斜体</em>
<ins>下划线</ins>
<del>删除线</del>

语义
- 突出重要性的强调语境

11. 媒体标签

图片标签
路径
音频标签
视频标签

11.1 图片标签

代码
```
<img src="" alt="">
```
属性
- src=“” 路径
- alt=“” 图片失效时显示的文字
- title=“” 鼠标停留在图片上时显示的文字
特点
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置！

11.2 路径

绝对路径
- 本地路径 - 从盘符开始写到目标位置
- 外地路径 - 完整的网络地址 - http://www.baidu.com

相对路径

同级目录
```
<img src="./1.jpg">
```
下级目录
```
<img src="./images/1.jpg">
```
上级目录
```
<img src="../images/1.jpg">
```

11.3 音频标签

代码
```
<audio src="" controls></audio>
```
属性
- scr=“” 路径
- controls 显示播放的控件
- autoplay 自动播放（部分浏览器不支持）
- loop 循环播放
注意
- 音频标签目前支持三种格式：MP3、Wav、Ogg

11.4 视频标签

代码
```
<video src="" controls></video>
```
属性
- src=“” 路径
- controls 显示播放的控件
- autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
- loop 循环播放
注意点
- 视频标签目前支持三种格式：MP4 、WebM 、Ogg

12. 链接标签

代码

<a href="" target="_blank">链接文字</a>

属性
- href=“” 跳转地址（路径）
- target=“” 打开方式
  - _blank 新的窗口打开
  - _ self 默认为当前页面打开
特点
- a标签默认文字有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
注意
- href=“#” 开发中不确定该链接最终跳转位置，用空链接占个位置

13. 列表标签

无序列表
有序列表
自定义列表

13.1 无序列表

代码
```
<ul>
	<li></li>
```

```

特点

列表的每一项前默认显示圆点标识

注意
- ul标签中只允许包含li标签
- li标签可以包含任意内容

13.2 有序列表

代码
```
<ol>
	<li></li>
</ol>
```
特点

列表的每一项前默认显示圆点标识

注意
- ol标签中只允许包含li标签
- li标签可以包含任意内容

13.3 自定义列表

代码

<dl>
	<dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

特点

dd前会默认显示缩进效果

注意
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容

14. 表格标签

代码

<table>
    <caption>表格的大标题</caption>
    <!-- 表格的头部部分 -->
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <!-- 表格的身体部分 -->
    <tbody>
        <tr>
            <!-- 跨列合并 -->
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- 跨行合并 -->
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
        </tr>
    </tbody>
    <!-- 表格的尾部部分 -->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

属性

border=“1” 边框为1 - 写在table标签里

注意
- caption标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签）
- 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
- 合并单元格步骤
  - 1. 明确合并哪几个单元格
  - 1. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
  - 1. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan） • rowspan：跨行合并→垂直方向合并 • colspan：跨列合并→水平方向合并

15 表单标签

input系列标签
button按钮标签
select下拉菜单标签
textarea文本域标签
label标签

15.1 input系列标签

代码

<form>  
    <!-- 文本框 -->
    <input type="text">  
    
    <!-- 密码框 -->
    <input type="password">

    <!-- 单选框 想要实现单选，必须name是一样的 -->
    <!-- 默认选中添加 checked 属性 -->
    <input type="radio">

    <!-- 多选框  -->
    <!-- 默认选中添加 checked 属性 -->
    <input type="checkbox">

    <!-- 文件选择 -->
    <input type="file">

    <!-- 提交按钮 提交表单域里 收集的信息 -->
    <input type="submit">

    <!-- 重置按钮 重置表单域里 填写的信息  前提 有表单域 -->
    <input type="reset">

    <!-- 普通按钮 默认没功能 -->
    <input type="button">
</form>

属性
- placeholder 占位符。提示用户输入内容 - - text - password内用
- checked 默认选中 - - radio - checkbox内用
- multiple file中用 - - 多文件选择
- value属性：用户输入的内容，提交之后会发送给后端服务器
- name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
- 后端接收到数据的格式是：name的属性值 = value的属性值

15.2 button按钮

代码

<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮，没有任何作用</button>

注意
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等

15.3 select下拉菜单标签

代码

<form action="">
        请选择您的家乡：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>杭州</option>
            <option selected>石家庄</option>
        </select>
    </form>

属性
- selected 下拉菜单默认选中

15.4 textarea文本域标签

代码

<form>
    个人简介：
    <br><br>
    <textarea cols="50" rows="10"></textarea>
</form>

属性
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
注意
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置

15.5 label标签

代码

<form>
    性别：
    <!-- 方法一  利用label标签里的for属性跳转到input标签里id的属性值-->
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <!-- 方法二  直接用label标签把整个包含起来-->
    <label> <input type="radio" name="sex">女</label>
</form>

使用方法
- 1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值
- 1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可

16. 语义化标签

代码

<div></div>
<span></span>

<!-- HTML5新增有语义化标签 -->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>