html基础知识总结

小二货的学习日记~✍

路漫漫其修远兮

祝看到这篇文章的各位都心情事成呀！（若有不对的地方，可以告诉我哈）

1、web 标准

构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。一般可以简洁为：web 三标准：结构、样式、行为。

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

2、html 骨架标签

页面的编写过程中，按照此顺序来进行编写代码，不可以打乱顺序哈????

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

3、文档类型

<!DOCTYPE html>

< !DOCTYPE > 声明位于文档中的最前面的位置，处于 < html > 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

< !DOCTYPE html > 就是告诉浏览器按照 HTML5 规范解析页面.

4、浏览器及内核

ie，内核：trident
firefox，内核：gecko
safari，内核：webkit
chrome，内核：blink
opera，内核：blink

5、base 标签

base 标签可以设置整体链接打开的状态，但是要写在 <head></head> 之间，会把 body 页面所有的链接都默认设置为：target = “_blank”

<base target="_blank" />

6、< image > 标签 title 和 alt 属性的区别：

alt 是当图片不能正常显示时，用户前端可以查看到的内容，实质是代替图片的内容。

title 是当鼠标移动到图片时，显示 title 的内容，实质是对图片的注释。

7、页面语言 lang

<html lang="en">  指定 html 语言种类

最常见的 2 个：

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

8、字符集

这句代码非常关键，是必须要写的代码，否则可能引起乱码的情况。

<meta charset="UTF-8" />

字符集 (Character set) 是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

utf- 8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312。

gb2312 简单中文包括 6763 个汉字 GUO BIAO
BIG5 繁体中文港澳台等用
GBK 包含全部中文字符是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312
UTF- 8 则基本包含全世界所有国家需要用到的字符

9、HTML 标签的语义化

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

10、路径(重点、难点)

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

打开目录文件夹的第一层就是 根目录

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可，如 <img src=”baidu.gif” />
下一级路径	“/”	图像文件位于 HTML 文件同级文件夹下（例如文件夹名称为：images）如 <img src=”images/baidu.gif” />。
上一级路径	“../”	在文件名之前加入“../”，如果是上两级，则需要使用“../ ../”，以此类推，如 <img src=”../baidu.gif” />。

绝对路径

绝对路径以 Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。绝对路径即图片在当前设备所保存的文件目录路径。

11、锚点定位（难点）

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

创建锚点链接分为两步：

93. 使用相应的 id 名标注跳转目标的位置。(找目标)
  <h3 id="two"> 第 2 集 </h3> 
95. 使用 <a href="#id 名"> 链接文本 </a> 创建链接文本（被点击的）（拉关系）我也有一个姓毕的姥爷..
  <a href="#two">  
<!-- 需要注意的是：id 名称必须一致 -->

12、label 标签

目标：提高用户体验、为用户提供最优秀的服务

作用：用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点

绑定表单元素的方法：

第一种用法就是用 label 直接包括 input 表单。

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

第二种用法 for 属性规定 label 与哪个表单元素绑定,for+id 来控制，如???? 所示：

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

总结：当我们鼠标点击 label 标签里面的文字时，光标会定位到指定的表单里面

13、form 表单域

收集的用户信息怎么传递给服务器？
通过 form 表单域
目的：

在 HTML 中，form 标签被用于定义表单域，以实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。

<form action="url 地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

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

注意:
每个表单都应该有自己表单域。ajax 后台交互的时候，必须需要 form 表单域。