• 【web前端开发】HTML知识点超详细总结

    文章目录

    1.什么是网页

    网页是构成网站的基本元素，是承载各种网站应用的平台

    网页通常是指HTML格式的文件 文件扩展名为.html或.htm 它通过浏览器来阅读
    HTML不是一种编程语言,而是一种标记语言

    2.常用的浏览器及内核

    常用的浏览器有 IE浏览器（Internet explorer）火狐浏览器 谷歌(chrome) Safari浏览器 Opera浏览器

    浏览器内核（Rendering Engine），是指浏览器最核心的部分，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页

    浏览器内核说明
    IETridentIE、猎豹安全、360极速浏览器、百度浏览器
    firefoxGecko火狐浏览器内核
    Safariwebkit苹果浏览器内核
    chromeChromium/Blink大部分国产浏览器最新版都采用Blink内核
    OperaBlink跟随chrome使用Blink内核,Blink其实是webkit的分支

    3.VScode和WebStrom使用

    工欲善其事,必先利其器.前端开发的软件有很多,下面给大家介绍一下VScode和WebStrom的使用,我们可以在VScode和WebStrom上写一些HTML文件

    VScode
    下载地址:https://code.visualstudio.com/
    WebStorm
    下载地址:https://www.jetbrains.com/webstorm/

    使用VScode要下载一些插件,如果嫌麻烦,可以使用WebStorm.

    4.HTML常用标签

    在讲HTML标签之前,先看下面这段代码:

    DOCTYPE html>
<html lang="en">
<head>
    <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>Documenttitle>
head>
<body>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    我们平时在使用编译器编写前端内容的时候，会生成这样一些代码，这些代码就相当于HTML的骨架了,下面给大家简单解释一下这些代码是什么意思

    5.文档类型

    <!DOCTYPE>文档类型的声明，作用是告诉浏览器是以那种HTML版本来显示网页
其中要注意两点：
 - DOCTYPE html> 这句代码的意思就是说当前是以HTML5版本来显示网页的
 - <!DOCTYPE>不是HTML5的标签，只是文档类型声明标签

    • 1
    • 2
    • 3
    • 4

    6.网页语言lang

    <html lang="en">

    • 1

    lang是用来定义语言的种类

    • en 定义的语言为英语
    • zh-CN 定义的语言为中文

    在这里插入图片描述
    出现这个就说明当前网页是一个英语网站,定义的语义为英语

    7.字符集

    <meta charset="UTF-8">

    • 1

    字符集（Character set）是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。

    • UTF-8也叫万国码 ，是最常用的字符集编码方式，基本上包含了所有国家需要用到的字符。

    8. title标签

    定义文档的标题, 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上

    <title>Documenttitle>  
title标签里面的内容可以自己修改

    • 1
    • 2

    简单来说就是设置网页的名字
    在这里插入图片描述

    9.标题标签

    在HTML中,标题标签一共有6种,如下:

    <body>
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    <h4>四级标题h4>
    <h5>五级标题h5>
    <h6>六级标题h6>
    <p>文本p>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    效果图:
    在这里插入图片描述
    h1~h6标题标签文字是逐渐变小的,一般常用的是h4标题标签.

    10.段落和换行标签

    <p>p>标签用于定义段落 可以将文档文字分成若干段落
大家理解为是写作文,作文中的每一段文字就在一对<p>p>里面
文本在浏览器中会根据游览器大小子自动换行 
段落与段落之间有空隙

    • 1
    • 2
    • 3
    • 4
    <br> 强制换行标签  是一个单标签
段落与段落之间的距离比较大,换行之间的距离比较小

    • 1
    • 2

    11.文本格式化标签

    在网页中,有些内容需要以特殊方式显示,这时就需要用到文本格式化标签
    常用的文本格式化标签如下:

    加粗标签:<strong>strong>
粗体标签:<b>b>

倾斜:<em>em>
斜体:<i>i>

闪烁标签:<blink>blink>
放大标签:<big>big>
缩小标签:<small>small>

上标效果标签: <sup>sup>
下标效果标签: <sub>sub>

删除线标签:<del>del>和<s>s>
下划线标签:<ins>ins>和<u>u>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    12.div和span标签

    <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    div和span是没有语义的,它们就是盒子,用来放内容的

    13.图像标签

    <img> 单标签 
<img src = "图片路径" > 

    • 1
    • 2

    下面是一些图像标签中一些常见属性:

    属性属性值说明
    src图片路径必须要有的属性
    alt文本替换文本,图片不能正常显示时,显示文本
    title文本提示文本,鼠标放在图片上,显示的文字
    width像素设置图片宽度
    height像素设置图片高度
    border像素设置图片边框

    图像标签的注意点:

    • 图像可以有多个属性,必须在标签名后面
    • 属性之间不分先后
    • 属性采用键值对的格式,即 “属性 = 属性值”

    14.路径

    14.1 相对路径

    相对路径就是以引用图片作为参考,得到的路径
    相对路径分为3种 同一级路径,上一级路径和下一级路径

    (1)同一级路径

    在这里插入图片描述
    以图片文件举例,这里的图片文件和HTML文件就是在web文件夹里面,这就是同一路径下,此时如果要引用这里的图片文件就可以这么写:

    <img src="1.png"/>  

    • 1

    (2)上一级路径:

    在这里插入图片描述

    index2文件是code文件夹里的,而code文件夹和1.png这个图片文件都在WEB文件夹下,那么1.png文件就是在index2的上一级路径
    如果在index2里面引用1.png文件的话,写法如下:

    <img src="../1.png"/> 
../就是返回上一级路径  
../ ../就是返回上两级路径 以此类推

    • 1
    • 2
    • 3

    (3)下一级路径

    在这里插入图片描述
    如果index1要引用images里面的2.png路径,因为index1与images文件是同一级,图片在images文件夹里面,那么图片文件就是在index1的下一级路径
    如果index1文件要引用2.png图片文件的话,写法如下:

    <img src="images/2.png" />

    • 1

    14.2 绝对路径

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

    例如:
    在这里插入图片描述
    这个一般使用的很少,毕竟这只是我电脑里的文件,别人电脑在我这个路径下没有我想要的文件

    15.链接标签

    15.1 超链接标签

    (1)外部链接:

    <a> 标签用于定义超链接标签 作用是跳转到另一个链接
语法格式:
<a href="跳转链接", target="目标窗口的弹出方式">文本或者图像a>

    • 1
    • 2
    • 3
    属性作用
    href用于指定目标的url地址,从而实现超链接(必有属性)
    target用于指定连接的打开方式,_self是将当前页面跳转到链接地址,_blank是以新窗口打开

    (2) 内部链接:

    在这里插入图片描述
    链接标签也可以跳转到写好的HTML界面,例如我要在test里面设置一个超链接跳转到index1的界面,那么可以这么写:

     <a href="index1.HTML">文本或者图片a> #同一级路径

    • 1

    (3) 空链接:

    如果没有想好跳转的地址,就可以使用空链接

    <a href="#">文本或者图片a>

    • 1

    15.2 下载链接

    下载链接地址是文件(.exe 或者是zip等压缩包形式) 跳转后会自动下载文件

    16.锚点链接

    锚点链接:当我们点击链接,可以跳转到页面中的某个位置

    • 在链接文本的href属性中,设置属性名为"#名字"的形式
    • 在目标标签中,添加一个属性 id = 刚才的名字

    17.注释与空格符

    注释在写代码时还是很重要的,如果代码很多,如果要改之前写的某个地方,就非常难找.那么在写代码时就可以写注释标识一下,这里写的是什么内容. 方便后续的检查和修改 . 一般编译器都有自己生成注释的快捷键,我只用过WebStorm和VScode,快捷键都是 ctrl + / 如果不喜欢也可以自定义快捷键

    然后在HTML中会有一些特殊符号或者不方便使用,对于这些符号就需要用特殊符号来代替
    最常用的就是空格符了

    空格:  

    • 1

    直接记的话可能不太好记,大家可以记成&nb super plus

    18. 表格相关标签

    表格三要素 table、tr、td 缺一不可

    18.1 表格标签

    <table>table>  用来定义表格的标签
<tr>tr> 用来定义表格中的行
<td>td> 用来定义表格中的单元格

    • 1
    • 2
    • 3

    18.2 表头单元格

    一般表头位于表格的第一行,使用表头单元格标签可以用来突出表头内容的重要性

    <th>th>  表头单元格里面的文本会加粗居中显示

    • 1

    18.3 表格的相关属性

    这些属性要写到table标签里面

    属性名属性值描述
    alignleft,right,center单元格整体的对齐方式
    border0或""(空)规定单元格是否有边框,默认是没有的
    cellpadding像素值创建单元格内容与其边框之间的空白
    cellspacing像素值设置单元格之间的距离
    width像素值或百分比设置表格的宽度
    height像素值或百分比设置表格的高度

    18.4 表格的结构标签

    有的时候表格很大,为了更好的表示语义,就可以使用表格结构标签来解决这个问题

    <thead>thead> 表格的头部区域 里面必须有<tr>标签 一般位于第一行
<tbody>tbody> 表格的主体区域

    • 1
    • 2

    18.5 合并单元格

    合并单元格的方式

    • 跨行合并:rowspan=“合并单元格的个数”
    • 跨列合并:colspan=“合并单元格的个数”

    在这里插入图片描述
    目标单元格用来写合并代码

    • 跨行合并:最上测为目标单元格
    • 跨列合并:最左侧为目标单元格

    合并单元格的三个步骤:

    1. 先确定是跨行合并还是跨列合并
    2. 找到目标单元格,写合并代码
    3. 删除多余的单元格

    19.列表标签

    列表有三大类:== 无序列表,有序列表和自定义列表==

    19.1 无序列表(重要)

    <body>
    <ul>
        <li>内容1li>
        <li>内容2li>
        <li>内容3li>
    ul>
body>
解释:
1. <ul>标签表示的就是无序列表 里面只能放<li>标签
2. 列表项用<li>标签来定义 <li>标签里面可以放任意的标签

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    效果如下:
    在这里插入图片描述

    19.2 有序列表

    <ol> 标签表示的就是有序列表 只有这一点不同
<body>
    <ol>
        <li>内容1li>
        <li>内容2li>
        <li>内容3li>
    ol> 
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    效果:
    在这里插入图片描述

    19.3 自定义列表

    自定义列表不仅仅是一列项目，而是项目及其注释的组合。

    <body>
    <dl>
        <dt>表格dt>
        <dd>无序列表dd>
        <dd>有序列表dd>
        <dd>自定义列表dd>
    dl>
body>
解释:
<dl> 标签用于定义自定义列表
<dt> 自定义列表项目
<dd> 用于解释自定义列表项目

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    效果:
    在这里插入图片描述
    虽然解释自定义列表项目的内容不和自定义列表项目对齐,这是正常现象,可以通过CSS进行修改

    20. 表单标签

    一张完整的表单通常是由表单域,表单控件(表单元素)和提示信息构成

    20.1 表单域

    表单域是表示表单元素的区域

        <from action="url地址" method="提交方式" name="表单域名称">
         
    from>
解释:
<from> 标签用于定义表单域
<from> 会把表单元素信息提交给服务器 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    常用属性:

    属性属性值作用
    actionurl地址用于指定接受并处理表单数据的服务器的url的地址
    methodget或post用于设置表单的提交方式,值为get或post
    name名称指定表单的名称,用于区分同一区域内多个表单域

    20.2 表单控件(表单元素)

    表单元素是允许用户在表单中输入内容
    接下来重点介绍以下表单元素:

    • input输入表单元素
    • select下拉表单元素
    • textarea文本域元素
    <input type="属性值">
type 是必须要写的属性

    • 1
    • 2
    属性值描述
    button定义可点击按钮
    checkbox定义复选框
    file定义输入字段和"浏览"按钮,供文件上传
    hidden定义隐藏的输入字段
    image定义图像形式的提交按钮
    password定义密码字段,该字段的字符会被掩盖
    radio定义单选按钮
    reset定义重置按钮,重置按钮会清楚表单内的所有数据
    submit定义提交按钮,提交按钮会将表单元素提交给服务器
    text定于单行的输入字段,用户可输入文本,默认宽度为20字符
    email限制用户必须输入Email类型
    url限制用户必须输入url类型
    date限制用户必须输入日期类型
    time限制用户必须输入时间类型
    month限制用户必须输入月份类型
    week限制用户必须输入周类型
    number限制用户必须输入数字类型
    tel手机号码
    search搜索框
    color生成一个颜色选择表单

    20.3 label标签

    <label for="值">文本label>
<input type="" name="" id="值">
解释:    	
<label>标签为input元素定义标注
<label>标签用于绑定一个表单元素,
当点击<lable>标签里面的文本时,
浏览器会自动将光标转到或者选择对应的表单元素上,
增加用户的体验
注意:for里面的值和id里面的值必须是一样的

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    20.4 select标签

    select标签就是下拉列表标签,应用场景:如填写家庭地址之类的,会提供省份和城市供用户选择,这时候就可以使用select标签来实现这个功能

    <body>
    选择:
    <select>
        <option>选项一option>
        <option>选项二option>
        <option>选项三option>
    select>
body>
解释:
<select>标签里面至少有一对<option>标签
<option selected="selected">文本option> -> 
<option>标签里面可以加selected="selected"这一句话,那么此时默认选项就是当前选项

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    效果:
    在这里插入图片描述

    20.5 textarea文本域标签

    在表单元素中,textarea标签用于定义多行文本输入的控件,使用textarea标签可以输入更多的文字

        <from>
        <textarea rows="5" cols="20">
            默认文字
        textarea>
    from>
rows="" 这是显示的行数
cols=""这是每行有多少字
默认文字可加可不加

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    效果:
    在这里插入图片描述

    20.6 表单属性

    在HTML5中还新增了一些表单属性

    属性值说明
    requiredrequired表单拥有该属性的内容不能为空,一定要填
    placeholder提示文本表单的提示信息,存在默认值不显示
    autofocusautofocus页面加载完成后自动聚焦到指定表单
    autocompleteoff/on在用户进行输入时,会提示之前输入过的值,需要放在表单内,要有name属性且成功提交才可以
    multiplemultiple同时多选文件提交

    21. 语义标签

    之前布局页面使用div来做的,但是对搜索引擎来说,div是没有语义的
    因此HTML5里面就新增了一些语义标签

    <header>header> 头部标签
<nav>nav> 导航标签
<article>article> 内容标签
<section>section> 定义文档某个区域
<aside>aside> 侧边栏标签
<footer>footer> 底部标签
解释:
这些标签要配合CSS来使用
在IE9中,需要将这些元素转化为块级元素

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    22. 多媒体标签

    在HTML5中新增了多媒体标签video和audio标签,这两个标签可以帮助我们很方便的在网页中嵌入音频和视频

    22.1. 视频标签

    <video>video>  视频标签
语法格式:
<video src="文件地址" 属性="">video>  

    • 1
    • 2
    • 3

    video里的常用属性:

    属性值描述
    controlscontrols向用户显示播放控件
    autoplayautoplay视频就绪自动播放
    width像素设置播放器宽度
    height像素设置播放器高度
    looploop设置播是否继续播放视频,循环播放
    preloadauto(预先加载视频) none(不预先加载视频)是否加载视频
    srcurl视频url地址
    posterImgurl加载等待的画面图片
    mutedmuted静音播放

    video标签只支持3种视频样式,分别是MP4,WebM和Ogg 尽量使用MP4的视频样式

    23. 音频标签

    <video src="文件地址" 属性="">video>

    • 1

    音频标签同样支持3中格式的音频,分别是MP3,Wav和Ogg格式的音频,尽量使用MP3格式的音频
    常见属性

    属性值描述
    autoplayautoplay音频就绪后马上播放
    controlscontrols向用户显示播放控件,如播放按钮
    looploop设置音频循环播放
    srcurl音频url地址

    24. 总结

    感谢你的观看!
    前端的知识点很多,有些地方最好还是自己尝试一下比较好,可以方便理解和记忆.
    建议收藏后面可以还会增加一些新的东西
    在这里插入图片描述

  • 相关阅读:
    小程序之自定义组件 结合案例
    C语言中常用的字符串处理函数（strlen、strcpy、strcat、strcmp）
    【matplotlib基础】--结合地图
    公司职位描述
    LeetCode 1694. 重新格式化电话号码
    js实现一个 bind 函数
    day02_numpy_demo
    《研发效能(DevOps)工程师》课程简介（五）丨IDCF
    12.2 实现键盘模拟按键
    通信协议——分类及其特征介绍
  • 原文地址：https://blog.csdn.net/m0_63463510/article/details/127833050