HTML基础（1）-CSDN博客

本文链接：https://blog.csdn.net/feiwuwoshi/article/details/120737774

标签和表格

html简介
- 静态页面概念
- 浏览器内核
html常见标签

html简介

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容

静态页面概念

常说的浏览器中的视觉效果，不需要与用户进行交互（浏览器对用户操作的操作做出的回应）动作，例如：用户点击登录，弹出登录框、订单点击支付会弹出支付框、搜索手表出现手表的列表等

浏览器内核

浏览器名称	渲染引擎
Chrome/safari	WebKit
Firfox	Gecko
IE	Trident
Opera	Presto（最新的是Blink）

浏览器内核原名叫渲染引擎，用于根据指定的标准解析网页结构，将结构的文本、图片、链接、音频、视频等内容渲染到页面中。

html常见标签

基础标签

标题标签

标题标签默认具有加粗效果，最小字体是16像素，最大是42像素。

在这里插入this is a normal text!
<!-- 注意点：在网页中默认字体大小最小为16px/1em，1em=16px -->
<!-- 标题标签 -->
<h1>一级标题标签，有加粗效果，字体比较大</h1>
<h2>二级标题标签，有加粗效果，字体比一级的小</h2>
<h3>三级标题标签，有加粗效果，字体比二级的再小点</h3>
<h4>四级标题标签，有加粗效果，字体比三级的再小点</h4>
<h5>五级标题标签，有加粗效果，字体比四级的再小点</h5>
<h6>六级标题标签，有加粗效果，字体比五级的再小点</h6>
<h7>没有该标签，但是浏览器依然可以解析，因为其符合标签的格式。所以不会报错，只是没有任何的效果</h7>代码片

段落标签

段落标签包裹的内容代表是一个段落，但是呢，该段落没有任何的形式上的效果和语文中段落不一样，它仅仅只是有这么一个段落的含义而已。

<p>
  我是一个段落，但是没有任何的特点，只具备段落的含义而已
</p>

列表标签

<!-- 无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写-->
<ul type="disc">
  <li>马克杯</li>
  <li>笔记本</li>
  <li>麦克风</li>
</ul>
<!-- 有序列表，带有顺序，type指定排序类型，start指定开始的位置 -->
<h5>热搜排行榜</h5>
<ol type="A" start="3">
  <li>新冠疫情</li>
  <li>外交部发言回击</li>
  <li>中国台湾出现5.8级地震</li>
</ol>
<!-- 自定义列表 dt相当于标题 dd相当于是描述 -->
<dl>
  <dt>新冠疫情</dt>
  <dd>1、成都出现新冠疫情</dd>
  <dd>2、出现疫情后所有相关人员已经进行了隔离及检测</dd>
  <dt>中国台湾</dt>
  <dd>1、台湾是中国的宝岛</dd>
  <dd>2、是祖国不可分割的一部分</dd>
</dl>

图片标签、

用于引入图片在网页中进行显示，开发常用，重点注意其相对路径的使用方式

<!-- 
src：用于指定图片所在的路径
相对路径：图片相对于HTML文件所在的位置
./表示在当前目录下
../表示返回上一级目录
绝对路径：指的是图片在电脑上的存储路径（包含到了盘符路径）
alt：用于作为图片加载失败时的文字提示
title：当鼠标在图片上悬浮时显示的提示（title属性是所有的标签都具备的一个属性）
width：设置图片的宽度
height：设置图片的高度
-->
<img src="./asset/image.jpg" alt="加载中..." title="大鱼海棠" width="100px" height="100px">

超链接标签

超链接就是网页中常用的用于页面跳转的标签，还可以用于锚点，例如：网页中常见的返回顶部效果

超链接跳转

 <!-- href：指定要跳转的网页链接target：指定新窗口的打开方式_blank：代表打开一个新窗口_top：在当前窗口中打开-->
 <a href="http://www.baidu.com" target="_top" title="http://www.baidu.com">点击访问百度</a>
 <hr>
 <!-- 以图片作为跳转的方式 -->
 <a href="http://www.baidu.com"><img src="./asset/image.jpg" alt=""></a>
 <hr>
 <!-- 当在设置超链接时，此时还不确定要跳转的链接地址，使用#作为占位符，代表当前页面 -->
 <a href="#">跳转到指定服务器地址</a>

锚点

锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转

<!-- 网页头部 -->
<a id="top" href="#buttom">跳到尾部</a>
<p>wq我是头</p>
<p>中间省略一千行</p>
<p>wq我是尾</p>
<!-- 网页尾部-->
<a id="buttom" href="#top">跳到首页</a>

<!--页面A中指定位置-->
<!-- 做个标记 -->
<a id="position"></a>
<!--页面B中进行跳转-->
<a href="index.html#position">回到超链接-跳转的页面</a>

table表格

和办公软件Excel表格是类似的，都有行（tr）和列（td），行及列都可以进行合并操作
表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题：如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中。