web前端之html从入门到精通

前后台分离架构

目前，企业级web开发多采用前后台分离开发模式，这种模式要求前端开发者专注于前端开发，后端开发者专注于后端开发，各自完成自己擅长的任务模块。

html介绍

HTML被称为超文本标记语言（Hyper Text Markup Language），是构成web世界的一砖一瓦，它定义了网页内容的含义和结构。除HTML以外的其他技术则通常用来描述一个网页的表现与展示效果（如 css），或功能与行为（如 JavaScript）。html、css、JavaScript并称为前端三要素。

HTML本质上是一个在互联网中传递信息的载体的协议，这个协议中规定了我们如何定义网页，如何在网页中定义标题。程序员根据这个协议编写网页代码，浏览器根据协议解析这个代码。网页的出现使得信息的传递更加便捷，解决了传统的报纸传递信息的缺陷，并且网页的功能强大，除了普通文本显示外，还可以显示图片，视频，音频，超级链接，动画等。

开发环境搭建

文本编辑器：vscode、sublime
浏览器：Firefox、Google Chrome
部署服务器：Apache
（以上软件请到官网下载最新版本）

浏览器内核

浏览器	内核
IE	trident
Firefox	gecko
Safari	webkit
Opera	Blink
Google Chrome	Blink

浏览器内核主要分成两部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

初识html

<!Doctype html5>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html</title></head><body><div>hello world</div></body>
</html>

< !Doctype html5 > 表示文档类型声明，说明该文档为html5文档。

Doctype 标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档，告知浏览器以何种规范解析页面。Doctype 不存在或格式不正确会导致文档以混杂模式呈现。

< html > 表示html文档的根标签，所有的html标签应该位于html标签内部。

< head> 表示html的头部，包含在头部的内容不会被显示在页面中。

head内部标签主要用于设置或者导入外部文件，一般不直接显示在浏览器视口中，常用的子标签为meta、title、link、script，分别表示元信息设定、文档标题、css、js。

< body> 表示html发的体部，主要用来放网页内容，其内容会显示到浏览器视口中。

html语法

注释

<! – 注释内容 -->

注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码的含义。

元素

单标签元素：< meta/>、 < img/> 、 < br/> …

双标签元素：< div> < /div>、< a> < /a>、< span> < /span> …

标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。

属性：属性应该出现在元素的开始标签内部，属性名和属性值通过 “=” 分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。

核心属性：绝大多数标签都具有的属性，比如 title、id、class、style。
自有属性：某些特定的标签具有的属性，比如a标签的 href 、target属性，img标签的 src、alt、width、height 等属性。

实体

在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以 & 符开始，以 ; 结尾。

常见的实体：空格：&nbsp；、< ：&lt；、>：&gt；、&：&amp；

html语义化

所谓 HTML 语义化，就是用恰当的标签去展示恰当的内容，像 HTML5 中新增的 header、nav、footer 等标签。而非什么都用 div 这种不具备语义化的标签来显示。

方便代码的维护，语义化的 HTML 代码更具可读性。
提高搜索引擎的有效爬取。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）。
去掉或者丢失样式的时候能够让页面呈现出清晰的结构。

块元素

作用：搭建网页结构
特点：

独占一行空间
默认宽度为100%
高度由子元素或内容决定
可以通过css指定其宽度

标签：html、body、div、article、h1~h6、ul->li、ol->li、dl->dd/dt、p …

div：无意义的块元素

<div class="content"><div class="header">头部</div><div class="nav">导航</div><div class="left">左侧</div><div class="right">右侧</div>
</div>

article：H5新增的语义化标签

<article><header>logo、页面标题、导航性目录</header><nav>导航链接</nav>文章主体<aside>左边栏</aside><section>第一章节</section><section>第二章节</section><footer>版权信息、法律信息链接、反馈地址</footer>
</article>

h1~h6：标题元素

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

ul->li：无序列表

<ul><li>列表1</li><li>列表2</li><li>列表3</li>
</ul>

ol->li：有序列表

<ol><li>列表1</li><li>列表2</li><li>列表3</li>
</ol>

dl->dd/dt、p：段落标签

 <dl><dt>WEBUI</dt><dd>html</dd><dd>css</dd><dd>javascript</dd><dt>javaEE</dt><dd>corejava</dd><dd>mysql</dd><dd>servlet/jsp</dd>
</dl>
<p>这是一个段落</p>

行内元素

作用：在结构中填充网页内容
特点：

与其他行内元素共享一行空间
不能通过css为其指定宽高
宽高由自身决定，内容的容器

标签：span、a、img、audio、video、strong、i、em…

span：无意义的行内元素

<span>行内元素</span>

a：超链接

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="mailto:2797262054@qq.com">发邮件</a>

img：图片

<img src="../images/photo.jpg" alt="" width="100">

video、audio：音频、视频

<video src="" controls></video>
<audio src="" style="display: none;" autoplay></audio>

strong 、i、em（装饰类）：H5过期的语义化标签

<strong>加粗</strong>
<i>斜体</i>
<em>强调</em>

功能元素

表格（table）

table标签在Html文档中代表表格，通过二维数据表表示数据。table标签经常需要配合caption、 thead、tfoot、 tbody 、tr、 td、 th、 col、 colgroup一起使用。

table 属性：

align：设定对齐方式，可以取值：left，center，right
border：设定表格边框特性，取整数为值，单位为px
cellpadding：设定内容与单元格之间的距离
cellspacing：设定单元格与单元格之间的距离
width：设定表格的宽度
bgcolor：设定表格的背景色

<table border="1" cellspacing="0" width="100%">
<caption>太理移动互联5班（415）</caption>

注意：当学习完CSS就不要使用这些属性了。

th 通常位于thead标签中，表示表头中的标题，具有加粗居中的特性。

<thead><tr><th>序号</th><th>姓名</th><th>学号</th><th>在校班级</th></tr>
</thead>

td 通常位于tbody中，表示表体中的普通内容。

td 属性：

colspan：跨行数
rowspan：跨列数
width：宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的时候回适当的调整

<tbody><tr><td>1</td><td>张三</td><td>2017001111</td><td>1722</td></tr><tr><td colspan="4">总人数：</td></tr>
</tbody>

表单（form）

Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。

form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。

form 属性：

action：用于处理表单信息的应用程序的地址
method：浏览器用来提交表单的HTTP方法
get：对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔
post：对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部
name：设定表单的名称
target：表示浏览器接收到form的提交信息后在哪里显示回应（_self，_blank，_parent，_top）
enctype：设定表单数据的内容类型

<form action="" method="get" enctype="multipart/form-data"> </form>

input 组件：用于接受来自用户的数据

input 属性：

name：设定参数的key值
value：设定参数的value值，当type为text，password的时候表示默认值，可以省略；但是当type为radio、checkbox等不可输入的组件时value值不能省略
type：设定表单类型

表单类型	含义
text	单行文本框
password	密码框，输入的内容将会被遮挡
checkbox	复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中
radio	单选按钮，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值
submit	提交按钮
reset	重置按钮
button	普通按钮
file	文件按钮，用于选中文件系统中的某个文件
hidden	隐藏域，该组件不显示在页面中，但是其值会被提交
image	图像按钮，必须使用src来加载图片，使用alt来声明替换文本

disabled：表示禁用组件，禁用组件的值也不能被提交
size：当前控件的初始宽度，以像素为单位。控件类型是text, password时宽度默认为20
maxlength：指定可以输入的字符的最大值。适用于控件类型为text,password

用户名<input type="text" name="username">
密码<input type="password" name="" id="password">
性别
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
爱好
<input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="run">跑步
<input type="checkbox" name="hobbies" value="swimming">游泳
头像<input type="file" name="file">
<input type="submit" value="提交">
<input type="reset" value="重置">

label 组件：用于表示某一表单组件的标题

label 属性：

for ：与为设定标题的表单组件的ID值一致

性别
<label for="radio_gender_male"><input type="radio" name="gender" id="radio_gender_male" value="male">男
</label>
<label><input type="radio" name="gender" value="female">女
</label>

select 组件：用于表示下拉列表或列表

select 属性：

multiple ：指定控件类型。为布尔类型的值，表示是否允许多选
size ：当要表示一个可以滚动的列表时候，size表示同时展示的行数（如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框），如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框。）
disabled：表示禁用组件，禁用组件的值也不能被提交
name ：用于指定该组件的名字，会与其option子元素的value值组成键值对随其他表单数据一齐被提交

option 组件：用于表示选项，常包含在 < select >、< optgroup >中

option 属性：

disabled：表示禁用组件，禁用组件的值也不能被提交
value：定义控件的初始值。提交表单时，初始值会被提交给服务器
selected：表示该选项默认被选中

<select name="class"><option value="1">1班</option><option value="2">2班</option><option value="3" selected>3班</option>
</select>

textarea ：用于表示多行文本框，没有value属性，其值被包含在标签内

textarea 属性：

rows ：定义文本框的行数
cols ：定义文本框的列数
warp ：表示是否自动换行。（off：不自动换行；hard：自动硬回车换行；soft：自动软回车换行）
disabled：表示禁用组件，禁用组件的值也不能被提交
readonly ：表示该组件只读，其值依然会被提交
name ：用于指定该组件的名字，会随着其值一同被提交到后台

<textarea name="introduce" cols="30" rows="10"></textarea>

progress：表示任务的完成情况，常用于进度条

progress 属性：

max：定义进度元素所要求的任务的工作量，默认值为1
value ：定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数

<progress value="70" max="100">70%</progress>