UNIQ | Life is only inevitable, there is no chance.
2017-10-03 | UNLOCK

html学习总结（一）

一，浏览器内核

1.浏览器内核可分为渲染引擎和js引擎：

渲染引擎:它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

JS 引擎:则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

2.常见浏览器分类

（1） Trident（IE内核）

（2）Gecko（火狐）

（3）Webkit（Safari）

（4）Chromium（Chrome）

（5）Presto

3.Web标准的构成

主要包括结构，样式和行为三个方面

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

4.Html语法骨架

1
2
3
4
5
6
7
<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

HTML标签：

作用所有HTML中标签的一个根节点。 最大的标签 根标签

head标签： 文档的头部

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

title标签： 文档的标题

作用：让页面拥有一个属于自己的标题。

body标签：文档的主体 以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

5.HTML标签分类

（1）双标签

1
<标签名>内容</标签名>

（2）单标签

1
<标签名>

6.HTML标签关系

（1）嵌套关系

1
2
3
<head>
	<title></title>
</head>

（2）并列关系

1
2
3
4
5
<head>
    <body>
        
    </body>
</head>

7.文档类型<!DOCTYPE>

1
<!DOCTYPE html>

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

8.字符集

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

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

9.HTML常用标签

标题标签
1
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义： 作为标题使用，并且依据重要性递减

基本语法格式

1
<hn>   标题文本   </hn>
段落标签
1
<p>  文本内容  </p>

标签语义：文章分段

水平线标签
1
<hr>

标签语义：将段落与段落之间隔开，使得文档结构清晰，层次分明

换行标签
1
<br>
文本格式化标签
1
2
3
4
<strong>加粗</strong>
<em>斜体</em>
<del>删除线</del>
<u>下划线</u>

10.图像标签

1
<img src="图像URL" />
标签属性：
1
2
3
4
5
6
7
8
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>


在上面的语法中：
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取  键值对 的格式   key="value"  的格式
img属性
1
2
3
4
5
6
7
属性		属性值		描述
src		 URL	   路径
alt		 文本   	  不能显示时替换的文本
title    文本       鼠标悬停的内容
width 	 px        宽度
height   px        高度
border   数字       图像边框宽度

11.链接标签

1
2
3
4
5
<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.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

12.base标签

1
2
3
<head>
    <base target="blank/self">
</head>

标签语义：设置链接打开方式窗口是新建还是覆盖

13.锚点定位

通过创建锚点，快速定位到目标内容

1
2
3
4
5
1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

14.注释标签

1
<!--注释语句--> Ctrl+/

注释的两个作用：

1.让部分代码不让浏览器执行

2.给程序员友好的提示

15.列表标签

无序列表
1
2
3
4
5
6
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

    1. 中只能嵌套
    • ，直接在
        标签中输入其他标签或者文字的做法是不被允许的。

      • 与
        • 之间相当于一个容器，可以容纳所有元素。

      • 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

      有序列表
      1
      2
      3
      4
      5
      6
      <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        ......
      </ol>
      自定义列表
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        ...
        <dt>名词2</dt>
        <dd>名词2解释1</dd>
        <dd>名词2解释2</dd>
        ...
      </dl>

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

      16.表格

      创建表格
      1
      2
      3
      4
      5
      6
      7
      <table>
        <tr>
          <td>单元格内的文字</td>
          ...
        </tr>
        ...
      </table>

      1.table用于定义一个表格。

      2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

      3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

      注意：

      1. 中只能嵌套
      2. 标签，他就像一个容器，可以容纳所有的元素
      表格属性

      border：设置表格边框的宽度（默认border=’0’）

      cellspacing：单元格与单元格之间的空白间距

      cellspadding：单元格内容与边框之间的空白间距

      width：表格宽度

      height：表格高度

      align：表格在网页中的水平对齐方式（left,right,center）

      表头标签

      表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

      表格结构

      在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

      ：用于定义表格的头部。

      必须位于

      标签中，一般包含网页的logo和导航等头部信息。

      ：用于定义表格的主体。

      位于

      标签中，一般包含网页中除头部和底部之外的其他内容。

      表格标题

      caption

      1
      2
      3
      <table>
         <caption>我是表格标题</caption>
      </table>
      合并表格

      跨行合并：rowspan（跨多少行删多少行）

      跨列合并：colspan（跨多少行删多少行）

      17.div span标签

      div在浏览器中表示一个小区域，不会增加任何的效果改变，而是语义变了，div中所有子元素是在一个小区域中。div是一个容器，里面什么都能放，设置包括它自己 。

      span也是表示一个小区域，但是只能是文本级别的区域，也就是span中只能够放文字、图片、表单元素等信息。

      现在的网页开发基本都是用div+css布局实现的。

      div和span的使用
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <div>
        <h3>中国主要城市</h3>
      <ul>
           <li>北京</li>
           <li>深圳</li>
      </ul>
      </div>

      <div>
        <h3>美国主要城市</h3>
      <ul>
           <li>伦敦</li>
           <li>纽约</li>
      </ul>
      </div>


      <p>
         商品简介，商品简介
          <span>
              <a href=””>详细信息</a>
              <a href=””>购买</a>
      </span>
      </p>

      18.内联元素和块级元素

      1. div标签（独占一行 block） （div,form,table,p,pre,h1~h6,dl,ol,ul）
        特点：块级元素独占一行，可以设置宽度和高度。如果不设置宽度，则默认宽度为父元素的宽度。
      2. span标签（占一块 inline）(span,a,label ,select)
        特点：所有元素在一行显示。不能设置宽高。默认宽度为文字或者内容本身的宽度。
      3. 行内块元素（inline-block） (image input)
        特点：所有元素在一行显示，可以设置宽高(具备块级元素的特征，也具备行内元素的特征)。

      19.表单标签

      包括表单控件，提示信息，表单域

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

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

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

      表单域

      在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

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

      常用属性：

      1. Action
        在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

      2. method
        用于设置表单数据的提交方式，其取值为get或post。

      3. name绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

        “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.igeek.cn/images/logo.gif”。

      4. 用于指定表单的名称，以区分同一个页面中的多个表单。

      注意： 每个表单都应该有自己表单域。

      input控件

      text属性

      <input type=”text”>

      定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

      其它常用属性:

      l name:定义标签名称

      l value:定义标签值

      l size:定义输入字符的长度（可以输入超过指定长度的字符，但只会显示指定个数）

      l maxlength:定义可输入最大字符个数

      l placeholder: 占位文字

      password

      <input type=”password”>

      定义密码字段。该字段中的字符被掩码.

      其它常用属性:

      l name:定义标签名称

      l value:定义标签值

      l size:定义输入字段的长度

      l maxlength:定义可输入最大字符个数

      radio

      <input type=”radio”>

      定义单选按钮。

      其它常用属性:

      l name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。

      l value:定义标签值

      l checked:定义该标签默认被选中。

      checkbox

      <input type=”checkbox”>

      定义复选框。

      其它常用属性:

      l name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。

      l value:定义标签值

      l checked:定义该标签默认被选中。

      file

      <input type=”file”>

      定义输入字段和 “浏览”按钮，供文件上传。

      其它常用属性:

      l name:定义标签名称

      button

      <input type=”button”>

      定义可点击按钮（多数情况下，用于通过JavaScript 启动脚本，如果不写什么也不发生）

      其它常用属性:

      l name:定义标签名称

      l value:按钮显示名称

      submit

      定义提交按钮。提交按钮会把表单数据发送到服务器。

      其它常用属性:

      l name:定义标签名称

      l value:按钮显示名称

      reset

      定义重置按钮。重置按钮会清除表单中的所有数据。

      其它常用属性:

      l name:定义标签名称

      l value:按钮显示名称

      img

      定义图像形式的提交按钮。

      这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

      其它常用属性:

      l name:定义标签名称

      l src:定义作为提交按钮显示的图像的url

      l alt:定义作用图像的替代文本。

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

      “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.igeek.cn/images/logo.gif”。hidden

      <inputtype=”hidden”>

      定义隐藏的输入字段。提交时服务端需要用到的信息，但是又不想让用户看到

      常用属性:

      l name: 定义标签名称

      l value:定义标签值

      20.label标签

      label 标签为 input 元素定义标注（标签）。

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

      如何绑定元素呢？

      for 属性规定 label 与哪个表单元素绑定。

      1
      2
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" value="male">

      21.textarea控件

      如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

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

      22.下拉菜单

      1
      2
      3
      4
      5
      6
      <select name="select" multiple="multiple" size="6">
      		<option value="wx" selected="selected">无锡</option>
      		<option value="wz" selected="selected">苏州</option>
      		<option value="sh" selected="selected">上海</option>
      		<option value="ks" selected="selected">昆山</option>
      </select>

      注意：

      1. <select></select>中至少应包含一对<option></option>。
      2. 在option 中定义selected =” selected “时，当前项即为默认选中项。

      23.其他标签

      上标下标
      1
      2
      3
      4
      5
      6
      7
      <p>
      This text contains <sub>subscript</sub>
      </p>

      <p>
      This text contains <sup>superscript</sup>
      </p>
      pre标签（照原样输出）
      1
      2
      3
      4
      5
      6
      <pre>
              这是
              预格式文本。
              它保留了      空格
              和换行。
      </pre>
      iframe

      iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可以理解为浏览器中的浏览器

      1
      iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可以理解为浏览器中的浏览器

      24.路径

      相对路径

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

      1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=”logo.gif” />。

      2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=”img/img01/logo.gif” />。

      3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src=”../logo.gif” />。

      绝对路径

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

      “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.igeek.cn/images/logo.gif”。

      HTML

      评论加载中