赏善罚饿

前端学习（一）：HTML基本语法

文章目录

认识web
- 常见的浏览器内核
- web标准
什么是HTML
- HTML的骨架标签
- HTML元素标签分类
- - 双标签
  - 单标签
- HTML标签关系
- HTML编写工具
- 文档类型
- 页面语言lang
- 字符集
- HTML标签的语义化
HTML标签
- 排版标签
- - 标题标签h
  - 段落标签p
  - 水平线标签 hr
  - 换行标签 br
- div和span标签
- 文本格式挂标签
- 标签属性
- 图像标签
- 链接标签
- 注释标签
- 锚点定位
- base标签
- 预格式化文本pre标签
- 特殊字符
- 表格
- - 创建表格
  - 表格属性
  - 表头单元格标签th
  - 表格标题caption
  - 合并单元格
  - 表格结构的划分
- 列表
- - 无序列表ul
  - 有序列表ol
  - 自定义列表dl
- 表单
- - input控件
  - label标签
  - textarea控件（文本域）
  - select下拉列表
  - form表单域

认识web

什么是网页：网页主要由文字、图像、超链接等元素构成，当然除了这些元素，网页中还可以包含音频、视频以及flash等等
网页的形成：html/css代码通过浏览器的渲染，最终呈现好看的网页
什么是浏览器：浏览器是网页显示、运行的平台，常用的浏览器有IE、谷歌、火狐、Safari等

常见的浏览器内核

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速、百度浏览器
firefox	Gecko	打开速度慢，升级频繁
safari	webkit	苹果专用
chrome	chromium/blink	在chromium项目中研发blink渲染引擎，内置于chrome浏览器之中，blink是webkit的分支，大部分国产浏览器采用blink内核进行二次开发
opera	blink	跟随chrome使用blink内核

web标准

重点内容：web标准的三层

web标准：不是一个具体的标准，而是由w3c组织和其它标准化组织制定的一系列标准的集合
w3c：万维网联盟是国际最著名的标准化组织，类似于联合国的地位
为什么要遵循web标准：如果不遵循标准，不同浏览器渲染出来的界面可能不同
web标准的好处：遵循web标准可以让我们写的页面更统一
- 让web发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面的浏览速度撒
web标准的构成：
- 结构（structure）：结构用于对网页元素进行整理和分类，主要是html
- 表现（presentation）：表现用于设置网页元素的版式、颜色、大小等外观样式，主要是css
- 行为（behavior）：是指网页模型的定义及交互的编写，主要是javascript

什么是HTML

html：超文本标记语言（hyper text markup language），是用来表述网页的
html不是一种编程语言，而是一种标记语言
标记语言是一套标记标签（markup tags）
所有的html标签都是用<>表示的
超文本：
- 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
- 可以从一个文件跳转到另一个文件（超级链接文本）

HTML的骨架标签

HTML有自己的语言语法骨架格式

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

标签名	定义	说明
	HTML标签	页面中最大的标签，称为根标签
	文档的头部	head标签中必须设置title
	文档的标题	页面显示的网页标题
	文档的身体	包含文档的所有内容

HTML元素标签分类

标签：在HTML页面中，带有<>符号的元素被称为HTML标签，如上面提到的、都是HTML骨架标签

分类：常规元素（双标签）、空元素（单标签）

双标签

<标签名> 内容

比如我爸是李刚

该语法中 <标签名> 表示该标签的作用开始，一般称为开始标签（start tag），表示该标签的结束，一般称为结束标签（end tag）
和开始标签相比，结束标签只是在前面加上一个关闭符/
大部分标签都是双标签

单标签

<标签名 />

比如

空元素用单标签来表示，里面不需要包含内容，只有一个开始标签，而不需要关闭标签
单标签比较少

HTML标签关系

嵌套关系

<head>
    <title>title>
head>

并列关系

<head>head>
<body>body>

HTML编写工具

推荐使用sublime+emmet插件，可以实现以下特殊效果

在html结尾的文件中，输入html:5或!后按tab键，自动生成html骨架
自动补全标签
通过安装插件，实现全中文显示
右键在浏览器中直接打开

利用sublime生成的骨架


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	
body>
html>

文档类型

写法：

作用：该声明位于文档中最前面的位置，处于标签之前，此标签告诉浏览器文档使用哪种HTML或XHTML规范

HTML文件必须加上DOCTYPE声明，并统一使用HTML5的文档声明

页面语言lang

指定HTML标签使用的语言

最常见的值

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

字符集

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

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

gb2312：简体中文，包括6763个汉字
BIG5：繁体中文，港澳台使用
GBK：包含全部中文，是GB2312的扩展，加入了繁体
UTF-8基本上包含全世界所有国家用到的字符

HTML标签的语义化

标签语义化：就是指标签的含义，可以让结构显得更清晰
语义是否良好：当我们去掉CSS之后，网页结构是否依然组织有序，并且有良好的可读性
遵循的原则：先确定语义的HTML，再选合适的CSS

HTML标签

排版标签

排版标签主要和CSS搭配使用，显示网页的结构，是网页布局最常用的标签

标题标签h

为了使网页更具有语义化，经常在页面中使用标题标签，HTML提供了6个等级的标题，并且依据重要性递减，基本语法格式如下

<h1> 一级标题 h1>
<h2> 二级标题 h2>
<h3> 三级标题 h3>
<h4> 四级标题 h4>
<h5> 五级标题 h5>
<h6> 六级标题 h6>

一行只能放一个标题
加了标题的文字会加粗，字号也会变大

段落标签p

段落标签paragraph：把HTML文档分割为若干个段落

文本内容

段落标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

水平线标签 hr

水平线标签horizontal：用水平线将段落与段落之间分开，使得文档结构清晰，层次分明，它是单标签

换行标签 br

换行标签：break，它也是一个单标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行

如果希望强制换行显示，就要使用换行标签

div和span标签

div和span是没有语义的，是网页布局主要的两个盒子

今日头条

又日头条

div和span都是盒子，用来装网页元素，主要区别如下：

div标签：用来布局，一行只能放一个div
span标签：用来布局，一行可以放多个span

文本格式挂标签

在网页中，有时需要为文本设置加粗、斜体、下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

标签	显示效果
	粗体方式显示，推荐strong
	斜体方式显示，推荐em
	加删除线方式显示，推荐del
	加下划线方式显示，推荐ins

标签属性

属性，就是外在特性，在制作网页时，如果想让HTML提供更多的信息，可以使用HTML标签的属性设置，其基本语法格式如下

<标签名属性1="值" 属性2="值" ...> 内容

<手机颜色="红色" 大小="18寸"> 苹果手机就是大

标签有两个特点：

标签拥有多个属性，必须写在开始标签中，位于标签名后
属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开

图像标签

image：图像

要在网页中显示图片，就需要使用图像标签，它是一个单身标签，语法如下

img src="图像URL"

src属性是必需属性，指定图片的路径和名字

图像标签还有很多其它属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的高度

border一般是用CSS来做，所以这里不需要关注

链接标签

anchor：锚

在HTML中创建超链接非常简单，只需要用标签把文字包括起来就好，格式如下

文本或图像

属性	描述
href	指定目标地址，是必须属性
target	默认值是`_self`，在当前窗口打开，可以设置为`_blank`在新窗口打开

外部链接：如 src="http://www.baidu.com"
内部链接：如 src="demo.html"
空链接：如src="#"，点击后没有任何变化

注释标签

在HTML中还有一种特殊的标签：注释标签

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，虽然不会显示到浏览器中，但是作为HTML的一部分，会被下载到用户电脑上

语法格式：

快捷键：ctrl + /

锚点定位

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

创建锚点链接分为两步：

使用相应的id名标记目标位置

跳到这里
使用链接标签进行跳转

链接文本

base标签

base可以设置整体链接的打开状态
base写到head标签之间
可以设置所有链接新页面打开

预格式化文本pre标签

<pre>
    文本
pre>

被包围在pre标签中的文本被保留空格和换行符，文本呈现为等宽字体

一般比较少用

特殊字符

一些特殊的符号，在HTML中很难或者不方便直接使用，就需要使用替代代码

以**运算符&开头，以分号;**结尾
它们不是标签，而是符号

特殊字符	描述	字符的代码
空格	空格符号
<	小于号	`<`
>	大于号	`>`
&	和	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册上标	`®`
°	度数	`°`
±	正负	`±`
×	乘	`×`
÷	除	`÷`
上标平方²	平方	`sup2;`
上标立方³	立方	`sup3;`

表格

目的：用来展示数据，可以让数据整齐规范

创建表格

在HTML中，用table标签创建表格，基本语法如下

<table>
    <tr>
        <td>单元格1内的文字td>
        <td>单元格2内的文字td>
    tr>
    ...
table>

在表格中，有3种标签

table：定义一个表格
tr：定义表格中的行，嵌套在table标签在中
td：定义表格的单元格内容，嵌套在tr标签中

表格属性

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

表头单元格标签th

作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
语法：只需要用表头标签替代相应的单元格标签即可

表格标题caption

定义和用法：

<table>
    <caption>我是表格标题caption>
table>

说明：

caption元素定义表格标题，通常该标题会居中显示于表格之上
captain必须紧随table标签之后
这个标签只有在表格中才有意义

合并单元格

合并单元格的两种方式：

跨行合并：rowspan=“合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

合并单元格的顺序：先上后下，先左后右

合并单元格的步骤：

确定是跨行还是跨列
根据合并顺序找到目标单元格，然后写上合并方式和数量
删除多余的单元格

表格结构的划分

：用于定义表格的头部，用来存放标题之类的东西，内部必须拥有标签
：用于定义表格的主体，存放数据本体
：存放表格的注脚之类的
以上标签都是在table标签内部

列表

目的：用来布局，让布局整齐规范

概念：列表的容器中，装着结构样式一致的文字或图表

特点：整齐、整洁、有序，跟表格类似，但是列表的组合自由度更高

无序列表ul

unordered list：无序列表就是各个表项之间没有顺序级别之分，是并列的

<ul>
    <li>桃子li>
    <li>苹果li>
    <li>葡萄li>
    <li>椰子li>    
ul>

注意：

ul标签中必须，也只能嵌套li标签
li标签中间相当于一个容器，可以嵌套任何元素
无序列表有默认的样式属性，可以通过CSS进行更改

有序列表ol

ordered list：有序列表即有排列顺序的列表，其中各个表项按照一定的顺序排列定义

<ol>
    <li>美国li>
    <li>中国li>
    <li>俄罗斯li>
    <li>英国li>
    <li>日本li>
ol>

与无序列表的特点基本一致，但是实际中用的较少

自定义列表dl

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

<dl>
    <dt>名词1dt>
    <dd>名词1解释1dd>
    <dd>名词1解释2dd>
    
    <dt>名词2dt>
    <dd>名词2解释1dd>
    <dd>名词2解释2dd>
dl>

表单

目的：用来收集用户的信息

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息、表单域3部分构成

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮等
提示信息：一个表单中通常需要一个说明性的文字，提示用户进行填写和操作
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单所用程序的url地址，以及数据提交到服务器的方法，如果没有定义表单域，则后台服务器无法拿到表单数据

input控件

提示文本

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	由用户定义	控件的名称
value	由用户定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

type属性：通过改变type属性的值，可以决定使用那种input表单
values属性：一般为显示的默认文本值
name属性：后台通过name找到这个表单，name主要用于区分不同的表单项
checked属性：表示默认选中的状态，常用于单选和复选

label标签

目的：当鼠标点击lable标签中的文字时，光标会自动定位到指定的表单里面，主要是为了提高用户体验

方法一：lable中直接包含Input表单

<label> 用户名： <input type="text"/> label>

方法二：for和id搭配使用

<label for="usrname">用户名： label>
<input type="text" id="usrname"/>

textarea控件（文本域）

作用：通过该控件，实现多行文本框的输入和显示

使用格式：

<textarea>
	要显示的文本内容
textarea>

select下拉列表

目的：如果有多个选项，为了节省空间，可以做成下拉列表

<select>
    <option>选项1option>
    <option>选项2option>
    <option>选项3option>
    <option>选项4option>
select>

请注意：

select标签中至少要包含一个option元素
在option中，可以定义selected属性，表示默认选中状态

form表单域

目的：将收集到的用户信息传递给服务器