HTML学习总结_html技术分析总结-CSDN博客

本文链接：https://blog.csdn.net/q_w_e_rt_y/article/details/116232480

本文介绍了HTML的基本概念，包括浏览器的工作原理、HTML的结构和作用、Web开发标准以及HTML的开发实践。详细讲解了浏览器的内核、如何展示网页，以及HTML的组成部分如head和body标签，强调了W3C标准的重要性，并提供了HTML标签的实例。

摘要由CSDN通过智能技术生成

HTML学习总结

1. 关于浏览器
2. 关于HTML

1. 关于浏览器

1.1 什么是浏览器

浏览器是一个用来展示网页的软件，浏览器软件有很多种，市面上常用的如：chrome, firefox, opera, safari, edge，所以作为一个前端开发者，电脑上必须要下载市面上常用的浏览器，ie8及以下可以不考虑

1.2 浏览器内核

浏览器底层有一个组件叫内核（解析引擎），它就是用来负责解析html css js, 负责将这些代码展现为图形化的界面，目前市面上有很多内核，都是不同厂家制造的，不同的内核在解析html css js代码的时候，遵守的规则可能是不一样的，所以在开发中常常会遇到一种现象，相同的代码在不同浏览器展现出来的效果不一致，作为前端工程师，一定要特别注意这个，以保证我们编写出来的代码能兼容市场上的大部分浏览器，常见的浏览器内核：

Trident ：IE
Gecko：FireFox
Webkit：Safari
Chromium/Blink：Chrome
Chakra：Edge

1.3 浏览器展示网页

第一种：请求网页
当输入网址按下回车的时候，浏览器向服务器发送一个请求，服务器接收到请求后对请求做处理，将请求到的内容响应给浏览器，浏览器拿到服务器响应的内容后，会进行解析，然后展示。
服务器返回给浏览器的内容是： HTML+CSS+JS代码，浏览器只能正确的解析这三种代码。
第二种：本地打开
将代码写好后，把文件后缀名改为.html格式文件，直接双击打开即可

2. 关于HTML

2.1 什么是HTML

浏览器只能识别HTML代码、CSS代码和JavaScript代码，如果服务器响应的内容包含了其它的代码(如Python、C#、Java)，那么浏览器是无法正确解析识别的。所以，服务器返回给浏览器的代码一定是HTML+CSS+JS。
HTML：HyperText Markup Language（超文本标记语言），用于描述网页有什么，是为网页的结构层
CSS：Cascading Style Sheets（层叠样式表），用于描述网页上的内容长什么样子，是为网页的样式层
JS：JavaScript 用于描述网页上的内容具备什么样的行为，是为网页的行为层
如果还是无法理解，那么我们举个例子，把一个正常网页比作一个正常人，HTML相当于人的骨架，将人体撑起来，CSS相当于人的肤色等，描述人的外貌，JavaScript相当于人的行为，如走、跑等行为。

2.2 Web开发标准

建议，在开发的过程中，将html代码、CSS代码、JavaScript代码，分别写在三个不同的文件中，这样做的好处

代码阅读更简单
代码维护成本更低
提高浏览器渲染速度
内容可以被更多设备浏览

代码遵守W3C开发标准及规范

W3C组织

World Wide Web Consortium 万维网联盟 HTML CSS的规范. js ECMA
是Web技术领域最具权威和影响力的国际中立性技术标准机构
该组织制定了HTML标准. HTML由该组织来维护.
也就是说，它规定了HTML代码应该如何编写，浏览器内核应该如何去解析.

时至今日，W3C已经提出多个版本的HTML.

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准 50个标签.
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准 70
HTML 5——2014年10月28日，W3C推荐标准 100
HTML6
浏览器内核在解析不同版本的html时的解析规则可能不一样，所以在编写html代码时需要声明html代码的版本，怎么声明呢？
使用 DOCTYPE
DOCTYPE标签必须写在第一行，告诉浏览器使用的html5

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

2.3 HTML开发

任何一个html网页代码，都会有如下结构代码

<html>
	<head></head>
	<body></body>
</html>

html标签是根标签，一个html文件中有且只有一对
head标签中用来存放对网页的描述信息
body标签中用来写网页内容
html中的标签大多为双标签，及有开头标签和结束标签，结束标签标签名前有 / ，并且标签之间可以嵌套或并列（即为父子关系或者兄弟关系）但不能交叉，如下代码是不被W3C允许

<head>
<title>
</head>
</title>

单标签如：input，img，meta等；有两种写法，<input>、<input/> 个人建议使用后者

2.3.1 head标签

head标签中一般只放两种标签，
1.title标签：用来定义网页标题

<head>
	<title>firstPage</title>
</head>

打开网页时就会发现，网页标题就是title中的内容
2.meta标签：用来存放网页的描述信息，如：

<head>
	<meta charset="utf-8"> <!--这句代码的意义,是告诉浏览器,当前网页的字符编码为UTF-8 -->
</head>

2.3.2 body标签中常用的内容标签

1.h1~h6：双标签，用来表示文章标题，字体大小从h1逐级递减，加粗显示，独占一行
2.p：双标签，用来表示一个段落，独占一行，如果内容一行占不下，会另外起1行，每1个段落的前后会留些许空白
3.hr：单标签，用来在网页展示一条水平线
4.文本格式化标签：

标签	显示效果	推荐使用
`<b></b>` 或者 `<strong></strong>`	被包裹的文本加粗显示	`<strong></strong>`
`<i></i>` 或者 `<em></em>`	被包裹的文本斜体显示	`<em></em>`
`<s></s>`或者 `<del></del>`	~~被包裹的文本以删除线显示~~	`<del></del>`
`<u></u>`或者`<ins></ins>`	被包裹的文字以下划线显示	`<ins></ins>`

推荐标签语义化效果更强
5.img：单标签，用来显示一张图片

属性名	属性值	作用详解
src	url或者图片本站路径	指定要显示的图片的路径
title	文本	鼠标悬停时显示的内容
alt	文本	图片无法显示时显示的内容（建议这个属性必须）
width	数字	设置显示的图形宽度默认就是图片本身的宽度
height	数字	设置显示的图形高度默认就是图片本身的高度
border	数字	设置显示的图形边框默认就是图片没有边框

6.a：双标签，用来定义一个链接，超链接文本用a标签包裹

属性名	取值	详解
href	外部链接或者内部链接	外部链接写完整URL, 内部链接写相对地址即可
target	_self _blank	_self默认值代表在当前窗口打开页面. _blank在新窗口中打开

空链接：编代码时不知道超链接指向何处，可以在 href 属性中填 #
多媒体超链接：即在a标签中使用img，video，audio等标签
锚链接：用来跳转至网页指定地点，在指定地点处添加一个id，href属性值为该id，即可实现
base标签：单标签，base标签的作用在于设置页面上所有a标签target的值，写在head标签里面

<head>
	<base target="_blank"/>
</head>

7.转义字符：在页面上显示特殊字符时正常写是无法显示的，这个时候就要用到转义字符

8.注释标签：注释标签用于在HTML文档中做注解。注释标签不会被浏览器解析，它的作用仅仅是我们在写代码的时候，如果结构比较复杂，我们对这段代码使用注释标签做1个解释，这样方便下次我们代码的阅读，建议, 不要写一些无聊的注释因为

会被下载到浏览器被用户看到
浪费流量

写法：
9.列表标签：列表标签的作用: 用来展示一组数据。分为3种，分别是有序列表，无序列表，自定义列表

无序列表：<ul></ul>
有序列表：<ol></ol>
用法

<ul>
	<li>内容一</li>
	<li>内容二</li>
	<li>内容三</li>
</ul>

注意：

无序列表中的各项数据没有先后之分，可以调换位置。
ul标签中只能有li标签. 不能有其他标签.
ul标签中不能单独出现,就是说,不能只写一个ul标签,中间不包含任何内容.
li标签是一个容器,可以放其它标签.
有序列表和无序列表使用方法相同，区别在于有序列表表示的数据是有顺序的

自定义列表：<dl></dl>，作用主要是两个方面

显示带层级关系的列表
解释名词的格式
代码如下：

<dl>
	<dt>家用电器</dt>
    <dd>电视</dd>
    <dd>空调</dd>
    <dd>洗衣机</dd>
    <dd>冰箱</dd>
    <dd>厨卫大电</dd>
    <dd>家庭影音</dd>
    <dt>电脑办公</dt>
    <dd>电脑整机</dd>
    <dd>电脑配件</dd>
    <dd>外设产品</dd>
    <dd>游戏设备</dd>
    <dd>网络设备</dd>
    <dd>办公设备</dd>
</dl>

在这里插入图片描述
10.表格标签：<table></table>，基本使用：

table标签表示定义一个表格
tr标签在table标签中表示定义了一行
td标签在tr标签中表示定义了一个单元格
最终,我们将数据存储在td单元格中

<table> <!-- table标签定义一个表格 -->
	<tr> <!-- tr标签定义了一行 -->
        <td>数据1</td> <!--td标签表示在第1行中定义了1个单元格 -->
        <td>数据2</td>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
    <tr> <!-- tr标签定义了一行 -->
        <td>数据5</td> <!--td标签表示在第1行中定义了1个单元格 -->
        <td>数据6</td>
        <td>数据7</td>
        <td>数据8</td>
    </tr>
    <tr> <!-- tr标签定义了一行 -->
        <td>数据9</td> <!--td标签表示在第1行中定义了1个单元格 -->
        <td>数据10</td>
        <td>数据11</td>
    	<td>数据12</td>
	</tr>
</table>

在这里插入图片描述
表格属性：

单元格跨行跨列注意项：

只能从上往下或者从左往右跨
保证跨完以后，总的单元格数保持一致，否则就会畸形显示

符合W3C规范的表格：

表格一般分为标题、表头、表主体、表尾组成.
W3C建议我们最好将表格数据分为这么几个部分
caption标签定义表格的标题.
thead标签定义表格的头部
tbody标签定义表格的主体
tfoot标签定义表格的尾部
W3C使用建议: 如果我们同时使用了thead tbody tfoot 建议出现顺序thead tfoot tbody.
使用方式：

<table border="1" cellspacing="0" cellpadding="0" width="200" height="150">
	<caption>个人信息表</caption>
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>张三</td>
			<td>20</td>
			<td>男</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>21</td>
			<td>男</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>总计</td>
			<td colspan="2">2</td>
		</tr>
	</tfoot>
</table>

在这里插入图片描述
*th标签仅在thead内替换td使用，内容加粗并居中

11.表单标签：<form></form>，重要知识点。主要用来收集用户数据，将数据提交到服务器中

form表单属性：

属性名	属性值	作用详解
action	文本	提交到服务器的url
method	文本	提交数据的方式 get/post 等

input元素：单标签，<input/>，重要，主要用来让用户在网页上输入各种类型的数据，通过input标签的type属性，可以展示出不同的输入类型元素
input属性：

属性名	属性值	作用详解
type	text	文本输入框
	password	密码输入框
	checkbox	复选按钮
	radio	单选按钮
	button	普通按钮
	submit	提交按钮
	reset	表单重置按钮
	image	图像形式的提交按钮
	file	选择文件按钮
	hidden	隐藏元素，用于与服务器交互
name	文本,程序员自定义	元素名称
value	文本,程序员自定义	input控件中的默认文本值
size	正整数	input控件中在页面显示的宽度
checked	任意值(checked)	定义选择控件的默认选中项
maxlength	正整数	控件允许输入的最大字符数
readonly	任意值(readonly)	文本框内的数据是否可编辑

text：展示一个文本输入框，让用户在网页上输入文本
password：展示一个密码输入框，无论用户输入什么内容，都是以*显示
checkbox：展示一个复选框

<form>
    爱好：<input type="checkbox" id="eat" /><label for="eat">干饭</label>
    <input type="checkbox" id="fadai" /><label for="fadai">发呆</label>
    <input type="checkbox" id="sleep" /><label for="sleep">睡觉</label>
  </form>

在这里插入图片描述
radio：展示一个单选框

<form>
	性别：<input type="radio" id="man" name="sex" /><label for="man">男</label>
    <input type="radio" id="woman" name="sex" /><label for="woman">女</label>
    <input type="radio" id="secret" name="sex" /><label for="secret">保密</label>
</form>

在这里插入图片描述
实现多个单选按钮互斥，给每个单选框加上相同的name就行了

label标签：<label></label>，关联所属的单选按钮或者复选按钮，使用方法：

使用label标签将文本包裹起来
为要获取焦点的控件给1个id属性
指定label标签指定for属性为关联控件的id属性的值

button：展示一个普通的按钮，使用value属性来定义按钮的文本
file：展示一个文件选择按钮，供我们选择文件以便上传到服务器
hidden：元素不会显示在页面上，一般用来与服务器交互的时候，浏览器存储一些数据

12.下拉列表：<select></select>，展示1个下拉列表数据

其中是1个1个的option标签，每1个option就是1个下拉数据
为option标签指定selected属性，以默认选中该项
使用<optgroup></optgroup>标签为下拉选项进行分组

<select>
   <optgroup label="第一组">
     <option value="选项1">选项1</option>
     <option value="选项2">选项2</option>
   </optgroup>
   <optgroup label="第二组">
     <option value="选项3" selected="selected">选项3</option>
     <option value="选项4">选项4</option>
     <option value="选项5">选项5</option>
   </optgroup>
</select>

在这里插入图片描述
13.文本域标签：<textarea></textarea>，文本框只能显示一行文本, 而textarea文本域可以显示编辑多行文本

<textarea  cols="30" rows="5">这里是文本域，可以输入多行文本!</textarea>

cols属性文本域的列数
rows属性文本域的行数.

14.布局标签：<div></div> <span></span>，常用，没有任何显示作用，他们被做为一个容器来容纳其它标签，以便适应CSS来统一布局

15.框架标签：<iframe></iframe>，创建包含另外一个文档的内联框架（即行内框架），通过iframe标签的src属性，可以指定内联的网页

16.文件路径：在html中引用其他文件，应当正确指向该文件，而指向其他文件路径有两种方式

绝对路劲：从盘符开始的本地绝对路径.，这样写的话，移植性很低 (把文档拷贝到另外1台电脑上，这个图片的路径就发生变化了)
相对路径：指目标文件相当于当前文件的路径，如果目标文件与当前文件在同一目录下，可以直接写文件名或者./文件名，以此类推，当前目录上一级目录则是../，上上级目录则是../../

以上仅属个人对html的简单总结，如有问题或缺陷，欢迎指出