HTML基本知识点

有很多梦想要实现

已于 2023-02-15 21:51:31 修改

阅读量718

点赞数 1

分类专栏： Web 文章标签： html 前端

于 2023-02-14 11:53:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45134711/article/details/129018811

版权

Web 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML的基本概念，包括HTML、XHTML和HTML5的定义与区别。此外，详细讲解了HTML文档的基本结构，如文档声明和根元素，并阐述了HTML的基本语法，包括双标记和单标记的使用规则。还列举了常见的HTML标签，如标题、段落、文本样式、列表、图片、超链接和表格等，以及表单元素的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言，不是一门编程语言而是一种用来告知浏览器如何组织页面的标记语言。

web标准包含了三个方面：结构（html）, 表现（css）, 行为（JavaScript简称js）

a) w3c——( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。（制定了xhtml和xml css的相关标准非盈利性质）

b) ECMA——(European Computer Manufactures Association) 欧洲电脑场商联合会。（制定了DOM文档对象模型，ECMAScrpipt标准）

基本结构

1.文档声明

注： h5的文档声明 <DOCTYPE html>

网页的根元素<html></html>，根元素包含了head和body两大部分

基本语法

1.常规标记(双标记)

语法：<标记属性= "属性值" 属性="属性值">文本内容</标记>

<h1 class="tit">hello world</h1>
<h1 align="center">你好 世界 </h1>

2.空标记（单标记）

语法：<标记属性 = "属性值" 属性="属性值"/>

<input type="text">

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

空标记没有结束标签，用“/”代替。

HTML常用标签

文本标题

eg: <hx></hx> x代表1~6 有自己的文本大小，并且独占一行，有默认间距，都有加粗的效果

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落文本

标识一个段落(段落与段落之间有段间距)所以不用强制换行

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

加粗文本

<b>("bold") 或者strong（带有强调语气）

<b>这里是加粗的</b>
<strong>这个也是加粗的</strong>

倾斜文本

<i>("italic") ，或者em

<p>中国四大发明：<i>火药，指南针，造纸术，印刷术</i></p>
<p>中国四大发明：<em>火药，指南针，造纸术，印刷术</em></p>

倾斜是可以与加粗标签连用的，例如

<p>中国四大美女：<i><b>西施，貂蝉，王昭君，杨玉环</b></i></p>

b和i两种标签没有顺序之分

强制换行

这是一个单标记可以不用加结束的/，如果需要就加在这个位置后直接<br/>即可

<p>这里就简单的一个段落，用换行使用.<br>提示：这里改换行了</p>

水平线

<p>这是一个文本</p>
<hr><!-- 这个就是水平线 -->
<p>这是第二段文本</p>

注释

可以使用快捷键ctrl+/

<!-- 这是一个注释 -->

扩展

版权符号©

<p>版权符号：&copy;</p>

注册商标®

 <p>注册商标：&reg;</p>

线和标

<p>2<sup>3</sup></p>
<p>H<sub>2</sub>O</p>
<u>文本</u>下划线
<s>文本</s>删除线
<del>文本</del>删除线

空格符

所占位置没有一个确定的值,这与当前字体字号都有关系.

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;近日</p>

HTML常用列表

有序列表

eg: <ol type="1|I|i|A|a" start="1|数值">

  <li>aaa</li>
  ...

  </ol>

例子：

<!-- 有序列表 -->
    <ol>
    <!-- 默认是123 -->
        <li>这世界有那么多人</li>
        <li>多幸运</li>
        <li>会痛的石头</li>
        <li>哈哈哈哈哈</li>
        <li>陈奕迅</li>
    </ol>
    <ol type="i">
    <!-- 古罗马数字 大小写 -->
       <li>这世界有那么多人</li>
        <li>多幸运</li>
        <li>会痛的石头</li>
        <li>哈哈哈哈哈</li>
        <li>陈奕迅</li>
    </ol>
    <ol type="a" start="3">
    <!-- 类型是字母，大小写都行，从第三个开始，字母的索引字从1开始 -->
         <li>这世界有那么多人</li>
        <li>多幸运</li>
        <li>会痛的石头</li>
        <li>哈哈哈哈哈</li>
        <li>陈奕迅</li>
    </ol>

无序列表

eg:  <ul type="disc|circle|square">

  <li>aaa</li>
  ...

  </ul>

<!--注：disc  实心圆    circle   空心圆    square   实心方块-->

例子：

 <!-- 无序列表 -->
    <!-- ul>li*5   tab键 -->
    <!-- 默认为实心圆 -->
    <ul type="disc">
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
    </ul>
    <!-- 空心圆 -->
    <ul type="circle">   
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
    </ul>
    <!-- 实心方块 -->
    <ul type="square">   
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
        <li>红鲤鱼与绿鲤鱼与驴</li>
    </ul>

自定义列表

eg: <dl>

  <dt>名词</dt>
  <dd>解释...</dd>

  </dl>

例子：

<!-- 自定义列表 -->
    <dl>
        <dt>冬奥会</dt>
        <dd>冬季奥林匹克运动会（Olympic Winter Games）简称为冬季奥运会、冬奥会。主要由全世界地区举行，是世界规模最大的冬季综合性运动会，每四年举办一届，1994年起与夏季奥林匹克运动会相间举行。参与国主要分布在世界各地，包括欧洲、非洲、美洲、亚洲、大洋洲。由国际奥林匹克委员会（International Olympic Committee）主办。按实际举行次数计算届数。</dd>
    </dl>
    <dl>
        <dt>中国</dt>
        <dd>北京</dd>
        <dd>上海</dd>
        <dd>广州</dd>
        <dt>美国</dt>
        <dd>华盛顿</dd>
        <dd>纽约</dd>
        <dd>洛杉矶</dd>
        <dt>意大利</dt>
        <dd>米兰</dd>
        <dd>威尼斯</dd>
    </dl>

插入图片

绝对路径（物理位置）

相对路径（相对位置）

<img src="图片路径"  title="鼠标悬停上去后显示的内容" alt="图片显示失败的时候内容">
eg:  <img src="1.jpg" width="200" height="120" alt="hello" title="你好">
注： a) src  引入图片路径
 b) width和height  设置图片的宽度和高度

例子：

<!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>插入图片</title>
</head>
<body>
    <!-- 相对路径 重要！重要！重要！-->
    <!-- 当前的html文件和tu1.jpg文件在同一目录下，同级关系，直接书写图片名称即可 -->
    <!-- alt属性设置的文本会在图片加载失败时显示 -->
    <img src="tu1.jpg" width="200" height="160" alt="呵呵">

    <!-- 当前html文件和tu2.jpg文件不在同一目录下，这张图片放置在一个img文件夹中，首先进入img文件夹，然后再找到图片名称tu2.jpg -->
    <img src="img/tu2.jpg" width="200" height="160" alt="哈哈哈哈哈哈">

    <!-- 要引入的图片和我们的html文件不在同一目录，并且这张图在html文件所在的上一级目录中，那么就要通过../先返回到上一级目录，然后再书写图片名称 -->
    <img src="../5.jpg" width="200" height="160" title="哈哈哈哈哈哈">
    <!-- <img src="../../day02/myfile/6.png"> -->

    <!-- 绝对路径 了解-->
    <img src="F:\前端专用图片.png" width="200" height="160" title="哈哈哈哈哈哈">
    
</body>
</html>

超链接

eg: <a href="[http://www.baidu.com](http://www.baidu.com)"  target="_blank">百度一下</a>

外部网址一定要加上http
注：target="_blank"  设置超链接在新窗口打开
    target="_self" 设置超链接在本窗口打开
     title=""设置在鼠标悬停的时候显示的内容
     src和href的区别就是一个是嵌入式的一个是关联式的

例子：

<!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>超链接</title>
</head>

<body>
    <!-- href属性用来设置要跳转的地址 网址 -->
    <!-- 超链接a标签默认的一些特征：字体颜色不同，自带下划线，鼠标悬停时小手形状 -->
    <!-- target="_blank" 设置超链接在新窗口打开 -->
    <a href="http://www.baidu.com" target="_blank" title="百度一下">百度一下，你就知道</a>
    <!-- 给图片加超链接 -->
    <a href="http://www.jd.com" target="_blank">
        <img src="tu1.jpg" title="哈哈哈哈哈哈">
    </a>
    <!-- 链接到本地的某个文件 -->
    <a href="本地文件.html" target="_blank">链接到本地文件</a>
</body>

</html>

后续在伪类选择器时会讲到超链接的状态

表单

input

文本框

<input type="text" placeholder="请输入手机号">

注： placeholder用来设置默认显示的文本

这个时候为了显示的是隐形的文字，就必须要用placehoder，如果使用value则会固定的显示这个内容，就效果而言没有前者好。

密码框

<input type="password" placeholder="请输入密码">
password自带加密效果

提交按钮

<input type="submit" value="登录">
注：value用来设置按钮上的文字内容

单选按钮


性别：
        <input type="radio" name="sex" checked> 男
        <input type="radio" name="sex"> 女

 婚姻状况：
        <input type="radio" name="marry" checked> 未婚
        <input type="radio" name="marry"> 离异
        <input type="radio" name="marry"> 丧偶
        <br>
注：一组中的单选按钮必须要添加一致的name属性值，才能达到多选其一的效果

复选按钮

eg: <input type="checkbox">
爱好：
        <input type="checkbox" checked> 敲代码
        <input type="checkbox"> 打游戏
        <input type="checkbox"> 追剧
        <input type="checkbox" checked> 看书

重置按钮

<input type="reset" value="重置">

包含Js的按钮


<input type="button" value="***">
注：本身不具备任何功能，通常结合js点击事件来使用

例如删除功能：

<input type="button" value="删除" onclick="confirm('确定要删除吗')">

其他部分

下拉列表

eg: <select>
        <option selected>aa</option>
        ...
    </select>

  <select>
            <option>黑龙江省</option>
            <option>山西省</option>
            <option>安徽省</option>
            <option>河南省</option>
            <option selected>湖北省</option>
            <option>云南省</option>
        </select>

## 注意selected

默认下拉列表的选择

文本域


<textarea cols="30" rows="10" style="resize:none;"></textarea>

注：style="resize:none;"   禁止用户拖拽改变文本域大小
cols宽  rows高

注：disabled="disabled"  给表单元素设置禁用状态

表格

作用：显示数据

相关属性：widht单元格宽度 height单元格的高度

borde表格的边框 bordecolor表格的背景色

background表格的背景色

cellspacing单元格与单元格之间的间距

cellpadding单元格与内容之间的空隙

对齐方式：align=“left/center/right”

注：表头单元格可以使用th标签，自带加粗且居中
<!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>表格</title>
</head>
<body>
    <!-- cellspacing  设置单元格间距 -->
    <!-- border  设置表格边框 -->
    <!-- tr 定义表格的行
    td  定义表格的列 -->
    <table border="1" cellspacing="0" width="600" height="200" align="center">
        <tbody align="center">对表格的内容进行居中
            <tr height="60"> 
                <!-- 单独设置一行的高度 -->
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>籍贯</td>
                <td>工作</td>
                <td>爱好</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>21</td>
                <td>河南焦作</td>
                <td>无</td>
                <td>吃零食</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>21</td>
                <td>河南焦作</td>
                <td>无</td>
                <td>吃零食</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>21</td>
                <td>河南焦作</td>
                <td>无</td>
                <td>吃零食</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>21</td>
                <td>河南焦作</td>
                <td>无</td>
                <td>吃零食</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

合并行

合并行rowspan 需要进行跨行完成的单元格（td）的合并就叫合并行，最后谁不在了就把谁注释掉。

<!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>合并行和合并列</title>
</head>
<body>
<h2>合并行</h2>
    <table border="1" cellspacing="0" width="200" height="80">
        <tbody align="center">
            <tr>
                <td>A</td>
                <td rowspan="2">B</td>
            </tr>
            <tr>
                <td>C</td>
                <!-- <td>D</td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>

合并列

合并列colspan 需要跨列完成的单元格（td）的合并叫做合并列，最后显示谁就在谁那里加上，被合并掉的应该注释掉。

<!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>合并行和合并列</title>
</head>
<body>
    <h2>合并列</h2>
    <table border="1" cellspacing="0" width="200" height="80">
        <tbody align="center">
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td colspan="2">C</td>
                <!-- <td>D</td>   单元格跨列合并后，d已经被合并掉了 -->
            </tr>
        </tbody>
    </table>
 </boby>
 </html>