HTML+CSS通识内容
一、WEB基础知识(了解)
1、WEB与Internet
（1） Internet
全球性计算机互联网络
因特网、国际互联网、网际网
（2）Intenet提供的服务
Email:电子邮件
WWW:万维网
www.baidu.com
BBS:电子公告板(论坛)
Telnet:
FTP:
（3）实现技术
分组交换原理：将信息拆分成若干小数据包
TCP/IP ：协议簇
（4）WEB程序
什么是WEB
WEB就是Internet上的应用之一-网页应用
WEB所谓的WWW(World Wide Web)
W3C:World Wide Web Consortium(万维网联盟)
WEB : 应用程序，将信息和各项服务实现无缝连接
2、WEB的工作原理
（1）基于B/S模式的程序(Web)
B/S :
B : Browser 浏览器
S : Server 服务器
（2）基于C/S模式的程序
C/S :
C : Client 客户端
S : Server 服务器
（3） WEB服务器、浏览器和通信协议组成
WEB服务器：
PC：Personal Computer
Server：服务器
通信协议：http(Hyper Text Transfer Protocal)超文本传输协议，规范了 互联网上的数据 是如何打包以及如何传递
3、服务器与浏览器
（1）服务器
主要功能
1、存储 WEB 信息，提供管理环境
2、响应浏览器的请求，执行服务器端程序
3、安全功能
主要产品
TOMCAT
IIS
APACHE
实现技术
JSP
PHP
ASP.NET
ASP
（2）浏览器
主要功能
1、提交请求
User Agent(UA) :用户代理
2、作为 HTML 和 脚本的解释器
3、以图形化方式显示HTML文档
主要产品
1、Microsoft IE
2、Mozilla Firefox 火狐
3、Google Chrome
4、Apple Safari
5、Opera 欧朋
实现技术
1、HTML
2、CSS
3、Javascript
二、HTML快速入门
（1）HTML概述
什么是HTML
Web页或Web应用，就是互联网上的一个网页程序，通常以 .html或.htm作为后缀的文件
WEB页是由HTML编写而成
HTML：(Hyper Text Markup Language),超文本标记语言
超文本a:超链接的功能
超文本b:给文字加粗
Markup :标记，规定了超文本的组成形式，是由标记组成超文本
（2）HTML基础语法
1、标记语法(Markup)
作用
HTML用于描述功能的符号称之为"标记"
语法
标记 必须用 尖括号"<>" 括起来
<a></a>：超链接
<b></b>: 加粗文本显示
<p></p>: 段落
标记分类：
1、封闭类型标记-双标记
必须成对出现
<标记>内容</标记>
注意：封闭类型标记，有开始，必须有结束，否则会有意想不到的效果
2、非封闭类型标记-单标记
也称之为 空标记
<标记>
或
<标记/>
<br>:换行
<hr>:一条横线
<img>:图像
(3)元素
元素即标记
测试文本
元素嵌套
元素(标记)中又嵌套元素(标记)，形成更复杂的语法结构
编写嵌套代码时，一定要注意嵌套顺序和格式
<a>
<b>
<br/>
</b>
</a>
（4） 属性 和 值
作用
用来修饰元素
让 p 标记的文本水平居中对齐
<p>Hello World</p>
语法
1、属性的声明必须位于开始标记里 <标记 属性></标记>
2、属性都可以有值，属性和值得表现方式 属性=“值” <标记 属性=“值”></标记>
3、一个元素中允许出现多属性和值，中间用 空格 隔开，并且排名不分先后
<标记 属性=“值” 属性=“值”></标记>
给 一对 p 标记 设置 align属性，值为 center
<p align="center"></p>
标准属性
每个元素都有自己的特有属性
有些属性是所有元素都支持的，称为标准属性
1、id:元素在页面中的唯一标识
2、title:鼠标移入到元素时所提示的文本内容
3、class：元素引用的类选择器(与样式相关)
4、style:元素定义的内联样式(与样式相关)
（5）注释
作用
在编辑文档下可见，在浏览器展示页面时并不显示的内容
语法
<!-- 注释内容 -->
注意
注释不能嵌套
<!--
<!-- 这是注释 -->
-->
以上结构-错误
注释不能位于<>中
<p<!-- 注释内容 -->>
以上结构-错误
(6)HTML文档结构
6.1、文档类型声明
作用：指定使用的HTML版本和风格
<!doctype html>
6.2、html标记
<html></html>
位置 位于 doctype 之下
包含以下两对子元素
head标记
<head></head>
网页头部内容
作用
定义页面全局信息
包含以下子元素
<title>标题</title>页面标题
<meta>定义页面元数据
<meta charset="utf-8">
注意：设置网页编码的同时，保证网页文件的编码也为utf-8
body标记
<body></body>
网页显示的主体内容
属性：
1、text
控制网页文本的颜色
2、bgcolor
控制网页的背景颜色
(7)文本标记
通过文本标记，改变文本的默认样式
特殊字符(转译字符)
< 表示 <
> 表示 >
表示 一个空格
© 表示 ?
¥ 表示 ￥
文本样式
<b>...</b> : 加粗
<i>...</i> : 斜体
<u>...</u> : 下划线
<s>...</s : 删除线
<sup></sup>:上标
<sub></sub>:下标
标题元素
在页面中完成标题效果的显示(突出显示大小和加粗效果)
<h#></h#>
#:1~6
一级标题(最大)~六级标题(最小)
特点：
1、每个标题 独占一行
2、每个标题 都具备上下垂直空白
属性：
align：文本水平对齐方式
取值：
1、left ：左对齐
2、center ：居中对齐
3、right ：右对齐
段落元素
特点：
1、独占一行
2、上下垂直空白
语法：
<p></p>
换行
语法：
<br/>
分割线元素
语法：
<hr/>
属性：
1、size:尺寸,取值是一个以px(像素)为单位的数字,单位可以省略
2、width：宽度，取值数字，同上
3、align ：分割线的水平对齐方式left,center,right
4、color ：颜色
（8）块分区元素-div
语法:
<div></div>
特点：独占一行
作用：布局
（9）行分区元素-span
语法：
<span></span>
注意：多个span会在一行内显示
作用：包裹文本，并设置文本样式
（10）块级元素与行内元素
1、块级元素
默认情况下，会独占一行的元素就是块级
<h#>,<p>,<div>
作用：布局
2、行内元素
不换行，多个行内元素都在一行内显示
i,b,s,u,sub,sup,span
作用：处理文本显示效果
（11）预格式化
作用：保留原文档中的格式，即保留文档中的回车和换行
语法：
<pre></pre>
常用专业术语
1、图像和链接
1、URL
1、目录 & 目录结构
目录：WEB站点中文件夹的名称
目录结构：由目录以及子目录形成复杂结构
2、URL
URL(Uniform Resource Locator)
统一资源定位符
作用：用来标识网络中资源的位置
资源：图片，网页，音视频...
俗称：路径(地址)
URL在WEB页面上有三种表现形式:
1、绝对路径
2、相对路径
3、根相对路径
3、路径详解(重点)
1、绝对路径
文件从最高级目录下开始的完整路径
访问网络资源
由以下四个部分组成
1、协议名
https
2、主机名(域名)
www.baidu.com
3、目录路径
img
4、文件名
bd_logo1.png
2、相对路径
资源文件为止是相对于当前文件的位置开始进行查找的完整路径表现形式。 相对路径是通过 文件之间的 位置关系 来查找文件
2、具体表现形式
1、资源文件和当前文件在同目录
直接通过资源文件名称 进行引用
2、资源文件 在 当前文件的 相当于是子目录中
想进入到目录中，再查找
3、资源文件 在 当前文件的 父层结构下
通过 …/ 向上返回，再引用文件
（12）图像
1、语法
<img>
<img/>
2、属性
1、src
指定要显示的图像的URL
2、width
3、height
注意：等比缩放
（13）链接
1、语法
<a>内容</a>
2、属性
1、href
链接文件URL
2、target
目标，打开新网页的方式
取值：
1、_self
默认值
2、_blank
新标签页打开
3、链接4种表现形式
1、目标文档为下载资源
<a href="xxx.rar/zip">xxx</a>
2、电子邮件链接
<a href="mailto:xxx@xxx.com">xxxx</a>
3、返回页面顶部空链接
<a href="#">xxx</a>
4、链接到JS
<a href="javascript:js代码">xxx</a>
4、锚点
1、定义锚点
1、通过任何标记的 id 属性
2、通过a标记的 name 属性
2、链接到锚点
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
（14）表格
1、作用
将数据 按照 从左到右，从上到下的顺序进行显示
2、语法
1、标记
1、创建表格
<table></table>
2、创建表行
<tr></tr> -- table row
3、创建列(单元格)
<td></td> -- table data
2、属性
1、table
width,height,align,border,cellspacing,cellpadding,bgcolor
2、tr
align,valign,bgcolor
3、td
align,valign,bgcolor,width,height,colspan,rowspan
3、表格其他标记
1、标题
<caption></caption>
2、行标题或列标题
<th></th>
4、表格复杂应用
1、行分组
表头：<thead></thead>
表主体：<tbody></tbody>
表尾:<tfoot></tfoot>
2、不规则表格
通过 td 的 colspan和rowspan 属性来设置
colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除
rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除
3、表格嵌套
一个表格中又出现一个表格
表格中的所有内容，只能出现在td中
（15）列表
1、什么是列表
按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
2、列表的组成
主要由 列表类型 和 列表项 来组成
3、语法
1、有序列表
标记:<ol></ol> -- Order List
列表项：<li></li>
<ol>
<li>内容</li>
<li>内容</li>
... ...
</ol>
属性：
1、type
作用：列表项前的标识
取值：
1、1 数字，默认值
2、a 小写字母
3、A 大写字母
4、i 小写罗马数字
5、I 大写罗马数字
2、start
指定 列表项 从第几个字符开始显示
2、无序列表
标记：<ul></ul> -- Unorder List
列表项：<li></li>
属性：
1、type
1、disc，实心圆（默认值）
2、circle，空心圆
3、square，实心方块
4、none，没有
3、列表的嵌套
通过列表嵌套，可以实现多层列表
被嵌套的内容，必须放在li中
4、定义列表
1、作用
定义列表用于给出一类事物的定义情形
2、语法
<dl></dl>:定义一个定义列表
<dt></dt>:定义列表中要解释的名词或术语
<dd></dd>:定义列表中对名词或术语的解释
3、使用场合
图文混排 时
（16）结构标记
1、作用
用于表示页面中的布局，目的是为了提升标记的语义化
2、结构标记
1、<header>元素
1、语法
<header></header>
2、作用
定义文档的页眉
用于取代：<div id="header"></div>
2、<nav>元素
1、语法
<nav></nav>
2、作用
用于表示页面中的导航部分
3、<section>元素
1、语法
<section></section>
2、作用
用于表示 页面中的 主体部分
4、<article>元素
1、语法
<article></article>
2、作用
用于表示独立于文档的其他部分的内容
比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等
5、<footer>元素
1、语法
<footer></footer>
2、作用
用于表示 网页 底部信息
6、<aside>元素
1、语法
<aside></aside>
2、作用
表示网页 内容 中的边栏信息
（17）表单
表单作用
用于显示、收集用户信息，并将信息提交给服务器
表单组成：
1、表单元素-负责将用户数据提交给服务器
2、表单控件-负责接收用户的数据(与用户进行数据交互)
2、表单元素
标记
<form></form>
属性
1、action
定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL
默认 是提交给本页
2、method
指定表单数据提交的方式
取值：
get(默认值)
向服务器端要数据时使用
特点：
1、显示提交：用户数据是可以显示在地址栏上的
2、提交数据长度限制：2KB
post
向服务器传递数据时使用
特点：
1、隐式提交：所提交的数据是看不见的-安全性较高
2、无数据大小限制
enctype(非重点)
表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded(默认值)
2、multipart/form-data
使用场合：上传文件时使用
3、text/plain
表单控件
作用
提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据
表单控件分类
input组元素，textarea，选项框(select和option)，其他元素
**语法**
<input>或<input/>
**属性**：
1、type
根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等
2、value
值，要提交给服务器的值
3、name
控件的名称，服务器端使用，没有名字，无法提交
4、disabled
禁用控件，该属性无值，只要出现在控件中就表示禁用
<input disabled>
```
#### 表单控件分类
```
1、文本框与密码框
文本框：type="text"
密码框：type="password
属性：
1、maxlength
限制输入的字符数
2、readonly
只读
3、name
以控件的缩写+功能名称组成
文本框和密码框的缩写：txt
4、value
2、单选按钮 和 复选框
单选按钮：type="radio"
复选框：type="checkbox"
属性：
1、name
名称以及分组，一组单选按钮或复选框的话，名称必须一致
单选按钮:rdo
复选框：chk
2、value
值
3、checked
设置默认被选中
3、按钮
提交按钮：type="submit"
负责提交数据到服务器
重置按钮：type="reset"
将表单元素恢复到默认值
普通按钮：type="button"
执行客户端脚本(JS)
属性：
1、name
缩写：btn
2、value
按钮上的显示文本
4、隐藏域和文件选择框
1、隐藏域
不想给用户看，但是要提交给服务器的数据
<input type="hidden">
属性：
1、name 名称,缩写 txt
2、value 值
2、文件选择框
提交(上传)文件时使用
<input type="file">
属性：
1、name
缩写 ：txt
注意：
1、保证 form 的 method 属性 必须为 post
2、保证 form 的 enctype 属性 必须为 multipart/form-data
textarea 元素
多行文本框
1、语法
<textarea>文本</textarea>
2、属性
name
控件的名称，缩写 txt
readonly
只读
cols
指定文本域的列数
变相设置宽度
rows
指定文本域的行数
变相设置高度
```
#### 选项框
```
两种：
1、下拉选项框
2、滚动列表
语法
1、<select></select>
功能：创建选项框(滚动列表)
属性：
1、name
缩写：sel
2、size
默认显示的选项数量，如果取值大于1的话，则为滚动列表
3、multiple
设置多选
2、<option></option>
选项框中的选项
属性：
1、value
值
2、selected
预选中
其他元素
1、label 元素
作用
关联 文本 与表单控件。
语法
<label>文本</label>
属性：
for ：表示与该元素相关联的表单控件的ID值
2、fieldset 元素
作用
为控件分组
语法
1、<fieldset></fieldset>
为控件分组
2、<legend></legend>
为分组指定标题
3、button 元素
语法:
<button>内容</button>
注意：
<button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)
（18）其他标记
1、浮动框架
1、作用
可以在一个浏览器窗口中同时显示多个页面文档
2、语法
<iframe>内容</iframe>
注意：
1、必须是成对标记
2、当浏览器不支持<iframe>元素时，将显示"内容"作为该处的 内容
属性
1、src
浮动框架中的网页URL
2、width
3、height
4、frameborder
浮动框架的边框，设置为0，则取消边框
2、摘要与细节
1、作用
允许将页面某部分内容进行展开或收缩
2、语法
<details>
<summary>标题</summary>
</details>
3、度量元素
1、作用
用于显示静态比例的信息
2、语法
<meter>文本</meter>
属性：
1、min
度量范围的最小值，默认为0
2、max
度量范围的最大值，默认为1
3、value
当前显示的度量值，默认为0
4、时间元素
1、作用
用于关联时间的不同表现形式
2、语法
<time>时间文本</time>
属性：
datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割
5、高亮文本显示
1、作用
将页面中的某部分文本，以特殊的背景颜色显示出来
2、语法
<mark>高亮文本显示</mark>