html - 基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_43587933/article/details/126656466

一、认识WEB

网页：主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。
浏览器：是网页显示、运行的平台。

浏览器内核： (排版引擎、解释引擎、渲染引擎)

浏览器	内核	备注
IE	Trident	目前 IE 已下架
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

二：Web标准

结构：标准用于对网页元素进行整理和分类(HTML)
表现：标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
行为：标准用于对网页模型的定义及交互的编写(JavaScript)

优点

易于维护：只需更改CSS文件，就可以改变整站的样式
页面响应快：HTML文档体积变小，响应时间短
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

三、HTML初识

1. 名称解释

HTML(Hyper Text Markup Language): 超文本标记语言

什么是超文本？

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

2. 基本结构标签

标签名	定义	说明
`<html></html>`	HTML标签	页面中的最大的标签，我们称为根标签
`<head><head>`	文档的头部	注意在head标签中我们必须要设置的标签是`title`
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

3. 文档类型

<!DOCTYPE html> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

4. 页面语言lang

用来定义当前文档显示的语言

<html lang="en">

en: 定义语言为英语
zh-CN: 定义语言为中文

lang的作用

根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

5. 字符集

在<head>标签内，可以通过<meta>标签的charset属性来规定 HTML 文档应该使用哪种字符编码。

  <meta charset="utf-8" />

utf-8 是目前最常用的字符集编码方式，也被称为万国码，基本包含了全世界所有国家需要用到的字符
其他字符集编码还有 GB2312 、BIG5 、GBK

6. HTML标签的语义化

方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页

7. 注释

注释以  结束
规范：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

<!-- 这是注释 -->

四、HTML标签

1. 标题标签

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

加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行

2. 段落标签

<p>段落标签</p>

paragraph 的缩写
文本在一个段落这种会根据浏览器窗口的大小进行自动换行
段落和段落之间保有空隙

3. 换行标签

<br />

4. 水平线标签

<hr />

5. 盒子标签

div 和 span 标签是没有语义的，是我们网页布局最主要的2个盒子。

<div></div> : 一行只能放一个大盒子
<span></span> : 一行可以放多个小盒子

6. 文本格式化标签

为文字设置粗体、斜体、下划线等效果

完整标签	简写标签	语义
`<strong></strong>`	`<b></b>`	加粗
`<em><em>`	`<i></i>`	倾斜
`<del></del>`	`<s></s>`	删除线
`<ins></ins>`	`<u></u>`	下划线

7. 图像标签

<img src="./logo.png" alt="logo" title="这是logo" width="20" height="20">

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	数值（像素）	设置图像的宽度（建议使用css）
height	数值（像素）	设置图像的高度（建议使用css）
border	数值（像素）	设置图像的边框（建议使用css）

8. 超链接标签

<a href="https://www.baidu.com" target="_blank">跳转百度</a>

属性	属性值	描述
href	url	用于指定链接目标的url地址（必须属性）
target	`_self`、`_blank`	弹出方式。 `_self`当前页面打开（默认）， `_blank`新窗口弹出

锚点链接
让用户能够快速定位到目标内容

目标元素: 在元素上添加 id 属性， <h3 id="two">第2集</h3>
点击元素: a 链接中使用 # 加上目标的id名, <a href="#two"></a>

9. 表格标签

table：用来定义表格的标签
tr：用来定义表格中的行，必须嵌套在 <table></table> 标签中
td：用来定义表格中的单元格，必须嵌套在 <tr></tr> 标签中
th：用来定义表格中的表头，表头单元格里面的内容 加粗居中 显示
caption：表格标题，通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。

<table>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>男</td>
    <td>22</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>男</td>
    <td>36</td>
  </tr>
</table>

9.1. 表格属性

属性名	属性值	描述
border	数值（像素）	设置表格的边框，默认0，无边框
cellspacing	数值（像素）	设置单元格与单元格边框之间的空白间距
cellpadding	数值（像素）	设置单元格内容与单元格边框之间的空白间距
width	数值（像素）	设置表格的宽度
height	数值（像素）	设置表格的高度
align	`center`，`left`，`right`	设置表格在网页中的水平方向对齐方式

9.2. 表格结构标签

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead，tbody，tfoot 来标注，这样更好的分清表格结构。

<thead></thead> 用于定义表格的头部。用来放标题之类的东西。
<tbody></tbody> 用于定义表格的主体。放数据本体。
<tfoot></tfoot> 放表格的脚注之类。

9.3. 合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

10. 列表

容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。
列表最大的特点就是整齐、整洁、有序，跟表格类似，但是它可组合自由度会更高。

10.1. 无序列表 ul

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li></li> 相当于一个容器，可以容纳所有元素。

10.2. 有序列表 ol

<ol type="A"> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

<ol> 标签中的 type 属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
常用的type属性值分别为是 1，a，A，i，I
<ol reversed="reversed"> 中的 reversed 属性能够让有序列表中的序列倒序排列。
<ol start="3"> 中的 start 属性值为3，有序列表中的第一个序列号将从3开始排列。

10.3. 自定义列表 dl

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

11. 表单标签

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成

11.1. form表单域

表单域是一个包含表单元素的区域
<form></from> 标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

<form action="url地址" method="提交方式" name="表单域的名称"></form>

11.2. input输入表单元素

<input /> 标签为单标签，type 属性设置不同的属性值用来指定不同的控件类型

<input type="属性值" value="默认值">

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

type 属性的属性值及描述如下

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清楚表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

11.3. label标签

用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验

第一种用法就是用label标签直接包含input表单，适合单个表单选择

  <label> 用户名： 
    <input type="radio" name="usename" value="请输入用户名">   
  </label>

第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

11.4. textarea文本域元素

用于定义多行文本输入的控件
cols=“每行中的字符数” rows=“显示的行数”

  <textarea>文本内容</textarea>

11.5. select下拉表单元素

<select> 中至少包含一对 <option>
在 option 中定义 selected ="selected" 时，当前项即为默认选中项。

<select>
  <option>请选择</option>
  <option>选项1</option>
  <option selected ="selected">选项2</option>
  <option>选项3</option>
  ...
</select>