HTML基础
一、WEB相关知识
1、web是Internet环境下的一个具体网页应用
简称：网页、web页面、页面
Internet:互联网，由若干个终端以及特殊的连接介质所组成
2、web的工作原理
1、B\S模型(结构)
B : Browser 浏览器
S : Server 服务器
PC : Personal Computer
将web应用全部保存在服务器(Server)上,由浏览器(Browser)发起请求进行访问
C/S 结构(模型)
C : Client
S : Server
通过指定的客户端来访问服务器的应用程序。eg:QQ、各种游戏
3、WEB 相关技术
1、服务器端技术
都提供了数据库的访问技术
php
jsp(Java Server Page)
asp (Active Server Page)
2、客户端（浏览器端）技术
由浏览器负责解释运行
1、HTML
2、CSS
3、Javascript
二、HTML快速入门
1、HTML
Hyper Text Markup Language
超级 文本 标记(标签) 语言
a : 26个英文字符中的第一个字符
b : 26个英文字符中的第二个字符
超文本 a : 链接
超文本 b : 加粗
<> : 标记
Language : 语言,语法
web 页面 是由 html组成的，并且 以.html或.htm作为后缀的文档文件,各个页面间，是通过超链接组织到一起的。
开发web应用所使用的工具:
1、记事本(能编辑文字的工具)
2、浏览器(IE、Google Chrome、Firefox、Safari、Opera(欧朋))
2、HTML基础语法
1、标记语法
标记 又 称为 元素
语法:<标记内容>
注意：不同的标记，会有不同的表现结果。主要用于描述功能
分类：
1、封闭标记(双标记)
语法:<标记>内容</标记>
<b>内容</b>
<s>内容</s>
2、非封闭标记(单标记、空标记)
语法:<标记>或<标记/>
特点：不能包含内容，每一个独立的空标记就是一段独立的功能
: 换行
: 水平线
2、标记的嵌套
在一个标记中出现另一对标记，形成更复杂的语法，或者让功能进行叠加
<标记1>
<标记2>
</标记2>
</标记1>
注意：
1、代码缩进
具备嵌套标记的标签，子级内容一定要通过 若干(一个制表符) 空 格来表示缩进
<标记1>
<标记2>
</标记2>
</标记1>
<a><b>
内容
</b></a>
<a>
这是一个超链接
</a>
<a>
这是一个超链接
</a>
2、注意嵌套顺序
<a><b></b></a>
3、属性 和 属性值
可以通过属性和属性值，对标签的功能加以修饰
一个段落
语法:
1、属性的声明必须位于开始的标记里面
2、一个元素可能有过个属性，多个属性间用 空格 区分
3、多个属性之间，排名不分先后
属性值：
1、属性 和 属性值之间 通过 = 连接 属性=值
2、属性值 尽量用 引号 引起来
<p 属性名=值></p> <p 属性名="值"></p> <p 属性名='值'></p> <p align="right" >段落</p>
标准属性：
又称为通用属性，基本上每个标签都会具备的属性。
id:标签在页面中的唯一标识
title:鼠标移入到标签上时所显示的文字
class:定义(引用)样式表中的类样式
style:定义当前标签的 行内样式
eg:
4、注释
1、什么是注释：指的是允许出现在html中，但不被浏览器所翻译执行的内容
2、注释的作用
1、对代码进行解释说明
2、整理思路
3、注释的语法
<!-- 这
是
注释
区域 -->
<a <!-- 写在这里就是错 -->>
<!-- 该处写注释是允许的 -->
</a>
三、html文档结构
1、html文档组成
1、文档类型声明
声明当前的html文档的版本以及类型的。
版本：
html5
xhtml1.0
html4.01
html3
html2
类型：
strict : 严格类型
transitional : 过渡类型
frameset : 框架集
出现的位置：位于 整个 html 文档的最顶端
HTML5的文档类型声明：
<!doctype html>
2、html页面组成
1、文档根标记
<html></html>
2、出现在 根标记里面的结构
1、网页的头部
<head></head>
2、网页的主体内容
<body></body>
3、head 元素
包含的都是全局信息
title : 网页的标题
meta :单标记， 编码、关键字、描述…相关的全局信息
script : 定义或引入 Javascript文件
link : 单标记，引入外部css样式表
style:定义内部样式表
四、body元素
1、body出现的位置 在 head元素之后，html元素之内。包含了网页要显示给用户去看的信息，称之为主体内容。
2、特殊字符的表示
回车 、若干空格 ，最终都会被解析成一个空格
特殊字符通过 转义字符 来实现的。
空格:
> : > --> greater than
< : < --> less than
© : © --> Company
3、文本标记
1、文本样式相关
: 加粗
: 倾斜
: 删除线
: 下划线
: 下标
: 上标
2、标题元素
以醒目的方式进行显示,通常用作文章的标题
<hn></hn>
n:1-6
<h1></h1>
<h2></h2>
...
<h6></h6>
3、段落元素
提供了结构化文本的一种方式。
<p></p>
4、换行元素
<br> 或 <br/>
可以出现在任意需要换行的位置处
5、分区元素
常用于元素的分组，以及页面的布局
1、块分区元素
<div></div>
所有的效果需要开发者自己定义，主要通过 css 实现布局
2、行内分区元素
<span></span>
多个span会在一行内显示
span很少用在布局中。主要功能是 包含普通文本并且自定义样式。
6、行内元素 和 块级元素
块级元素：自己会独占一行，前后的内容会自动换行。
div、p、h1~h6
块级元素作用：多数都会用作布局中。
行内元素：可以和其他元素位于同一行。
s,b,u,i,span,
行内元素的作用：多数都会包裹文本，去实现文本的不同样式
注意：块级元素可以嵌套行内元素，但行内元素不允许嵌套块级元素。
<div> <span></span> <s></s> <b></b> </div> <b> <div></div> </b>
注意：没强调的情况下，任何标记不允许嵌套div
<p> <div></div> </p>
7、水平线
<hr>
属性：
size:高度
width:宽度
align:水平对齐方式
color ： 颜色
8、预格式化
作用：保留文档中的格式，即保留文档中的 换行 和 空格
<pre></pre>
http://code.tarena.com.cn
用户名：tarenacode
密码：code_2013
五、图像和链接
1、目录
文件夹
2、URL
URL : Uniform Resource Locator
统一 资源 定位器
资源：一个网页中要用到的不同类型的文件，比如：图片，音视频文件，文档
定位器：查找资源的一种方式
URL：就是俗称的【路径】
路径的分类：
1、绝对路径
2、相对路径
3、根相对路径
1、绝对路径
获取资源文件所在的从最高路径下开始的完整路径
查找本机资源文件：
E:\qqq\01_HTML5Basic\Day02\images\jd_logo.png
如果访问的是互联网的资源：
协议 主机名称(ip，域名) 目录 文件名
http://www.baidu.com
http://www.baidu.com/img/bd_logo1.png
2、相对路径
资源文件的位置是相对于【当前文件】的位置而查找出来的路径
1、同级目录：直接用
2、子级目录：先进入,再引用
3、父级目录：先返回(…/),在引用
3、根相对路径
/ : 表示 当前web站点在服务器上的根路径
/images/jd_logo.png
3、图像
语法：
<img />
属性:
src : 引用的图像的路径(URL),可以是绝对的，相对的，根相对的
可选属性：
width ：宽度
height：高度
title :
1、鼠标移入的时候显示的文本
2、图片不显示的时候，所显示的替代文本
注意：
1、width、height 如果只设置一个属性的话，那么图片会变成等比缩放
2、尽量不去修改宽度和高度
4、链接
用户通过 【鼠标点击】 的操作 能够完成【页面的跳转】 就是链接
语法：
<a>链接文本或图像</a>
属性：
href:链接URL（必须）
可选：
target : 目标，即打开新网页的方式.取值：_self:默认值，当前页面打开，_blank:新标签页打开
name : 定义 【锚点名称】
链接的表现形式：
1、链接到普通页面
<a href="http://www.baidu.com">百度</a>
2、下载文档资源
在页面中，除 图片、和txt以外的其他内容，都允许被下载
<a href="资源的路径">内容</a>
3、电子邮件链接
<a href="mailto:邮件地址">内容</a>
4、链接到 Javascript (后期讲解)
<a href="javascript:js代码">内容</a>
5、返回页面顶部的空链接
<a href="#">内容</a>
锚点：
在网页上任意一个位置去定义一个【标识】，随时随地都可以通过链接【跳转到这个位置】上来
使用方式：
1、定义锚点
<a name="锚点名称"></a>
2、链接到锚点
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
六、表格
1、表格的作用
表格通常是用来组织结构化信息
表格是有一些被称为【单元格】的矩形框 从左到右，从上到下排列到一起组成的。
数据可以保存在单元格中
2、创建表格
语法：
1、表格<table></table>
2、行 <tr></tr> --> Table Row
3、单元格(列)<td></td> --> Table Data
注意：html中的表格， 默认情况下，每行的列数都是统一化的。
需求：创建一个 3 行 4 列的表格
3、表格的属性
1、表格属性
width:宽度
height:高度，以 像素(px)为单位
align:设置表格的对齐方式(left,center,right)
border:边框,设置边框的宽度 px为单位
cellpadding:设置内边距(单元格边框与内容之间的距离)
cellspacing:设置外边距(单元格之间的距离) 以px为单位
bgcolor:设置表格的背景颜色
2、行属性
align:设置 当前行中【内容】的水平对齐方式，取值：left,center,right
valign:设置 当前行中【内容】的【垂直】对齐方式，取值：top,middle,bottom
3、列(单元格)属性
width:
height:
align:
valign:
colspan:跨列
rowspan:跨行
4、表格的标题
语法：<caption>标题内容</caption>
该标签直接写在<table></table>中，并且每个表格中最多只能有一个标题。
5、列标题
语法：<th></th> --> table head
注意：级别 与 td相同
6、表格的复杂应用
1、行分组
表格可以整体划分成3个部分：表头、表主体、表尾
表头:<thead></thead>
表主体:<tbody></tbody>
表尾：<tfoot></tfoot>
注意：
每组中，可以包含任意多对 tr
2、不规则表格
属性：
colspan : 跨列,横向向右的合并几个单元格，包含自己
rowspan : 跨行,纵向向下的合并几个单元格，包含自己
3、表格的嵌套
允许在 td 中嵌套另一个表格
七、列表
能够从上到下按照一定的顺序排列内容
语法：
1、列表类型
1、有序列表
<ol></ol>
2、无序列表
<ul></ul>
2、列表项
要出现在 ol 或 ul 内部
<li>内容</li>
属性：
1、有序列表
type : 列表项类型
取值:
1,默认，数字
a,小写字母
A,大写字母
i,小写罗马数字
I,大写罗马数字
start : 起始编号
设置 type 的值从第几位数开始
2、无序列表
type :
取值：
disc : 默认，实心圆
circle : 空心圆
square : 实现矩形
none : 无
使用场合：所有的 从左到右显示的一组数据，或从上到下显示的一组数据，都可以使用列表来做。
列表的嵌套：
```
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
</ul>
```
3、自定义列表
根据需求创建一个类似于列表的结构体。
语法：
dl : 声明自定义列表
dt : 定义列表中的一个标题(专业术语)
dd : 定义列表中的对标题的解释或对专业术语的解释。
使用场合：在 图文混排 的结构中，多数使用 dl,dt,dd 来表示。
八、结构标记
1、作用
为了提升代码的语义性
2、结构标记
1、header 元素
语法：<header></header>
作用：表示信息部分的头部内容,页眉
等同于<div id="head"></div>
<header id="head"></header>
....
<header id="content_header"></header>
2、nav 元素
navigation : 导航
语法：<nav></nav>
作用：表示或定义页面中的导航链接部分
等同于<div id="nav"></div>
3、section 元素
语法：<section></section>
作用：定义文档中的节(主体内容中的某一部分)
等同于 <div id="section"></div>
4、article 元素
article ：文章
语法：<article></article>
作用：定义与文字性相关比较强的内容，如：帖子，报纸文章、博客条目、微博信息
5、footer 元素
foot ：脚
语法：<footer></footer>
作用：定义页面中靠下的部分内容，页脚内容，多数会将 版权信息、友情链接 等相关内容放在此标签中。
等同于：<div id="footer"></div>
6、aside 元素
语法：<aside></aside>
作用：定义页面的一些额外组成部分。
一般情况下，边栏可以使用 该标记
等同于:<div id="aside"></div>
九、表单
1、表单的作用
收集用户信息，并将用户信息提交给服务器
1、表单元素
2、表单控件
2、表单元素
语法：<form></form>
属性：
1、action
作用：定义表单被提交时所发生的动作。主要用于定义表单提交的地址
默认 为 提交给本页
2、method
方式、方法
作用：表单数据提交的方式
取值：get 和 post
get:获取，取得，获取
post:邮寄，发送
1、get ：表单将以【明文】的方式将数据发送给服务器。安全性较低。有大小限制，大小限制为 2KB。
常用场合：与搜索相关、无安全性要求的。
2、post ：表单将以 【隐式】的方式将数据发送给服务器。安全性较高。大小没有限制。
常用场合：登陆操作、注册操作
method 如果不写，默认值为 get
3、enctype
作用：表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded
默认的
2、multipart/form-data
适用场合：如果表单中有【文件】需要提交的话，那必须将enctype设置为此值
4、name
定义表单的名称
.5、id
定义表单在页面中的唯一标识
3、表单控件
用不同的外观形式展现出来的用于接受用户数据的内容。
常用表单控件：
1、input 元素
2、多行文本域(textarea)
3、选项框 (select , option)
1、input 元素
语法：<input />
通用属性：
1、type ：根据 type 值 ， 来创建不同的input 元素
2、value ：值，当前控件的值(默认值)
3、name ： 控件的名称
使用场合：服务器
4、id : 控件的唯一标识
使用场合：当前页面
5、disabled : 禁用
input 中的具体元素
1、文本框与密码框
文本框:type=“text”
<input type="text" />
密码框:type=“password”
<input type="password" />
属性：
name:
value:
maxlength : 限制输入的字符数
readonly : 设置元素为只读
2、单选按钮 、复选框
单选按钮：<input type="radio" />
属性：
name ：除了定义名称为，还能够为单选按钮分组
checked : 设置 默认被选中
复选框：<input type="checkbox" />
属性：
name：定义名称 和 分组
checked：设置默认被选中
3、按钮
1、提交按钮
具备 提交 的功能,将表单中的数据提交给服务器
<input type="submit" />
2、重置按钮
具备 默认值功能 ,将表单中的所有表单元素全部恢复成初始化状态
<input type="reset" />
3、普通按钮
作用：无任何功能，可以由用户定义功能(js)
<input type="button" />
4、隐藏域 、文件选择框
1、隐藏域
对服务器 来讲非常重要，单又不想给用户去看的东西，可以放在隐藏域里
隐藏域是页面上看不到，但是能随着表单提交给服务器的控件
<input type="hidden" />
name : 定义名称
value : 定义值
2、文件选择框
打开本机 的 ”打开“对话窗口，并且选择文件，上传到服务器
<input type="file" />
属性：
name ：定义名称
注意：
1、method 必须 为 post
2、enctype 必须更改为 multipart/form-data
2、label 元素
作用：关联 文本 与 控件的。点击文本就等同于点击它所关联的那个控件。
语法：<label>关联的文本</label>
属性：
for : 与当前文本相关联的控件的【ID】值
3、选项框
分类：
1、下拉选项框
2、滚动列表
1、下拉选项框
<select></select>
属性：
name ：名称
id ：唯一标识
size : 大于1，则为滚动列表
multiple:设置多选,(针对滚动列表有效)
<option>显示的文本</option>
属性：
value ：选项的值
selected ：预选中
4、多行文本域 textarea
多行的文本框
语法：<textarea></textarea>
属性：
readonly : 设置为只读
cols : 设置文本域的 列数,一行能显示多少个字符,变相设置宽度
rows : 设置文本域的 行数,整个文本域默认显示几行,变相设置高度。
5、为控件分组
语法：
<fieldset></fieldset> : 分组
<legend></legend> : 为分组指定标题
十、其他标记
1、浮动框架 iframe
语法:<iframe></iframe>
属性：
src : 引入的网页URL
width:宽度
height:高度
frameborder:引入的网页的边框宽度
2、摘要与细节
可以对网页上的某部分信息进行展开和收缩
语法：
<details></details> : 定义细节内容
<summary></summary> : 定义细节内容的标题
3、度量元素
按照一定比例的方式去显示数值
语法：
<meter></meter>
属性：
min ：度量范围的最小值，默认为0
max ：度量范围的最大值，默认为1
value：当前的度量值，默认值为0
4、时间元素
语法：
<time>文本</time>
属性：
datetime:规定当前元素的日期和时间 用T进行分割
eg:
今年<time datetime="2019-6-28T10:00">lalala</time>，
5、高亮文本显示
以特殊的效果 显示 所包含的文本
特殊效果：默认情况下，背景颜色为黄色
语法：文本
<mark>文本</mark>
6、控件取名：适用于 name 和 id
name 属性值 ， 可以 与 id属性值取值相同
1、命名规范
匈牙利命名法
控件的缩写作为前缀
文本框：type=“text” ==> txt
密码框：type=“password” ==> txt
单选按钮: type=“radio” ==> rdo
复选框： type=“checkbox” ==> chk
按钮(提交、重置、普通) ： ==> btn
隐藏域、文件选择框: ==> txt
前缀后，跟着当前控件的 【作用名称】
作用名称：每个单词的首字符 大写，其余小写。
<input type="text" id="txtUsername" />
<input type="radio" id="rdoFemale" />
<input type="submit" id="btnSubmit" />
2、尽量保证见名知意
txtLoginName
3、尽量避免重复
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
