HTML学习笔记

果酱14
126 阅读7分钟

HTML

基础认知

浏览器内核不一样，展示效果不太同

web标准构成

结构——HTML
表现——CSS
行为——JS

HTML

HTML骨架结构

网页类似于一篇文章，内容是固定结构的
网页中的固定结构是要通过特点的HTML标签及进行描述的

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的内容
    </body>
</html>

HTML标签与标签之间的关系

父子关系（嵌套关系）
兄弟关系（并列关系）

HTML标签

标题标签

场景：用来凸显文章主题

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

特点
文字都有加粗、变大，且从h1至h6递减，独占一行

段落标签

场景：用于分段显示

<p> </p>

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

换行标签

场景：让文字强行换行显示

<br>

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

水平分割线

场景：分割不同主题内容的水平线

<hr>

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

文本格式化标签

<b>加粗</b>
<strong>加粗</strong>

<u>下划线</u>
<ins>下划线</ins>

<i>倾斜</i>
<em>倾斜</em>

<s>删除线</s>
<del>删除线</del>

<!-- 在下面的均为强调的一组 -->

媒体标签

图片标签

<!-- 显示图片 -->
<img src="" alt="" title="" width="">
<!-- 特点 单标签 img标签需要展示对应的效果，需要借助标签属性进行设置 -->
<!-- src 图片路径 -->
<!-- alt 替换文本 图片不显示时显示 -->
<!-- title 提示文本 当鼠标悬停时，才显示的文本 还可以用于其他标签 -->
<!-- width height 宽度和高度(数字) 只设置一个，另一个等比例缩放 都设置若设置不当，图片变形 -->

路径

绝对路径
目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

相对路径
从当前文件开始出发找目标文件的过程

相对路径分类
同级目录
下级目录
上级目录

<img src="目标图片.jpg">
<img src="./目标图片.jpg">

上级目录
目标文件在上级目录中

<img src="../">
<!-- 返回几级几个. -->

音频

<audio src="" controls></audio>

常见属性

属性名功能
src音频的路径
controls显示播放的控件
autoplay自动播放(部分浏览器不支持)
loop循环播放

注意点
音频标签目前支持三种格式: MP3 Wav Ogg

视频

<video src="" controls></video>

常见属性

属性名功能
src音频的路径
controls显示播放的控件
autoplay自动播放(谷歌需要搭配muted实现静音播放)
loop循环播放

注意点
视频标签目前支持的三种格式: MP4 WebM Ogg

链接

<a href="./目标网页.html">超链接</a>

特点
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
herf也可以写路径

target _self：默认值，在当前窗口中跳转（覆盖原网页） _blank：在新窗口跳转（保留原网页）

<a href="https://www.baidu.com" target="_blank">超链接</a>

列表标签

无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。 标签组成：

标签名说明
ul表示无序列表的整体，用于包裹li标签
li表示无序列表的每一项，用于包含每一行的内容

显示特点：
列表的每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容

<ul>
    <li>内容</li>
</ul>

有序列表

<ol>
    <li>内容</li>
</ol>

其他同上

自定义列表

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

显示特点：
dd前会默认显示缩进效果
注意点：
dl标签中只允许包含dt/dd标签
dd/dt标签可以包含任意内容

表格

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

嵌套关系
table>tr>td

相关属性

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

表格标题和表头单元格标签 场景：在表格中表示整体大标题和一列小标题
其他标签：

属性名属性值效果
caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点
caption标签在table标签内部
th标签书写在tr标签内部（用于替换td标签）

合并单元格
水平或垂直单元格合并为一个

合并单元格步骤

  1. 明确合并那几个单元格
  2. 通过坐上原则，确定保留谁删除谁
  3. 给爆裂的单元格设置：
属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行单元格垂直合并
colspan合并单元格的个数跨列合并，将多列单元格竖直合并
<tr>
    <td>zs</td>
    <td rowspan="2">100</td>
    <td>good</td>
</tr>
<tr>
    <td>ls</td>
    <td>fine</td>
</tr>

表单

input系列标签

input标签可以根据type属性值不同，展示效果不同
type属性值：

标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文件选择，用于之后上传文件
inputsubmit提交按钮，用于提交
inputreset重置按钮，用于重置
inputbutton普通按钮，默认无功能，之后搭配js添加功能
inputplaceholder占位符，提示用户输入内容的文本
<input type="text">

input——单选框

属性名说明
name分组。有相同name属性值的单选框为一组，一组中同时只能由一个被选中
checked默认选中

注意点
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

input——文件选择

multiple 多文件选择

input——按钮

type属性值说明
submit提交按钮，点击之后提交数据给后端服务器
reset重置按钮，点击之后回复默认表单
button普通按钮，默认无功能，之后搭配js使用

注意点
如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可

select

场景：在网页中提供多个选择项的下拉菜单控件
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</selected>

textarea

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

注意点：
右下角可以拖拽改变大小
实际开发针对样式效果推荐用CSS设置

label标签

场景：常用于绑定内容与表单标签的关系
标签名：label

使用方法1：
使用label标签把内容包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

使用方法2： 直接把label标签把内容和表单标签一起包裹起来
需要把label标签的for属性删除即可

<!-- 方法1 -->
<body>
    性别：
    <!-- 方法1 -->
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <!-- 方法2 -->
    <label><input type="radio" name="sex">女</label>
</body>

语义化标签

没有语义布局标签（div span）
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

有语义的布局标签
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签

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

注意点
以上标签显示特点和div已知，但是比div多了不同的语义

字符实体

常见字符实体（符号均为英文符号）

显示结果描述实体名称
空格&nbsp；
avatar
文章
阅读
粉丝