HTML相关知识点

九万里^

已于 2023-12-19 17:18:29 修改

阅读量183

点赞数 1

分类专栏： HTML总结文章标签： html 前端 html5

于 2022-06-09 18:51:12 首次发布

本文链接：https://blog.csdn.net/An2290501132/article/details/125209039

版权

HTML总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML知识天地

一、html基本概念：

html

Hyper Text Markup Language 超文本标记语言
Hyper Text 超文本 Markup 标记，标签 Language语言

1.网页和网站：

网页：

一个html文件，就是一张网页
网页中包含：文字，图片，视频，音频，超链接，程序…
网页的内容由HTML技术实现
网页的后缀通常都是.html

网站：

有N个网页组成

2.网页三层结构

结构层：使用HTML技术实现，为网页提供内容
样式层：给网页提供样式（布局，美化）
交互层：使用JS实现，JS是前端程序员必须要掌握的东西

3.浏览器和渲染引擎

常见的5大浏览器：
谷歌，火狐，IE（Edge），Safari，欧朋
不同的浏览器有不同的内核（渲染引擎）

4.开发工具

推荐使用VsCode工具，好处：小巧，插件多
快捷键：

ctrl + / ==> 注释
shift + alt + 向下箭头 ==> 复制上一行
tab ==> 向后移动代码
shift + tab ==> 向前移动代码
! + tab ==> html基本骨架 !是英文的!
div.wraper + tab ==> 生成一个带名字的div
鼠标中键 + 向下拽 ==> 同时选中多行
键盘上的del键 ==> 删除文件
F2 ==> 重命名
shift + alt + f ==> 格式化代码
ctrl + f ==> 查找内容并替换内容

5.标签，属性，元素

标签：标签都是用<>包起来，分单标签和双标签，分男标签、女标签和人妖标签

单标签：只有开始标签，没有结束标签
双标签：开始标签和结束标签都有

例：单标签：<开始标签>
双标签：<开始标签> </结束标签>
男标签：独占一行
女标签：并排显示
人妖标签只有两个：img标签，input标签

标签与标签之间是有关系的，分兄弟关系（并列）和父子关系（嵌套）
属性：写在开始标签中，以属性名=“属性值” 的形式出现，一个标签中可以有N个属性
属性也分两类：
公有属性：title,class,id,style…
特有属性：src,href…
元素：开始标签 + 属性 + 标签中的内容 + 结束标签

二、HTML的基本骨架：

1.基本骨架：

文档声明：告诉浏览器，你按HTML5标准来解析此网页
html是网页的根标签
lang=“zh-CN” lang是语言的意思 en表示英文
title表示网页的小标题
meta是设置网页的元信息
utf-8 基本上涵盖了世界上所有的文字，如果不写，在有的浏览器中可能会乱码

<!-- 这一行代码并不是一个标签 -->
<!-- 文档声明：告诉浏览器，你按HTML5标准来解析此网页 -->
<!DOCTYPE html>
<!-- html是网页的根标签 -->
<!-- lang="zh-CN" lang是语言的意思   zh-CN表示HTML网页的语言是中文   en表示英文 -->
<html lang="zh-CN">
    <!-- 在head中可以对网页进行设置 -->
    <head>
        <!-- title表示网页的小标题 -->
        <title>我的第2个网页</title>
        <!-- meta是设置网页的元信息 -->
        <!-- utf-8 基本上涵盖了世界上所有的文字，如果不写，在有的浏览器中可能会乱码 -->
        <meta charset="utf-8" />
    </head>
    <!-- 表示网页的主体内容 -->
    <body>
        
    </body>
</html>

2.元素：

html元素，是一个网页的根元素，只有这一个
head元素，是网页的头部，基本上对网页的设置都会在head实现
body元素，网页的主要内容都是写在body中的

三、常用标签：

1.h系列-标题标签

1）作用

用作文章的标题
2）特性
文字加粗，文字变黑，自己占一行 h1 最大 h6 最小逐级递减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 只要是一个网站，基本上都有h1标签 -->
    <!-- 即使没有大标题，也会使用h1标签把网页的logo包起来 -->
    <!-- h1标签有利于SEO -->
    <h1>我是一个大标题</h1>
    <h2>我是一个h2标签</h2>
    <h3>我是一个h3标签</h3>
    <h4>我是一个h4标签</h4>
    <h5>我是一个h5标签</h5>
    <h6>我是一个h6标签</h6>
</body>
</html>

2.p标签，段落标签

paragraph是段落的意思。
P标签的特点：

是男标签（独占一行）
如果P标签中的文本，撑满了一行，会自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- p标签表示一个段落 -->
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>

    <p>全国高考拉开帷幕。今年高考共有1193万人报名，再创历史新高。</p>
    <p>“不经一番寒彻骨，怎得梅花扑鼻香”，2011年，在参观四川省都江堰市青城山高级中学时，曾用这句古诗词勉励高三学子。</p>
    <p>又是一年高考季，重温青春寄语，为广大考生鼓劲加油！</p>
</body>
</html>

3.换行标签

br标签是单标签
强制换行

4.文本格式化标签

常用：

strong标签，加粗，有强调作用
em标签，倾斜，有强调作用
不常用：
del标签，删除线
ins下划线
过时，淘汰(没有强调作用)
b标签，加粗
i标签，倾斜
u标签，下划线
s标签，删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- b  u  i  s是女标签  特点：并排显示 -->
    <!-- b  u  i  s 了解就OK -->
    <!-- b  u  i  s 四个标签，仅仅是样式有区别，但是没有强调的意思 -->
    <b>今天开始学习HTML了，明天学习CSS</b>  <br>
    <u>今天开始学习HTML了，明天学习CSS</u>  <br>
    <i>今天开始学习HTML了，明天学习CSS</i>  <br>
    <s>今天开始学习HTML了，明天学习CSS</s>  <br>

    <hr>

    <!-- b标签仅仅是加粗，strong标签不只可以加粗，还可以强调，有利于SEO -->
    <strong>今天开始学习HTML了，明天学习CSS</strong>  <br>
    <!-- em标签也有强调的意思，表示形式和 i 标签是一样，会倾斜-->
    <em>今天开始学习HTML了，明天学习CSS</em>  <br>
    <!-- 使用strong和em能达到的效果，使用css也可以达到，但是stong和em有强调作用 -->

    <!-- ins和del标签，不重要，了解就OK -->
    <!-- ins和del标签达到的效果，使用CSS也可以使用 -->
    <ins>今天开始学习HTML了，明天学习CSS</ins>  <br>
    <del>今天开始学习HTML了，明天学习CSS</del>  <br>


</body>
</html>

5.无语义标签

div 就是 division 的缩写，表示分割、分区的意思，我们用很多div 来组合网页
div是一个男标签 span是一个女标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            color: red;
        }
        .box1{
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 
        标签的语义化：
            什么样的标签做什么样的事，如img标签表示图片，h1标签表示大标题，p标签表示段落....
            不同的标签有，不同的含义，就是语义。但是html中有两个标签是没有任何语义的。
            但在网页开发中，使用的最多的，这两个标签，就是div和span。

        div是男标签，特点：独占一行。
        span标签是女标签，特点：并排显示。

        div+css:
            div可以把网页分成多块，配合CSS就可以完成布局。
     -->

     <h1>我是一个h1标签</h1>
     <div class="box1">我是一个孤独的DIV</div>
     <div class="box2">我是一个孤独的DIV</div>
     <div class="box3">我是一个孤独的DIV</div>

     <!-- 一个文本，加不加span，在网页上显示的效果是一样的  -->
     <!-- 如果加上span，可以选中这个文本，给这个文本添加样式 -->
     <span>我是一个小span</span><span>我是一个小span</span><span>我是一个小span</span>
     <hr>
     我是一个小span我是一个小span我是一个小span

     <!-- 
        如果没有div和span，我们也可以开发页面。

        如果没有其它标签，只有div和span，配合css，也可以开发页面。
      -->
</body>
</html>

6.图片标签img标签

1）概念

HTML网页中任何元素的实现都要依靠HTML标签，所以要在网页中显示图像就需要使用图像标签
img标签：
2)常用属性
src 图像的路径
alt 当图片出现错误时，alt会提示替换的文本
title 当鼠标悬停时，会出现提示内容
width height 可以设置图像的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 标签分类：
            1）男标签  块级标签    独占一行
            2）女标签  行内标签    并排显示
            3）太监标签   行内块标签   img   input   并排显示
    -->

    <!-- 使用img是在网页上插入一张图片，叫前景图 -->
    <!-- 有前景图，也有背景图，背景图是通过CSS来设置的 -->
    <!-- src叫属性，用来指定图片的路径 -->
    <!-- ./表示当前目录  谁的当前  此文件的当前-->
    <!-- 此处的./表示 02-常见的元素这个文件夹 -->
    <!-- 五笔 out -->
    <!-- 图片多大，在网页上显示的就多大，也就是说，默认这个图片是不放大，也不缩小的 -->
    <img src="./images/01.webp" alt="" >  <br>
    <!-- src是source的简写 -->
    <!-- 如果图片加载失败了，就显示alt对应的文本中的内容 -->
    <img src="./images/01.webp" alt="这是一张非常漂亮的图片">  <br>

    <!-- 所有的标签都有一个title属性，表示鼠标去摸时，提示内容 -->
    <img src="./images/01.webp" title="这是一张非常漂亮的图片">  <br>

    <!-- width是宽度的意思  height是高度的意思 -->
    <!-- 如果设置了width，那么高度会等比缩放 -->
    <!-- 如果设置了height，那么宽度会等比缩放 -->
    <img src="./images/01.webp" alt="" width="300px">
    <img src="./images/01.webp" alt="" height="300px">

    <!-- 宽高可以同时设置，同时设置，可能会造成图片变形 -->
    <img src="./images/01.webp" alt="" width="300px" height="300px">
</body>
</html>

7.路径和链接

路径

./表示当前目录谁的当前此文件的当前
…/表示上一级目录
/下一级
链接标签
anchor的缩写，锚、铁锚的意思是一个超链接标签
作用：实现跳转
鼠标去摸时，会变手形
女标签并排显示
默认有下划线，默认有颜色
target属性：指定_self,在当前选项卡打开;指定_blank,在新的选项卡中打开
设置空链接：
链接分为：外部链接和内部链接
锚点：#+目标标签id值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <a href="http://www.baidu.com">百度一下</a>
     <a href="http://www.baidu.com" target="_blank">百度一下</a>
     <a href="http://www.baidu.com">百度一下</a>
      <a href="#">我是空链接</a>
     <hr>
</body>
</html>

四、列表标签类

列表类标签：

基本上所有的网页，都有所谓的列表标签
列表标签不是一标签，是一组标签
无序列表，有序列表，自定义列表
type属性，用来指定列表项前面的标识样式

1.无序列表

无序列表是指列表项与列表项之间没有顺序

是一组标签，ul + li
ul是无序列表，unordered list li 是list-item的意思列表项
ul中只能放li元素 li里面可以放任何东西

2.有序列表

有序列表是指列表项与列表项之间有顺序

是一组标签 ol+li
ol 是有序列表，ordered list li 是list item的意思列表项
ol只能放li li里面可以放任何内容

3.自定义列表

自定义列表，自定义列表主要是对某个名字，事件，时间进行解释说明的
自定义列表：
1）definition 自定义的意思 list 是列表的意思 dl
2）对一个事件，时间点，名词等解释说明
3）是一组标签 dl + dt + dd
4）dt definition term/title
5）dd definition description description是描述的意思
6）dt和dd中可以包含任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

     <h1>常见的编程语言</h1>
     <ul type="square">
         <li>JavaScript</li>
         <li>Java</li>
         <li>C</li>
         <li>C#</li>
         <li>C++</li>
         <li>Python</li>
     </ul>

     <h1>飙升榜</h1>
     <ol>
         <li><a href="#">看得最远的地方</a></li>
         <li><a href="#">圆</a></li>
         <li><a href="#">下一站天后</a></li>
         <li><a href="#">孤独患者</a></li>
     </ol>

     <h1>前端开发</h1>
     <dl>
         <dt>阶段一：打好基本阶段</dt>
         <dd>HTML</dd>
         <dd>CSS</dd>
         <dd>JS基础</dd>
         <dd>DOM操作</dd>
         <dd>JS高级</dd>

         <dt>阶段二：框架实战</dt>
         <dd>vue</dd>
         <dd>react</dd>
         <dd>ng</dd>
         <dd>node</dd>

         <dt>阶段三：原理讲解</dt>
         <dd>js原理</dd>
         <dd>vue原理</dd>
         <dd>react原理</dd>
     </dl>
</body>
</html>

五、表格标签类

1.标签

table标签：table是桌子，表格的意思，表格中放行。
tr: table row row是行的意思一个tr就是一行
td: table data data是数据的意思单元格
th标签，表头，加粗，加黑，自动居中
caption标签，表格的标题，写在表格内部，显示在外部，居中
thead 结构头部 tbody 结构主体 tfoot 结构尾部

2.属性

border 整体表格有边框，每一个小的单元格也有边框，默认为0
width 宽度 height 高度是html标签的属性，用来设置宽度和高度
cellspacing 单元格与单元格之间的间隙
cellpadding 单元格与内容之间的间隙
align: left/center/left; 表格中内容对齐方式
单元格合并： row是行的意思 col是列的意思 span是跨度的意思
rowspan 行合并留第一个单元格，删除后面的单元格，合并几格，rowspan就等于几
colspan 列合并留第一个单元格，删除后面的单元格，合并几格，colspan就等于几

六、、表单类标签

1.form表单

作用：主要是收集用户信息，发送后台
客户端和服务器：
客户端：
浏览器，APP，小程序主要是用来向服务器发请求
服务器：
给客户端提供数据
大部分情况下，我们客户端主要是给服务器要数据，服务器返回数据给客户端。
上网的本质：就是数据在客户端和服务器之间数据流动。
表单是用来收集用户的数据，把数据扔给服务器。
表单也是一个标签，叫form，不要写成from。
只有表单是不行的，在表单中需要有表单项，这个表单项，也叫表单控件。

form标签：
action属性值是提交后台的地址
method属性值是提交（传输）后台的方式

2.input属性

input标签：
input是太监标签，特点：并排显示
value=“登录” 表示input输入框中的内容
checked=“checked” 默认选中某个单选框
为了可以实现N选一，需要给每一个input上添加name属性，保证name属性的值是一样的
type=“text” 文本框，明文
type=“password” 密码框，密文
type=“radio” 单选框 radio是收音机的意思
type=“checkbox” 复选框
type=“button” 普通按钮
type=“file” 文件选择按钮
type=“submit” 提交按钮不用value属性，默认是提交两个字需要配合form表单使用才有效果
type=“reset” 重置按钮不用value属性，默认是重置两个字要配合form表单使用才有效果
textarea标签，用户留言，个人介绍

3.name属性

name属性告诉服务器是哪个表单提交过来的
单选框，标识，实现多选一

4.下拉表单

select标签 option标签实现下拉框

name=“” 给数据起标识
value=“001” 是真正提交给服务器的数据,最终扔给服务器的数据是 address=“002”，即：name属性值=value属性值
multiple属性多选了解就行
selected 默认选中谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select name="address">
        <option value="001">BJ</option>
        <option value="002" selected="selected">SH</option>
        <option value="003">GZ</option>
        <option value="004">TJ</option>
        <option value="005">ZZ</option>
        <option value="006">LY</option>
    </select>
</body>
</html>

5.label用法

label标签将文本和输入框一起包裹，可以实现点击文本聚焦以及输入框自动聚焦
label for id 实现点击文本聚焦以及输入框自动聚焦

<label for="user">用户名：</label><input id="user" type="text">

九万里^

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录