前端知识总结（一）HTML

 

简介

HTML全称是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，用来描述网页。

目前最新的HTML版本是H5，要了解它和之前版本的不同，可以看我之前的这篇：

Youky：【翻译整理】What's new in HTML5​zhuanlan.zhihu.com

因为HTML是标记语言，所以无需运行环境，直接用浏览器打开文件即可看到预期结果

HTML的注释格式是：

标签

按照不同的分类标准，可以把标签分为不同的类别，如block元素和inline元素等等，我这里将HTML标签分为两类：表示页面元素的标签，和各种功能性标签。

页面元素标签

文本标签

：最常用的，段落标签，用来表示一段话。

注意：p标签内的多个空格会被自动去掉，只保留一个。要表示多个空格，在文字中用 代替空格，或使用pre标签

：标题标签，共有六级标题，分别是

一直到

，字号逐渐减小

：没有特别含义，将其他标签内的一部分文字放入span标签内，可用于方便的改变部分文字的样式

：pre标签内部的文字会保留格式
 
  
缩写：页面上会显示缩写,将鼠标移动到缩写上会显示全称
 
  
：内部字体用斜体显示
 
  
：内部字体加粗
 
  
：内部的内容显示为上角标
 
  
：分割线
 
  

：换行
 
  
 
 
  
盒子模型
 
  
：这个无疑是页面布局中使用最多的标签了，表示一个盒子区域，多用作容器
 
  
H5中语义化的盒子模型：
 
  
 
   
section表示章节
 
   
article定义有意义的独立内容
 
   
nav表示导航栏链接
 
   
aside表示侧边栏
 
   
header表示顶部
 
   
footer表示底部
 
  
 
  
这些语义化的标签都相当于是起了id的div，并没有本质区别，只是为了更好的可读性、对搜索引擎的优化以及更好的适配无障碍阅读
 
  
表格
 
  
：表格的最外层
：表格中的每一行
 
  
：首行的title
 
  
 
  
：每一行的每一个单元格
 
  
 
  
表单
 
  
1. 
：表单类型的标签有很多，最外层都要有一个form标签，意义是将内部的标签定义为同一个表单，这样才可以使用提交/重置按钮，action属性定义了用来处理输入数据的脚本的服务器页面。因此，下面的表单元素在没有form标签时实际也是可以使用的
 
  
2. 输入框：
 
  
 
  
 
   
type=text时为文本框
 
   
type=password时为密码框，即无法看到输入的内容
 
  
 
  
3. 文本域：
 
  
文字
 
  
文字会出现在文本编辑区内作为提示性文本
 
  
4. 按钮：
 
  
 
   
submit表示提交按钮
 
   
reset表示重置按钮
 
  
 
  
5. 单选框和复选框:
 
  
 
  
 
   
radio表示单选框，checkbox表示复选框
 
   
单选的name值要相同,复选的可以不同
 
   
若某一个选项中checked=”checked”,则该项为默认选项
 
   
value为选择框会传回后端的值，因此要为每个选项设置不同value值
 
  
 
  
：与单选框和复选框一起使用，for属性的值取为表单中某个选项的值，则点击label中文字的时候会选中这个选项。
 
  
6. 下拉列表
 
  

    
    
    
 
  
selected="selected"的那一项为默认选择且显示
 
  
添加了disabled的那一项无法选中
 
  
 
 
  
超链接
 
  
文字或图片
 
  
href属性表示跳转到的地址，有三种情况：
 
  
 
   
网址
 
   
本地目录
 
   
#，表示无效的超链接。在后期要为此处添加链接时，前期可以先使用#作为占位
 
  
 
  
target属性表示打开该地址的方式，取值为_blank时会在新的页面中打开超链接。默认在当前页面打开
 
  
 
 
  
图片
 
  
 
  
图片的路径可以是本地目录也可以是网址，当图片找不到时会显示alt中的文字
 
  
 
  
功能性标签
 
  
：头部元素的容器
 
  
rel="stylesheet" href="css路径">：引入CSS样式文件