• HTML基础知识点

    HTML基础知识点（详细）

    一、网页基础知识

    1、认识网页
    （1）网页是由什么组成的呢？

    文字、图片、视频、音频、超链接等…

    （2）网页背后的本质是什么呢？

    代码组合

    （3）前端代码是怎么转化的呢？

    通过浏览器转化（解析和渲染）成用户看到的网页

    2、五大浏览器和渲染引擎
    （1）五大浏览器（谷歌常用）

    IE浏览器、火狐（Firefox）、谷歌（Chrome）、Safari、欧朋（Opera）

    （2）渲染引擎（浏览器内核）

    浏览器中专门对代码进行解析渲染的部分

    3、Web标准

    主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三个方面

    • 结构：HTML—页面元素和内容
    • 表现：CSS—网页元素的外观和位置等页面样式（颜色、大小）
    • 行为：JavaScript—网页模型的定义与页面交互

    二、HTML基础概念

    1、HTML概念
    （Hyper Text Markup Language）—超文本标记语言，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述
    2、HTML骨架结构

    一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体

    HTML基本格式：

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题title>
	head>
	<body>
	写自己的代码
	body>
html>

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

    在这里插入图片描述

    3、开发工具

    开发工具：Webstorm、VS Code、Hbuilder、Sublime Text、Notepad++、Editplus、Dreamweaver、Atom
    其中，Visual Studio Code为常用软件—速度快，体积小、插件多

    • WebStorm 是JetBrains公司旗下一款JavaScript 开发工具，和PyCharm等同属一家公司。
    • VSCode(全称:Visual Studio Code) 是一款由微软开发且跨平台的免费源代码编辑器。
    • HBuilder 是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE.
    • Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。
    • Notepad+ 是记事本的增强版本。
    • EditPlus 是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。
    • Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，最初为美国Macromedia公司开发，2005年被Adobe公司收购。
    • Atom 是github平台为其用户提供的，也有人在使用

    4、HTML语法规范
    （1）注释

    快捷键：ctrl + / （再按一次，取消注释）

    （2）标签的构成

    1、标签结构图：<起始标签> 内容
    2、结构说明：标签分为双标签和单标签

    （3）标签的关系

    1、嵌套关系（父子关系）
    2、并列关系（兄弟关系）

    三、HTML中的标签

    1、排版标签
    （1）标题标签

    • 语义：给页面上的文字加上标题，1-6级标题，重要程度依次减小
    • 代码：
        <h1>1级标题h1> 
    <h2>2级标题h2>
    <h3>3级标题h3>
    <h4>4级标题h4>
    <h5>5级标题h5>
    <h6>6级标题h6>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 特点：文字都有加粗；文字都有大小，从h1-h6文字逐渐减小；独占一行

    （2）段落标签

    • 语义：在新闻和文章的页面中，用于分段显示，表示一个段落
    • 代码：
    <p>我是一段文字p>

    • 1
    • 特点：段落之间存在间隙，独占一行

    （3）换行标签

    • 语义：让文字强制换行显示
    • 代码：
    <br>

    • 1
    • 特点：单标签，让文字强制换行

    （4）水平线标签

    • 语义：分割不同主题内容的水平线，用于主题分割
    • 代码显示：
    <hr>

    • 1
    • 特点：单标签，在页面中显示一条水平线

    2、文本格式化标签

    • 语义：需要让文字加粗、下划线、倾斜、删除线等效果
    • 代码：
    b、strong --- 加粗
u、ins    --- 下划线
i、em     --- 倾斜
s、del    --- 删除线
<em>...em>                  倾斜
<strong>...strong>          加粗

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 特点：突出重要性的强调语境，那就用全单词表示（即后面的）

    3、媒体标签
    （1）图片标签

    • 语义：在网页中显示图片
    • 代码：
    <img src="" alt="" title="" height="" width="">

    • 1
    • 属性
      属性注意点：
      （1）标签的属性写在开始标签内部；
      （2）标签上可以同时存在多个属性；
      （3）属性之间以空格隔开；
      （4）标签名与属性之间必须以一位空格隔开；
      （5）属性之间没有顺序之分

    1、alt属性
    属性值：替换文本
    #当图片加载失败时，才显示atl的内容
    #当图片加载成功时，不会显示alt的文本

    2、title属性
    属性值：提示文本—当鼠标悬停时，才显示的文本
    注意：title属性不仅仅可以用于图片标签，还可以用于其他标签

    3、宽高属性
    属性名：width 和 height
    属性值：宽度和高度
    注意点：
    （1）如果只设置宽高其中的一个，另一个没设置的会自动等比例缩放（图片不会变形）
    （2）如果同时设置了宽高两个值，若设置不当图片可能会变形

    • 特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置

    （2）路径

    • 语义：页面需要加载图片，需要先找到对应的图片
    • 分类
      （1）绝对路径（了解）

    概念：指目录下的绝对路径，可直接到达目标位置，通常从盘符开始的路径
    示例：盘符开头：E:\CODE\images 或者 完整的网址

    （2）相对路径

    概念：从当前文件开始出发找目标文件的过程
    分类：
    （1）同级目录—当前文件和目标文件在同一目录中
    （2）下级目录—目标文件在下级目录中
    （3）上级目录—目标文件在下上级目录中

    • 代码：
    同级目录：
写法1：<img src="目标图片.gif">                   
写法2：<img src="./目标图片.gif">
下级目录：
写法1：<img src="./images/目标图片.gif">                
写法2：<img src="images/目标图片.gif">
上级目录：
<img src="../images/目标图片.gif">     ---返回几个上级用几个../

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

    （3）音频标签

    • 语义：在页面中插入音频
    • 代码：
    <audio src="音频.mp3" controls autoplay loop>audio>

    • 1
    • 常见属性：

    （1）src—音频的路径
    （2）controls—显示播放的控件
    （3）autoplay—自动播放（部分浏览器不支持）
    （4）loop—循环播放

    • 注意点：音频标签目前支持的三种格式：MP3、Wav、Ogg

    （4）视频标签

    • 语义：在页面中插入视频
    • 代码：
    <video src="../video/video1.mp4" controls autoplay loop>video>

    • 1
    • 常见属性：

    （1）src—视频的路径
    （2）controls—显示播放的控件
    （3）autoplay—自动播放（谷歌浏览器中需配合muted实现静音播放）
    （4）loop—循环播放

    • 注意点：视频标签目前支持三种格式：MP4、WebM、Ogg

    4、链接标签

    • 语义：点击之后，从一个页面跳转到另一个页面
    • 称呼：a标签、超链接、锚链接
    • 代码：
    <a href="https://www.baidu.com/">跳转到百度a>

    • 1
    • 属性：target属性

    属性值-目标网页的打开形式
    （1）_self —默认值，在当前窗口跳转（覆盖原网页）
    （2）_blank —在新窗口跳转（保留原网页）

    • 特点：双标签，内部包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的href属性

    5、列表标签

    应用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
    特点：按照行的方式，整齐显示内容

    标签分类：
    （1）无序列表

    • 语义：在网页中表示一组无顺序之分的列表，如：新闻列表
    • 标签组成：
      （1）ul —表示无序列表的整体，用于包裹 li 标签
      （2）li —表示无序列表的每一项，用于包含每一行内容
    • 代码：
    <ul type="disc">    
   <li>无序列表li>
   <li>无序列表li>
   <li>无序列表li>
   <li>无序列表li>
ul>
其中，type属性如下：
type=“disc”  实心圆 
type=“circle”  空心圆 
type=“square” 方形 
type=“none” 没有

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 特点：列表的每一项前默认显示圆点标识
    • 注意点：ul 标签中只允许包含 li 标签 ；li 标签可以包含任意内容

    （2）有序列表

    • 语义：在网页中表示一组有顺序之分的列表，如：排行榜
    • 标签组成：
      （1）ol —表示有序列表的整体，用于包裹 li 标签
      （2）li —表示有序列表的每一项，用于包含每一行内容
    • 代码：
    <ol type="A" start="4">
     <li>有序列表li>
     <li>有序列表li>
     <li>有序列表li>
     <li>有序列表li>
ol>
其中，type、start属性如下：
type=“1/A/a/I/i” 
start=“4”       定义开始位置，属性值必须是数字

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 特点：列表的每一项前默认显示序号标识
    • 注意点：ol 标签中只允许包含 li 标签；li 标签可以包含任意内容

    （3）自定义列表

    • 语义：在网页中的底部导航中通常会使用自定义列表实现
    • 标签组成：
      （1）dl —表示自定义列表的整体，用于包裹 dt/dd 标签
      （2）dt —表示自定义列表的主题
      （3）dd —表示自定义列表的针对主题的每一项内容
    • 代码：
        <dl>
        <dt>帮助中心dt>
        <dd>账户管理dd>
        <dd>购物指南dd>
    dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 显示特点：dd 前会默认显示缩进效果
    • 注意点：dl 标签中只允许包含 dt/dd 标签；dt/dd 标签可以包含任意内容

    （4）表格标签

    • 表格的基本标签

    语义：在网页中以行 + 列的单元格的方式整齐展示数据，如：学生成绩表
    基本标签：
    （1）table —表格整体，可用于包裹多个 tr
    （2）tr —表格每行，可用于包裹多个 td
    （3）td —表格单元格，可用于包裹内容
    注意点：标签的嵌套关系：table > tr > td

    • 表格相关属性

    语义：设置基本表格
    常见相关属性：
    （1）border — 数字 — 边框宽度
    （2）width — 数字 — 表格宽度
    （3）height — 数字 — 表格高度
    注意点：实际开发时针对样式效果推荐用CSS设置

    其中，代码展示如下：

    <table border="3" width="500" height="300">
        <tr>
            <td>姓名td>
            <td>成绩td>
            <td>评语td>
        tr>
    table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 表格标题和表头单元格标签

    语义：在表格中表示整体大标题和一列小标题
    其他标签：
    （1）caption —表格大标题—表示表格整体大标题，默认在表格整体顶部居中位置显示
    （2）th —表头单元格—表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
    注意点：
    （1）caption 标签书写在 table 标签内部
    （2）th 标签书写在 tr 标签内部（用于替换 td 标签）

    • 合并单元格

    语义：将水平或者垂直多个单元格合并成一个单元格 — 跨行合并，跨列合并
    步骤：
    （1）明确合并哪几个单元格
    （2）通过左上原则，确定保留谁删除谁
    （上下合并：只保留最上面的，删除其他；左右合并：只保留最左边）
    （3）给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
    注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

    • 表格的结构标签（了解）

    语义：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
    结构标签：
    （1）thead —表格头部
    （2）tbody —表格主体
    （3）tfoot —表格底部
    注意点：
    （1）表格结构标签内部用于包裹 tr 标签
    （2）表格的结构标签可以省略

    （5）表单标签

    目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建，如登录、注册、搜索等

    & input 系列标签

    • 语义：在网页中显示收集用户信息的表单效果，如：登录页、注册页
    • 标签名：input，input 标签可以通过 type 属性值的不同，展示不同效果
    • type属性值：
      （1）text —文本框,用于输入单行文本

    常用属性：placeholder ，占位符，提示用户输入内容的文本

    代码示例：

    <input type="text" placeholder="请输入用户名">

    • 1

    （2）password —密码框，用于输入密码
    （3）radio —单选框，用于多选一

    常用属性：
    （1）name —分组，有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中
    （2）checked —默认选中
    注意点：
    （1）name 属性对于单选框有分组功能
    （2）有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中

    代码示例：

        婚姻状况（单选）：<input type="radio" name="marriage" checked>未婚
                    <input type="radio" name="marriage">已婚
                    <input type="radio" name="marriage">离异

    • 1
    • 2
    • 3

    （4）checkbox —多选框，用于多选多
    （5）file —文件选择，用于之后上传文件

    常用属性：multiple —多文件选择

    （6）按钮

    属性值：
    （1）submit —提交按钮，用于提交
    （2）reset —重置按钮，用于重置
    （3）button —普通按钮，默认无功能，之后配合 js 添加功能
    注意点：
    （1）如果需要实现以上按钮功能，需要配合 form 标签使用
    （2）form 使用方法：用 form 标签把表单标签一起包裹起来即可

    代码示例：

    <input type="submit" value="免费注册">

    • 1

    & button 按钮标签

    • 语义：在网页中显示用户点击的按钮
    • 标签名：button
    • type属性值
      （1）submit —提交按钮，点击之后提交数据给后端服务器
      （2）reset —重置按钮，点击之后恢复表单默认值
      （3）button —普通按钮，默认无功能，之后配合 js 添加功能
    • 注意点
      （1）谷歌浏览器中 button 默认是提交按钮
      （2）button 标签是双标签，更便于包裹其他内容：文字、图片等

    & select 下拉菜单标签

    • 语义：在网页中提供多个选择项的下拉菜单表单控件
    • 标签组成：
      （1）select 标签：下拉菜单的整体
      （2）option 标签：下来菜单的每一项
    • 常见属性：selected：下拉菜单的默认选中
    • 代码示例：
        <select>
        <option>北京option>
        <option>上海option>
        <option>广州option>
        <option selected>深圳option>
    select>

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

    & textarea 文本域标签

    • 语义：在网页中提供可输入多行文本的表单控件
    • 标签名：textarea
    • 常见属性
      （1）cols：规定了文本域内可见宽度 - 注意点
      （2）rows：规定了文本域内可见行数
    • 注意点：右下角可以拖拽改变大小，实际应用可用CSS设置

    & label 标签

    • 语义：常用于绑定内容与表单标签的关系
    • 标签名：label
    • 常用方法
    方法1：
<input type="radio" name="sex" id="1"><label for="1">男label>
方法2：
<label><input type="radio" name="sex">女label>

    • 1
    • 2
    • 3
    • 4

    （6）语义化标签

    • 无语义布局标签
      （1）div 标签，一行只显示一个（独占一行），双标签
      （2）span 标签，一行可以显示多个，双标签
    • 有语义布局标签（了解）
      （1）语义：在 html5 新版本中，推出了一些有语义的布局标签供开发者使用
      （2）注意点：以上标签显示特点和 div 一样，但是比 div 多了不同的语义
      （3）标签：

    header —网页头部
    nav —网页导航
    footer —网页底部
    aside —网页侧边栏
    section —网页区块
    article —网页文章

    （7）字符实体

    • 语义：在网页中展示特殊符号效果时，需要使用字符实体替代
    • 结构：&英文;
    • 常见字符实体：
        ---空格 （常用）
©   ---版权
™  ---商标
®    ---已注册
<     ---小于号或显示标记
>     ---大于号或显示标记

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    华为云国际站账号购买：WeLink安全服务，为企业数字化转型保驾护航
    2022第五空间-web部分wp+复盘总结
    关于Redis的持久化
    『HarmonyOS』万物互联，分布式操作系统
    std::ofstream 写本地音频
    mdr1基因寡核苷酸/酸敏感靶多肽/聚乙二醇埃博霉素B偶联阿霉素的相关制备
    七夕来临，程序员该如何花式表白？html+css实现简单七夕表白
    A-Level经济真题每期一练（22）
    反向迭代器---迭代器适配器
    [单片机课程设计报告汇总] 单片机设计报告常用硬件元器件描述
  • 原文地址：https://blog.csdn.net/qq_44768644/article/details/126172045