HTML基础

最新推荐文章于 2024-09-06 23:41:09 发布

初冬二十七

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量164

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_63856981/article/details/131614615

版权

HTML入门

HTML标签

标签又称元素，是HTML的基本组成单位
标签分类：双标签与单标签（绝大部分都是双标签）
标签名不区分大小写，但推荐小写
双标签：
单标签：

在这里插入图片描述

HTML标签属性

用于给标签提供附加信息
可以写在：起始标签或单标签中

在这里插入图片描述

有些特殊的属性，没有属性名，只有属性值
```
<input disabled>
```

HTML基本结构

网页的 基本结构

想要呈现在网页的内容写在body标签中
head标签中的内容不会出现在网页
head标签中的title标签可以指定网页的标题

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        .....
    </body>
</html>

安装live server插件

可以更加方便打开网页
打开网页的方式更加贴近项目上线（开启本地服务器端口）
代码出现改动，可以自动刷新

务必使用VScode打开的是文件夹,否则live server插件无法正常工作
打开的网页必须是标准的HTML结构,否则无法自动刷新

HTML注释

快捷键: ctrl + / 或者 shift + alt + a

HTML文档声明

作用: 告诉浏览器当前网页的版本

新写法: 下面写法是声明HTML5

<!DOCTYPE html>
	  或
<!DOCTYPE HTML>
	  或
<!doctype html>

注意: 文档声明,必须在网页的第一行,且在html标签的外侧

HTML字符编码

计算机对数据的操作：
- 存储时，对数据进行：编码。
- 读取时，对数据进行：解码。
编码，解码，会遵循一定的规范–字符集
使用原则：

原则1：存储时，务必采用合适的字符编码

否则：无法存储，数据会丢失

原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码

否则：数据错乱
总结：
- 平时编写代码，统一采用 UTF-8 (包含世界所有语言)
- 为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码。
```
<head>
	    
    <meta charset="UTF-8"/> 
</head>
```

HTML设置语言

主要作用：
- 让浏览器显示对应的翻译提示
- 有利于搜索引擎优化

具体写法：

<html lang="zh-CN">
    <!-- lang属性：language 属性值：（ 语言-国家/地区 ）-->
</html>

HTML标准结构

HTML标准结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <title>标题</title>
    </head>
    <body></body>
</html>

输入 ! ，随后回车即可快速生成标准结构
配置 VScode 的内置插件 emmet , 可以对生成结构的属性进行定制。

HTML基础

开发者文档

W3C官网: https://www.w3c.org
MDN: https://developer.mozilla.org/zh-CN/

语义化标签

概念：用特定的标签，去表达特定的含义
原则：标签的默认效果不重要（后期可以通过CSS控制），语义最重要

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）。
行内元素：不独占一行（目前只学了： input ，稍后会学习更多）。
使用原则：
1. 块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
2. 行内元素 中能写 行内元素，但不能写 块级元素。
3. 特殊情况：
  - h1-h6 不能互相嵌套
  - p 中不要写块级元素

图片标签

基本使用

标签名	常用属性	单/双标签
`img`	`src` ：图片路径 `alt` ：图片描述 `width` ：图片宽度，单位像素(`px`) `height` ：图片高度，单位像素(`px`)	单

总结：

尽量不同时修改图片的宽和高，可能会造成比例失调。
img 是行内块元素
alt 属性的作用：
- 搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。
- 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
- 盲人阅读器会朗读 alt 属性的值。

路径分类

1.相对路径：以当前位置作为参考点，去建立路径

符号	含义
`./`	同级
`/`	下一级
`../`	上一级
`../../`	上两级

注意：

相对路径的 ./ 可以省略不写
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

2.绝对路径：以根位置作为参考点，去建立路径

本地绝对路径：E:/a/b/c/奥特曼.jpg
网络绝对路径：http://www.atguigu.com/images/index_new/logo.png

注意：

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。

超链接

主要作用：从当前页面进行跳转

可以实现：

跳转到指定页面
跳转到指定文件（也可触发下载）
跳转到锚点位置
唤起指定应用

标签名	常用属性	单/双标签
超链接	`href` ：指定要跳转到的具体目标 `target` ：控制跳转时如何打开页面，常用值如下: `_self` ：在本窗口打开；`_blank` ：在新窗口打开 `id` ：元素的唯一标识，可用于设置锚点 `name` ：元素名字，写在 `a` 标签中，也能设置锚点	双

跳转页面

<!-- 跳转其他网页 -->
<a href="https://developer.mozilla.org/zh-CN/" target="_blak">去MDN</a>
<!-- 跳转本地网页 -->
<a href="https://developer.mozilla.org/zh-CN/" target="_self">去MDN</a>

注意：

代码中的多个空格，多个回车，都会被浏览器解析成一个空格
虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！

跳转文件

<!-- 直接用浏览器打开 -->
<a href="./resource/小电影.mp4">看电影</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意1：若浏览器无法打开文件，则会引导用户下载

注意2：若想强制触发下载，请用 download 属性。属性值即为下载文件默认名称

跳转锚点

什么是锚点？–网页中的一个标记点

具体使用方式：

第一步：设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：在其他标签中配合id属性 -->
<p id="test2">我是一个锚点</p>

注意：

具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点
id 最好别是数字开头

第二步：跳转锚点

<!-- 跳转到test1锚点 -->
<a href="#test1">跳转test1锚点</a>

<!-- 跳转到本页顶部 -->
<a href="#">跳转到本页顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href="">刷新本页面</a>

<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

唤起指定应用

通过 a 标签，可以唤起设备应用程序。

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

列表

有序列表

ordered list（ol）：有顺序或侧重顺序的列表

list item（li）：列表项

<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ol>

无序列表

unordered list（ul）：无顺序或不侧重顺序的列表。

list item（li）：列表项

<ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
</ul>

列表嵌套

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。

注意： li 标签最好写在 ul 或 ol 中，不要单独使用。

自定义列表

所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个）。

<h2>如何高效的学习？</h2>
<dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

表格

基本结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
表格涉及到的标签：

table ：表格

caption ：表格标题

thead ：表格头部

tbody ：表格主体

tfoot ：表格注脚

tr ：每一行

th ，td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

在这里插入图片描述

具体编码

<table border="1" cellspacing="0">
    <!-- 表格标题 -->
    <caption>学生信息</caption>
    <!-- 表格头部 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
            <td>满族</td>
            <td>群众</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>20</td>
            <td>回族</td>
            <td>党员</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>女</td>
            <td>21</td>
            <td>壮族</td>
            <td>团员</td>
        </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>共计：4人</td>
        </tr>
    </tfoot>
</table>

常用属性

标签名	标签语义	常用属性	单/双标签
`table`	表格	`width` ：设置表格宽度 `height` ：设置表格最小高度，表格最终高度可能比设置的值大 `border` ：设置表格边框宽度 `cellspacing` ：设置单元格之间的间距	双
`thead`	表格头部	`height` ：设置表头部高度 `align` ：设置单元格的水平对齐方式，可选值如下：`left` （左对齐）,`center` （中间对齐）,`right` （右对齐） `valign` ：设置单元格的垂直对齐方式，可选值如下：`top` （顶部对齐）,`middle` （中间对齐）,`bottom` （底部对齐）	双
`tbody`	表格主体	常用属性与 `thead` 相同。	双
`tfoot`	表格注脚	常用属性与 `thead` 相同。	双
`tr`	行	常用属性与 `thead` 相同。	双
`td`	普通单元格	`width` ：设置单元格宽度，同列所有单元格全都受影响。 `height` ：设置单元格的高度，同行所有单元格全都受影响。 `align` ：设置单元格的水平对齐方式。 `valign` ：设置单元格的垂直对齐方式。 `rowspan` ：指定要跨的行数。 `colspan` ：指定要跨的列数。	双
`th`	表头单元格	常用属性与 `td` 相同。	双

注意点：

<table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，

只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。

默认情况下，每列的宽度，得看这一列单元格最长的那个文字。

给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。

给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

常用标签

标签名	标签含义	单/双标签
`br`	换行	单
`hr`	分隔	单
`pre`	按原文显示（一般用于在页面中嵌入大段代码）	双

注意：

不要用 <br> 来增加文本之间的行间隔，应使用 p 元素，或后面即将学到的 CSS margin 属性。
hr 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。

表单

概念：一个包含交互的区域，用于收集用户提供的数据。

基本结构

标签名	标签语义	常用属性	单/双标签
`form`	表单	`action` ：用于指定表单的提交地址（需要与后端人员沟通后确定）。 `target` ：用于控制表单提交后，如何打开页面，常用值如下：`_self` （在本窗口打开），`_blank` ：（在新窗口打开） `method` ：用于控制表单的提交方式，暂时只需了解，在后面 `Ajax` 的课程中，会详细讲解。	双
`input`	输入框	`type` ：设置输入框的类型 `name` ：用于指定提交数据的名字，（需要与后端人员沟通后确定）。	单
`button`	按钮	本节不涉及	双

示例代码：

<form action="https://www.baidu.com/s" target="_blank" method="get">
    <!-- name值为wd是百度规定的 -->
	<input type="text" name="wd">
    <button>去百度搜索</button>
</form>

常用表单控件

文本输入框

<input type="text">

常用属性：

name ：数据名称

value ：输入框的默认输入值

maxlength ：输入框最大可输入长度

密码输入框

<input type="password">

常用属性跟文本输入框一样

单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性：

name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。

value 属性：提交的数据值。

checked 属性：让该单选按钮默认选中。不需要属性值

复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性：

name 属性：数据的名称。

value 属性：提交的数据值。

checked 属性：让该复选框默认选中。

隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。

name 属性：指定数据的名称。

value 属性：指定的是真正提交的数据。

提交按钮

<input type="submit" value="点我提交表单">
<!-- button中type默认值为submit -->
<button type="submit">点我提交表单</button>

注意：

button 标签 type 属性的默认值是 submit 。
button 不要指定 name 属性
input 标签编写的按钮，使用 value 属性指定按钮文字。

重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意点：

button 不要指定 name 属性
input 标签编写的按钮，使用 value 属性指定按钮文字。

普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性如下：

rows 属性：指定默认显示的行数，会影响文本域的高度。
cols 属性：指定默认显示的列数，会影响文本域的宽度。
不能编写 type 属性，其他属性，与普通文本输入框一致。

下拉框

<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>

常用属性及注意事项：

name 属性：指定数据的名称。
option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
option 标签设置了 selected 属性，表示默认选中。

禁用表单控件

给表单控件的标签设置 disabled 既可禁用表单控件。

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

label标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

让 label 标签的 for 属性的值等于表单控件的 id 。
把表单控件套在 label 标签的里面。

示例代码：

<!-- 方式1 -->
<label for="1">用户名：</label>
<input type="text" name="acount" id="1">
<!-- 方式2 -->
<label>
    密码：
    <input type="text" name="password">
</label>

fieldset 与 legend 的使用（了解）

fieldset 可以为表单控件分组、 legend 标签是分组的标题。

示例：

<fieldset>
    <legend>主要信息</legend>
    <label for="zhanghu">账户：</label>
    <input id="zhanghu" type="text" name="account" maxlength="10"><br>
    <label>
        密码：
        <input id="mima" type="password" name="pwd" maxlength="6">
    </label>
    <br>
    性别：
    <input type="radio" name="gender" value="male" id="nan">
    <label for="nan">男</label>
    <label>
        <input type="radio" name="gender" value="female" id="nv">女
    </label>
</fieldset>

表单总结

标签名	标签语义	常用属性	单/双标签
`form`	表单	`action` ：表单提交的地址 `target` ：要跳转的新地址打开位置; 值: `_self` 、 `_blank` `method` ：请求方式	双
`input`	多种形式的表单控件	`type` ：指定表单控件的类型。值：`text` 、 `password` 、 `radio` 、 `checkbox` 、 `hidden` 、 `submit` 、 `reset` 、 `button` 等。 `name` ：指定数据名称 `value` ：对于输入框：指定默认输入的值；对于单选和复选框：实际提交的数据；对于按钮：显示按钮文字。 `disabled` ：设置表单控件不可用。 `maxlength` ：用于输入框，设置最大可输入长度。 `checked` ：用于单选按钮和复选框，默认选中	单
`textarea`	文本域	`name` ：指定数据名称 `rows` ：指定默认显示的行数，影响文本域的高度。 `cols` ：指定默认显示的列数，影响文本域的宽度。 `disabled` ：设置表单控件不可用。	双
`select`	下拉框	`name` ：指定数据名称 `disabled` ：设置整个下拉框不可用。	双
`option`	下拉框的选项	`disabled` ：设置拉下选项不可用。 `value` ：该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据） `selected` ：默认选中。	双
`button`	按钮	`disabled` ：设置按钮不可用。 `type` ：设置按钮的类型，值： `submit` （默认）、 `reset` 、 `button`	双
`label`	与表单控件做关联	`for` ：值与要关联的表单控件的ID值相同。	双

框架标签

标签名	功能和语义	属性	单/双标签
`ifram`	框架（在网页中嵌入其他文件）	`name` ：框架名字，可以与 `target` 属性配合。 `width` ：框架的宽。 `height` ：框架的高度。 `frameborder` ：是否显示边框，值：0 或者1。	双

iframe 标签的实际应用：

在网页中嵌入广告
与超链接或表单的 target 配合，展示不同的内容。

<iframe src="https://www.bilibili.com/" frameborder="0" width="1519" height="1020"></iframe>
<!-- 与超链接的target配合使用 -->
<a href="https://www.bilibili.com" target="tt">点我</a>
<iframe src="tt" frameborder="0" width="900" height="300"></iframe>

HTML实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。

字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ; 。

	描述	实体名称
	空格	` `
<	小于	`<`
>	大于	‘&gt’
&	和号	`&amp`

HTML全局属性

常用全局属性

属性名	含义
`id`	给标签指定唯一标识，注意： `id` 是不能重复的。作用：可以让 `label` 标签与表单控件相关联；也可以与 `CSS` 、 `JavaScript` 配合使用，。
`class`	给标签指定类名，随后通过 `CSS` 就可以给标签设置样式。
`style`	给标签设置 `CSS` 样式。
`dir`	内容的方向，值: `ltr` 、 `rtl`
`title`	给标签设置一个文字提示，一般超链接和图片用得比较多。
`lang`	给标签指定语言

个分号 ; 。

	描述	实体名称
	空格	` `
<	小于	`<`
>	大于	‘&gt’
&	和号	`&amp`

HTML全局属性

常用全局属性

属性名	含义
`id`	给标签指定唯一标识，注意： `id` 是不能重复的。作用：可以让 `label` 标签与表单控件相关联；也可以与 `CSS` 、 `JavaScript` 配合使用，。
`class`	给标签指定类名，随后通过 `CSS` 就可以给标签设置样式。
`style`	给标签设置 `CSS` 样式。
`dir`	内容的方向，值: `ltr` 、 `rtl`
`title`	给标签设置一个文字提示，一般超链接和图片用得比较多。
`lang`	给标签指定语言