HTML基础

浏览器内核

浏览器内核分为两部分：渲染引擎(layout engineer 或者 rendering engine)和JS引擎
渲染引擎负责取得网页的内容(HTML、XML、图像等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后输出至显示器或打印机，浏览器内核的不同对于网页语法的解释会有不同，渲染的效果也就不同
JS引擎解析并执行JavaScript语言，实现网页的动态效果
常见的浏览器内核有四种：

• Trident(IE内核)
  代表：IE浏览器、遨游浏览器、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等
  Windows10发布后，IE将其内置浏览器命名为Edge，Edge最显著的特点是新内核EdgeHTML
• Gecko(Firefox)
  Mozilla Firefox(火狐浏览器)采用该内核，Gecko的特点是代码完全公开，可开发程度很高
• Webkit(Safari)
  代表：遨游浏览器3、Apple Safari、Symbian手机浏览器、Android浏览器
• Chromium/Blink(Chrome)
  在Chromium项目中研发Blink渲染引擎，内置于Chrome浏览器中，Blink其实是Webkit的分支

Web标准

Web标准不是某一个标准，而是有W3C和其他标准化组织制定的一系列标准的集合
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面

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

HTML初识

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。
所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接

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

总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来

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

• 字符集
  ，utf-8是目前最常用的字符集编码方式，常见的字符集编码有GBK和GB2312
GB2312，简体中文，包括6763个汉字
  BIG5，繁体中文，港澳台等用
  GBK，包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
  UTF-8包含全世界所有国家需要用到的字符

• 标签

  • 排版标签
    • 标题标签

    • 段落标签

    • 水平线标签

      ---

      单标签
    • 换行标签
单标签
    • div标签
      分区
    • span标签 跨度
  • 文本格式化标签

    标签	效果
    和	粗体(XHTML推荐使用strong)
    和	斜体(XHTML推荐使用em)
    和	删除线(XHTML推荐使用del)
    和	下划线(XHTML不赞成使用u)

• 标签属性
  使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
  <标签名 属性1="属性值" 属性2="属性值"...>标签内容

  1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
  3. 任何标签的属性都有默认值，省略该属性则取默认值

• 图像标签
  单标签，基本语法：
  
  img标签的属性如下：

  属性	属性值	描述
  src	URL	图像的路径
  alt	文本	图像不能显示时的替换文本
  title	文本	鼠标悬停时显示的内容
  width	像素(XHTML不支持页面百分比%)	图像的宽度(属性值不需要带px)
  height	像素(XHTML不支持页面百分比%)	图像的高度(属性值不需要带px)
  border	数字	边框的宽度(属性值不需要带px)

  其中src为img标签的必需属性

• 链接标签

  • 基本语法：
    文本或图像
href：用于指定链接目标的url地址
    target：用于指定链接页面的打开方式，取值有_self、_blank、_parent、_top几种，其中_self为默认值，_blank为在新窗口中打开方式
    外部链接：需要添加http://
    内部链接：直接链接内部页面名称
    如果没有确定链接目标时，通过将href的属性值定义为#(即href="#")，表示该链接暂时为空链接

  • 锚点定位
    通过创建锚点链接，用户能够快速定位到目标内容，使用锚点链接步骤：

    1. 使用链接文本创建链接文本
    2. 使用相应的id名标注跳转目标的位置

    当需要跳转至其他页面的某一个锚点时，可以使用类似电影方式

• base标签
  可以设置整体链接的打开方式，，此时如果需要某一个链接以另一种方式打开，则可以在该链接的target属性中另外指定

• 特殊字符标签

  特殊字符	描述符	字符代码
  	空格符
  <	小于号	<
  >	大于号	>
  &	和号	&
  ¥	人民币	¥
  ©	版权	©
  ®	注册商标	®
  °	摄氏度	°
  ±	正负号	±
  ×	乘号	×
  ÷	除号	÷
  ²	平方2	²
  ³	立方3	³

• 注释标签
  
  多行注释可以换行

• 列表标签

  • 无序列表ul
    无序列表中的各个列表项之间没有顺序级别之分，是并列的，基本语法：

    
        
    列表项1
        
    列表项2
        
    列表项3
        ...
    
    

    注意事项：

    1. 标签中只能嵌套
    标签，直接在
    标签中输入其他标签或文字的做法不提倡
    4. 与
    之间相当于一个容器，可以容纳所有元素
    5. 无序列表带有自己的样式

  • 有序列表
    有序列表中的列表项按照一定的顺序排列，基本语法：

    
        
    列表项1
        
    列表项2
        
    列表项3
        ...
    
    

  • 自定义列表
    自定义列表常用于对术语或名词进行解释和描述，基本语法：

    
        
    名词1
        
    名词解释1
        
    名词解释2
        
    名词解释3
        ...
    
        
    名词2
        
    名词解释1
        
    名词解释2
        
    名词解释3
        ...
    
    

• 表格标签
  表格标签常用于处理、显示表格式数据，基本语法：

  
        ...
    
        ...
    
        ...
    
  
    
  表格标题
    
  
        
  表头1
        
  表头2
    
  
        
  单元格1
        
  单元格2
    
  
        
  单元格1
        
  单元格2
  
  

  注意事项：

  1. 标签用于定义一个表格
  2. 标签用于定义表格中的一行，必须嵌套在table标签中，在中可以包含几对tr，用于表示几行表格
  3. 标签用于定义表格中的单元格，必须嵌套在tr标签中，标签中可以包含几对td，用于表示该行有多少列(多少个单元格)
     标签可以容纳所有元素
  4. 标签用于定义表格中的表头，一般位于表头的第一行或第一列，其文本加粗居中
  5. 标签用于定义表格的标题，必须紧随table标签之后，每个表格只能定义一个标题，通常标题会居中于表格中

  表格属性：

  属性名	含义	常用属性值
  border	边框宽度	像素值(默认为0像素无边框)
  cellspacing	单元格与单元格边框之间的空白间距	像素值(默认为2像素)
  cellpadding	单元格内容与单元格边框之间的空白间距	像素值(默认为1像素)
  width	表格宽度	像素值
  height	表格高度	像素值
  align	表格在网页中的水平对齐方式	left、center、right，默认为left

  在使用表格进行布局时，可以将表格划分为头部、主体和页脚，整体结构如下：

  
    
  title
    
  
        
  
            
  header
        
    
    
  
        
  
            
  data
        
    
  
  

  1. 标签用于定义表格头部，一般包含网页的logo和导航等头部信息
  2. 标签用于定义表格的主体，一般包含网页中除头部和底部之外的其他内容

  合并单元格：
  跨行合并属性名：rowspan
  跨列合并属性：colspan
  思想：

  1. 确定是跨行合并还是跨列合并
  2. 按照先上后下、先左后右的顺序找到对应的单元格td标签
  3. 为该td标签添加对应的rowspan和colspan属性，属性值为要合并的单元格个数
  4. 删除多余的单元格td标签，删除的个数 = 合并的个数 - 1

• 表单标签
  在HTML中，一个完整的表单通常由表单控件(也称表单元素)、提示信息和表单域三部分组成

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

    • input控件
      标签为单标签，type属性为其最基本的属性类型，其取值有多种，用于指定不同的控件类型，常用属性如下：
      

      

      input.png
      
      注意：

      1. 一组radio和checkbox类型的input控件，需要命名为相同的name属性值
      2. image类型的input控件，可以通过src属性获取图片

    • textarea控件
      如果需要输入大量的信息时，需要使用文本域控件。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

        文本内容 
      
      

    • select控件
      使用控件定义下拉菜单，基本语法如下：

      
        选项1
        选项2
        ...
      
      

      注意：

      1. 在标签中至少有一个标签
      2. 在option中定义selected="selected"时，当前项即为默认选中项

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

  • label标签
    标签为input控件定义标注
    作用：用于绑定一个表单控件, 当点击label标签的时候, 被绑定的表单控件就会获得输入焦点
    其for属性规定label与哪个表单元素绑定，用法如下：

    用户名：
    
    

• 表单域：用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法

  • form标签
    
    标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form表单中的所有数据都会被提交到服务器
    基本语法如下：

    
      表单控件  
    
    

    常用属性：

    1. action
       在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
    2. method
       用于设置表单数据的提交方式，其取值为get或post。
    3. name
       用于指定表单的名称，以区分同一个页面中的多个表单。
       注意：每个表单都应该有自己表单域。