HTML笔记—H

对象声明

DOCTYPE是document（文档类型）的缩写。<!DOCTYPE html> H5的声明位于文档的最前面，处于标签之前。他是网页必备的组部分。避免了浏览器的怪异模式。

<!DOCTYPE html>

HTML基础骨架

html标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTM文档了，所以你的其它元素要包裹在它里面，标签限定了文档的始点和结束点。

<!DOCTYPE html>
<html>
</html>

head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种性和信息，包括文档的标题、在 Web 中的位置以及和其他文档关系等。绝大多数文档头部包含的数据都不会真正作为内容显示读者。

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

hody标签
body元素包含文档的主体。
body元素包含文档的所有内容（比如文本，超链接，图像，表和列表等等。
它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
</body>
</html>

title标签
可定义文档的标题。
它显示在浏览器的窗口的标题栏或状态栏中。
<title> 标签是 <head> 标签中唯一必须要求包含的（head标签内一定要写title标签）
<title> 的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容的调整，满搜索引擎的排名需求

<!DOCTYPE html>
<html>
    <head>
        <title>第一个文件</title>
    </head>
    <body>
        <div>我的第一个html文件<div>
    </body>
</html>

meta标签
meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8" 是说当前使用的是 utf-8 编码格式，开发中我们经常会看到 utf-8 ，或是 gbk ，这些都是编格式，通常使用 utf-8 。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第一个文件</title>
    </head>
    <body>
        <div>我的第一个html文件<div>
    </body>
</html>

标题标签

标题（heading）是通过<h1> —— <h6> 标签进行定义的。
<h1> 定义最大的标题；<h6> 定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷公式：h$*6

正确使用标题标签

请保证将HTML标题标签只用于标题。
不要仅仅是为了生成粗体或者大号的文本而使用标题。
正确使用标题有益于SEO。
应当将<h1> 用于主标题（重要的），其后是<h2> (次要的)，再其次<h3> ，以此类推。

vscode插件

  • 快速打开浏览器

    open in browser

段落、换行、水平线

段落标签
段落是通过<p> 标签来定义的

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

换行标签
如果希望在不产生一个新段落的情况下进行换行，请示用<br />
<br /> 元素是一个空的html元素

<p>这是<br />一个<br />段落</p>

标签之图片

网站中最多的元素
网站中最多的元素毋庸置疑，一定是图片
<img>标签定义HTML页面中的图像

<img src="" alt="" title="" width="" height="">

注意事项
<img>是单标签，不需要进行闭合操作

属性：

  1. src：路径（图片地址与名称）
  2. alt：规定图像的代替文本（当src无法显示时，显示当前项）
  3. width：规定图像的宽度
  4. height：规定图像的高度
  5. title：鼠标悬停在图片上给予提示

图片路径详解

绝对路径

绝对路径是电脑的盘符存储预访问的具体位置
E:\image\1.jpg
<img src = "E:\image\1.jpg">

相对路径

两者相对关系，两者在同一路径下可直接访问

  • 子级关系：/
  • 父级关系：../
  • 同级关系：./ 可以省略

网络路径

具体的网络地址：https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msG0V.img

标签之超文本链接

想跳哪里跳哪里

超链接描述

HTML使用标签<a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可是一副图，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="URL">链接文本</a>

超链接属性

在标签<a>中使用了href属性描述链接的地址

默认情况下，链接将以，一下形式出现在浏览器中：

  • 一个从未访问过的链接显示未蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 鼠标点击链接时，链接显示为红色并带有下划线。

特别提醒
这的超链默认接样式后期可以通过CSS修改掉

超链接标签

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一个小手

标签之文本

文本标签——帮你显示不一样的文字

常用文本标签

标签 描述
<em> 定义着重文字
<b> 定义粗体文本
<i> 定义斜体文字
<strong> 定义加重语气
<del> 定义删除字
<span> 元素没有特定的含义

特别提示
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

列表标签之有序列表

有序列表

有序列表是一列项目，列表项目使用数字进行标记，有序列表始于<ol> 标签。每个列表项始于<li> 标签。

<ol>
  <li>列表1</li>
  <li>列表2</li>
</ol>

type属性

<ol> 的属性type拥有的选项

  • 1 表示列表项目用数字标号（1,2,3……）
  • a 表示列表项目用小写字母标号（a,b,c……）
  • A 表示列表项目用大写字母标号（A,B,C……）
  • i 表示列表项目用小写罗马数字标号（i,ii,iii……）
  • I 表示列表项目用大写罗马数字标号（I,II,III……）

有序列表嵌套

列表是可以进行嵌套的

  <ol>
    <li>水果</li>
    <li>蔬菜
      <ol>
        <li>白菜</li>
        <li>萝卜</li>
        <li>辣椒</li>
      </ol>
    </li>
    <li>肉类</li>
  </ol>

列表标签之无序列表

不分先后

无序列表实现

无序列表是一个项目列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表始于<ul> 标签。每个列表项始于<li> 标签。

  <ul>
    <li>蔬菜</li>
    <li>水果</li>
  </ul>

type属性

<ul> 的属性type拥有的选项

  • disc默认实心圆
  • circle空心圆
  • square小方块
  • none不显示

无序列表嵌套

列表都是可以嵌套使用的

  <ul>
    <li>蔬菜</li>
    <li>水果
      <ul>
        <li>橘子</li>
        <li>葡萄</li>
        <li>榴莲</li>
      </ul>
    </li>
    <li>肉类</li>
  </ul>

常见应用场景

  • 无序列表效果
  • 导航栏效果

快捷键
快速生成ul+li的布局 ul>li*3

标签之表格

表格展示效果

表格在数据展示方面非常简单，并且表现优秀

表格组成与特点
行，列，单元格
单元格特点：同行等高、同列等宽。

表格标签
表格：table
行：tr
单元格（列）td

  <table>
    <tr>
      <td>id</td>
      <td>name</td>
      <td>age</td>
    </tr>
    <tr>
      <td>1</td>
      <td>小明</td>
      <td>17</td>
    </tr>
    <tr>
      <td>2</td>
      <td>小华</td>
      <td>12</td>
    </tr>
  </table>

快捷键
快速生成表格结构：table>tr*3>td*3{展示信息}

表格属性

  • border ：设置表格的边框
  • width：设置表格的宽度
  • height：设置表格的高度

表格合并

单元格合并属性

  • 水平合并：colspan
  • 垂直合并：rowspan
  <table border="1" width="500px" height="200px">
    <tr>
      <td colspan="2">单元格1单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
    <tr>
      <td>单元格5</td>
      <td>单元格6</td>
      <td>单元格7</td>
      <td>单元格8</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">单元格9</td>
      <td>单元格11</td>
      <td rowspan="2">单元格12</td>
    </tr>
    <tr>
      <td>单元格15</td>
    </tr>
  </table>

Form表单

Form表单，用户输入，让网站具有交互性

表单在Web网页中用来给用户填写信息，从而能采集用户信息，使网页具有交互性。

所有的用户输入内容的地方都用表单来写，如用户登录注册、搜索框。

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，他能够容纳各种各样的控件。

  <form action="URI" method="GET|POST" name="myform"></form>

属性说明
action 服务器地址
name表单名称

method中GET和POST的区别

  • 数据提交方式，get把提交的数据url可以看到，post看不到
  • GET一般用于提交少量数据，POST用来提交大量数据

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

  1. 表单标签
  2. 表单域
  3. 表单按钮
  <form action="">
    <input type="text">
    <input type="submit">
  </form>

表单元素

文本框

文本域通过 <input type="text"> 标签设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

  <form>
    UserName：<input type="text" name="username">
    LoginName：<input type="text" name="loginname">
  </form>

密码框

密码字段通过标签 <input type="password"> 来定义

  <form>
    Password：<input type="password" name="passwd">
  </form>

温馨提示
密码字段字符不会明文显示，而是以星号或圆点代替。

提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

  <form action="url" method="get">
    Username：<input type="text" name="user"><br>
    <input type="submit" value="submit">
  </form>

块元素与行内元素（内联元素）

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种方式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的

参考地址为：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Content_categories

虽然HTML5的版本，元素分类更细致了，但是对初学者并不友好，所以我们仍然按照元素和内联元素做区分，这对我们的布局起到了至关重要的作用

内联元素和块级元素的区别

块级元素 内联元素
块元素会在页面中独占一行（自上而下垂直排列） 行内元素不会独占页面一行，只占自身的大小
可以设置width，height属性 行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素 一般内联元素不包含块级元素

常见块级元素

div,form,h1~h6,hr,p,table,ul等等

常见内联元素

a,b,em,i,span,strong等等

行内块元素（特点：不换行，能够识别宽高）

button,img,input等等

HTML5新增标签

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 (w3c) 完成标准制定

在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的语义化标签

扩展知识

div 容器元素，也是页面中见到的最多元素

div实现
alt text

H5实现
alt text

H5新标签

  1. <header></header> ：头部
  2. <nav></nav> ：导航
  3. <section></section> ：定义文档中的节，比如章节、页眉、页脚
  4. <aside></aside> ：侧边栏
  5. <footer></footer> ：脚部
  6. <article></article> ：代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

__EOF__

本文作者：辉辉
本文链接：https://www.cnblogs.com/TZFH/p/18294216.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   天真风华  阅读(36)  评论(0)  编辑  收藏  举报
相关博文：
· 【精选】HTML5最全知识点集合
· 前端三件套系例之HTML——HTML文档结构、文档声明、主体结构标签、HEAD头部标签、meta元信息、Body内常用标签、6 其他了解
· html5 （一）之基本标签、超链接及表格
· Web基础大全
· HTML笔记
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae