html总结_《html》统计总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_42235173/article/details/90717263

浏览器

浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等五大浏览器。

浏览器内核

浏览器内核 = 渲染引擎（取得网页内容html+css等，输出至显示器或打印机） + JS 引擎（解析js语言，实现动态效果；越来越独立，内核倾向于只指渲染引擎）

浏览器	浏览器前缀	内核	其他
IE	-ms-	Trident	猎豹、360、百度
Edge（Window10）	-ms-	EdgeHTML
Firefox	-moz-	Gecko	代码公开
Safari	-webkit-	Webkit	Apple Safari 、Android 默认浏览器
Chrome	-webkit-	Chromium/Blink	WebKit 的分支, 二次开发
Opera	-o-	Presto（已经废弃）—> Blink

Web标准（重点）

Web 标准的好处

1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

Web 标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

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

结构标准：结构用于对网页元素进行整理和分类，主要学的是HTML。 最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要是 Javascript

HTML 初识

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

HTML骨架格式

HTML 有自己的语言语法骨架格式：
标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

<!-- HTML5的DOCTYPE声明做了最大简化,<!DOCTYPE> 用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范 -->
<!DOCTYPE html>
<!-- lang属性根据当前网页大量使用的语言种类决定，大量使用中文则使用zh-CN，英文则使用en -->
<!-- HTML标签：作用所有HTML中标签的一个根节点。 最大的标签   根标签 -->
<html lang="en">
<!-- head 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置
以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。-->
<head>
	<!-- utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
		 gb2312 简单中文  包括6763个汉字
		 BIG5   繁体中文 港澳台等用
		 GBK包含全部中文字符,是GB2312的扩展，加入对繁体字的支持，兼容GB2312
    -->
    <meta charset="UTF-8">
    <!-- 字符编码的设置一定是在head中的第一行 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>页面标题</title> <!-- 必须要设置 -->
</head>
<!-- body文档的主体---body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等）-->
<body>
</body>
</html>

HTML标签的语义化

所谓标签语义化，就是指标签的含义。

HTML5中制定了一系列语义化标签：
- section：独立的内容节块，一般包含标题和内容
- article：一种特殊的section，定义文档中的具体的文章内容
- nav：页面导航的链接组
- aside：标签用来装载非正文的内容，此标签中的文字权重低
- header：定义文档的页眉，不仅仅是文档的页头可以使用header，一个独立块的头部也应该使用header
- footer：定义section或document的页脚
我们应该根据内容的性质决定使用特定的标签
h1一定只能出现一个，不是HTML的约定，页面中最重要的内容
time标签专门用于时间，
- datetime应该是一个标准时间格式，
- pubdate指的是当前时间为article的发布时间
在H5中，主体结构标签默认和DIV都是相同的块级效果，
但是DIV没有语义，而以上标签有特定语义

为什么要有语义化标签

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。
遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML常用标签

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签 (h1-h6, 依据重要性递减)
段落标签( <p>...</p>) paragraph [ˈpærəgræf]

默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(<hr />) horizontal [ˌhɔrəˈzɑntl]
换行标签(<br />) break 打断 ,换行
div span标签(没有语义) div — division — 分割，分区
文本格式化标签(粗体、斜体或下划线等)

（粗体、斜体、删除线、下划线效果） — b i s u 只有 “使用”, 没有 “强调” 的意思 strong em del ins 语义更强烈

标签属性(<标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>)

<hr width="400" />

图像标签img (重点) — image

<!-- src属性用于指定图像文件的路径和文件名, 必需 -->
<img src="图像URL" alt="不能显示时的替换文本" title="鼠标悬停显示文本" width="图像宽度" height="图像高度" border="图像边框" />

链接标签(a) — anchor [ˈæŋkə®] — 锚, 铁锚

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。

1.使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
  <a href="#two">   
2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

base 标签基本的

base 为页面上的所有链接规定默认地址或默认目标

< head>
	<base href="..." target="_blank" />  <!-- 在新窗口中打开 -->
< /head>

特殊字符标签（` 空格 < 小于 >大于` ）

注释标签 ``

相对路径、绝对路径

列表标签

无序列表 ul 、有序列表 ol

 1. <ul></ul>中只能嵌套<li></li>
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性

定义列表（理解）

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

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

表格 table(会使用)

<!-- table用于定义一个表格 -->
<table>
  <!-- tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格 -->
  <tr>
    <!-- td可以容纳所有的元素 -->
    <th>表头单元格一般位于表格的第一行或第一列，其文本加粗居中</th>
    <td>单元格内的文字</td>
    <!-- td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格） -->
  </tr>
  ...
</table>

更复杂的 HTML 表格也可能包括 caption表格标题、col、colgroup、thead、tfoot 以及 tbody 元素

thead、tfoot、tbody必须同时使用，<thead> 内部必须拥有 <tr> 标签

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格
删除单元格删除的个数 = 合并的个数 - 1

<table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
    <tr>
        <td>1.1</td>
        <td colspan="2">1.2</td>
        <!--<td>1.3</td>--></tr>
    <tr>
        <td>2.1</td>
        <td rowspan="2">2.2
            <br/>3.2</td>
        <td>2.3</td></tr>
    <tr>
        <td>3.1</td>
        <!--<td>3.2</td>-->
        <td>3.3</td></tr>
</table>

1.1	1.2
2.1	2.2 3.2	2.3
3.1	2.2 3.2	3.3

总结表格

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。

表格的学习要求：能手写表格结构，并且能合并单元格。

表单标签(掌握)

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域： form
相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(`<input type="..." />`)

label标签(理解)

label 标签为 input 元素定义标注（标签）, label 元素不会向用户呈现任何特殊效果。

<!-- for 属性规定 label 与哪个表单元素绑定 -->
<label for="male1">Male</label>
<input type="radio" name="sex" id="male1" value="male"> 
<!-- input的单选按钮显示文本为 Male, 因为for属性与id="male1"绑定了 -->

textarea控件(文本域)

text 文本框只能写一行文本
textarea 文本域多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单(`<select><option>...</option></select>`)

<select>
  <option selected ="selected">选项1</option>  <!-- 默认选中项 -->
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

表单域 form

<!-- action属性用于指定接收并处理表单数据的服务器程序的url地址 -->
<form action="url地址" method="提交方式get或post" name="表单名称">
  各种表单控件
</form>