1、HTML基础

1.1、什么是网页？

       网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。

1.2、什么是HTML？

       HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。

1.3、常用的浏览器有哪些？

       常用的五大浏览器有：IE浏览器、火狐浏览器（Firefox）、g谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）

浏览器内核备注
IETridentIE、猎豹安全浏览器、360急速浏览器、百度浏览器
FirefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
Chrome/OperaBlinkBlink其实是Webkit的分支
1.4、什么是web标准？

       web 标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。

1.5、web标准的构成
标准作用
结构结构用于对网页元素进行整理和分类，主要指的是HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为行为是指网页模型的定义及交互的编写，主要指的是Javascript
1.6、web标准的好处有哪些？
  • 提高兼容性：对于浏览器开发商和web程序开发人员在开发新的应用程序时遵守指定的标准更利于web的发展。
  • 提高开发效率：开发人员按照web标准制作网页，这样对于开发者来说就更简单了，可以很容易了解彼此的代码。
  • 跨平台：使用web标签，将确保所有浏览器正常的显示网页，无需费时重写。
  • 加快网页解析速度：遵守web标准可以使网页更利于搜索引擎搜索。
  • 易于维护：页面的样式和布局信息保存在单独的CSS文件中，想改变页面外观时，仅需要修改CSS文件即可。

2、HTML基本标签

2.1、HTML页面固定结构
<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主题内容
    </body>
</html>
  • html标签：网页的整体
  • head标签：网页的头部
  • body标签：网页的身体
  • title标签：网页的标题
2.2、HTML标签分类
2.2.1 按闭合特征分类
  • 闭合标签：由开始标签和结束标签共同组成，成对出现；常见的闭合标签有<div></div><p></p>、<span></span>等。标签之间的关系可以存在并列及嵌套关系。
  • 单标签：指没有内容的标签，在开始标签中自带闭合标识符。常见的单标签有<img/>、<hr/>、<link/>、<meta/>、<input/>、<br/>等。
2.2.2 按显示模式分类
  • 块级元素：块级元素是指本身属性为display: block的元素。
  • 行内元素：行内元素是指本身属性为display: inline的元素，其宽度随着元素的内容变化而变化，也叫内联元素。
  • 行内块元素：行内块级元素是指本身属性为display: inline-block的元素

块级元素特点：

  • 每一个块级元素独占一行，从上到下排布。
  • 块级元素可以直接控制宽高。
  • 不设置宽度的情况下，块级元素的宽度是其父元素内容的宽度。
  • 不设置高度的情况下，块级元素的高度是他本身内容的高度。

常见的块级元素：

标签描述
div常见的块级容器，也是css和layout的主要标签
h1~h6一二三四五六级标题
hr水平分割线
menu菜单列表
ol、ul、li有序列表、无序列表、列表项
dl、dt、dd自定义列表、定义分类、类项描述
table表格
address定义地址
p段落
form交互表单

行内元素特点：

  • 行内元素会和其他元素从左到右的显示在一行。
  • 行内元素不能直接设置宽高，只可以设置内外边距的水平方向的值。也就是说，对行内元素设置margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的。垂直方向的margin和padding是无效的。
  • 行内元素只能容纳文本或者其他行内元素，不允许在行内元素中嵌套块级元素
  • 行内元素的宽高是由内容本身大小决定的。

常见行内元素：

标签描述
a锚点，链接标签
span常用的行内标签容器，定义文本内区块
sup上标文本
sub下标文本
strong加粗
ins下划线
em倾斜
del删除
labelinput元素的标注

行内块级元素特点：

  • 和其他行内或行内块级元素放置在同一行上
  • 元素的宽高和内外边距都可以设置

常见行内块级元素：

标签描述
button按钮
input输入框
textarea多行文本输入框
img图片
select下拉列表

3、路径的介绍

  • 绝对路径：指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如：D:\BaiduNetdisk\BaiduNetdisk.exe
  • 相对路径：从当前文件开始出发找目标文件的路径。
3.1、 相对路径的三种情况
  • 同级目录：直接写目标文件的名字，vscode在前面加./快速查找
  • 下级目录：直接写文件夹名/目标文件名字！，vscode在前面加在前面加./快速查找
  • 上级目录：…/目标文件的名字

4、HTML媒体和链接

4.1、 img图片标签
属性说明
src指定需要展示的图片路径
alt替换文本，当图片加载失败时，才显示的文字
title提示文本，当鼠标悬停时，才显示的文字
width图片的宽度
height图片的高度
4.2 audio音频标签
属性说明
src指定需要播放的音频路径
controls显示播放的控件
autoplay自动播放（部分浏览器不支持）
loop循环播放
4.3 video视频标签
属性说明
src指定需要播放的视频路径
controls显示播放的控件
autoplay自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop循环播放
4.4 a链接标签介绍
属性说明
href目标网页的路径
target跳转目标网页的打开形式。_self：默认值，在当前窗口跳转；_blank：在新窗口中跳转

5、列表标签

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

代码示例

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>凤梨</li>
    <li>葡萄</li>
    <li>桃子</li>
</ul>

效果

  • 香蕉
  • 苹果
  • 凤梨
  • 葡萄
  • 桃子
5.2、 有序列表
标签名说明
ol表示有序列表的整体，用于包裹li标签
li表示有序列表的每一项，用于包含每一行的内容

代码示例

<ol>
    <li>斗破苍穹</li>
    <li>斗罗大陆</li>
    <li>遮天</li>
    <li>盘龙</li>
    <li>仙逆</li>
</ol>

效果

  1. 斗破苍穹
  2. 斗罗大陆
  3. 遮天
  4. 盘龙
  5. 仙逆
5.3、 自定义列表
标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容

代码示例

<dl>
    <dt>购物指南</dt>
    <dd>购物流程</dd>
    <dd>会员介绍</dd>
    <dd>生活旅行</dd>
    <dd>常见问题</dd>
</dl>

效果

购物指南
购物流程
会员介绍
生活旅行
常见问题

6、table表格

6.1、 表格的标签
标签名说明
table表格整体，可用于包裹caption、thead、tbody、tfoot或直接包裹多个tr
caption表格整体大标题，默认在表格整体顶部居中位置显示
thead表格头部，用于包裹th
tbody表格主体，用于包裹td
tfoot表格底部，用于包裹td
tr表格每行，可用于包裹th,td
th表格小标题，通常用于表格第一行，默认内部文字加粗并且居中显示
td表格单元格，可用于包裹内容

代码示例

<table>
    <caption>成绩单</caption>
    <thead>
        <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>诸葛亮</td>
        <td>100分</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>司马懿</td>
        <td>97分</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>周瑜</td>
        <td>97分</td>
        <td>96分</td>
        <td>98分</td>
        </tr>
        <tr>
        <td>贾诩</td>
        <td>97分</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>郭嘉</td>
        <td>99分</td>
        <td>99分</td>
        <td>99分</td>
        </tr>
    </tbody>
    <tfoot>
        <td>平均分</td>
        <td>98分</td>
        <td>98.2分</td>
        <td>98.8分</td>
    </tfoot>
</table>

效果

成绩单
姓名语文数学英语
诸葛亮100分98分99分
司马懿97分98分99分
周瑜97分96分98分
贾诩97分98分99分
郭嘉99分99分99分
平均分98分98.2分98.8分
6.2、 表格相关属性
属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度
alignleft、right、center表格水平位置，也可以用于tr和td中，表示的是单元格内容的水平位置
bordercolorrbg、rbga、十六进制边框的颜色
cellpadding单元格的内容和边框之间的距离
cellspacing两个单元格之间距离的大小
bgcolor表格的背景色，也可以用于tr和td
background表格的背景图片，也可以单独的用于某一个单元格
6.3、 表格合并单元格
属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan合并单元格的个数跨列合并，将多列的单元格水平合并

代码示例

<table>
    <caption>成绩单</caption>
    <thead>
        <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>诸葛亮</td>
        <td>100分</td>
        <td rowspan="2">98分</td>
        <td rowspan="2">99分</td>
        </tr>
        <tr>
        <td>司马懿</td>
        <td rowspan="3">97分</td>
        </tr>
        <tr>
        <td>周瑜</td>
        <td>96分</td>
        <td>98分</td>
        </tr>
        <tr>
        <td>贾诩</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>郭嘉</td>
        <td align="center" colspan="3">99分</td>
        </tr>
    </tbody>
    <tfoot>
        <td>平均分</td>
        <td>98分</td>
        <td>98.2分</td>
        <td>98.8分</td>
    </tfoot>
</table>

效果

成绩单
姓名语文数学英语
诸葛亮100分98分99分
司马懿97分
周瑜96分98分
贾诩98分99分
郭嘉99分
平均分98分98.2分98.8分

7、form表单

7.1、 input系列标签的基本介绍
标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文件选择，用于之后上传文件
inputsubmit提交按钮，用于提交表单
inputreset重置按钮，用于重置表单
inputbutton普通按钮，默认无功能，之后配合js添加功能
7.2、 button系列标签的基本介绍
标签名type属性值说明
buttonsubmit提交按钮。点击之后提交数据给后台服务器
buttonreset重置按钮。点击之后恢复表单默认值
buttonbutton普通按钮。默认无功能
7.3、 select下拉菜单标签

标签组成：

  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项
    常见属性：
  • selected：下拉菜单的默认选中

代码示例

<select>
    <option>长海</option>
    <option selected>重庆</option>
    <option>西安</option>
</select>

效果

长海 重庆 西安
7.4、 textarea文本域标签

常见属性：

  • cols：规定了文本域内可见宽度
  • rows：规定了文本域内可见行数
7.5、 label标签

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

使用方法一

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

使用方法二

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

8、常见字符实体

显示结果描述实体名称
' '空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
"引号&quot;
’撇号&apos;
¢分（cent）&cent;
£榜（pound）&pound;
¥元（yen）&yen;
€欧元（euro）&euro;
§小节&sect;
©版权（copyright）&copy;

9、有语义的布局标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章
# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟