HTML快速入门
1、HTML概述
-
HTML：(Hyper Text Markup Language)，超文本标记语言
举例子：
普通文本语言：a
超文本：a，功能为超链接
普通文本语言：b
超文本：b，功能为加粗显示文本 -
标签：Markup，规范了超文本的组成形式
超文本a:<a> 超文本b:<b> -
语言：Language，具备特定的语法规范
HTML是网页的设计语言，由HTML编写的语言的文件 以 .html 或 .htm结尾。并且由浏览器负责运行。
HTML开发及运行工具：
1、开发工具
记事本，超级记事本（Editplus）
2、运行环境（工具）
各款浏览器（IE，Firefox，Chrome，Safari，Opera）
2、HTML基础语法
1、标记语法
1、什么是标记
在HTML中，用于描述功能的符号称为 标记。
标记在使用过程中，必须用<>括起来
- 标记分为：
1.封闭类型标记
2.非封闭类型标记
2、标记语法
1、封闭类型标记
必须成对出现
<标记>内容</标记>
注意：封闭类型标记必须有结束</>
ex：a标记
<a>百度</a>
<a>搜狗</a>
2、非封闭类型标记
也称为 空标记，单标记
语法：
<标记>
或
<标记/>
ex:
<br/>
<hr/>
<img>
2、元素
元素，即标记
ex:<a>百度</a>
元素嵌套
在一个元素中，允许出现另一个元素，形成更复杂的语法结构
ex:
<a>
<img>
</a>
注意：
1、嵌套时注意顺序
<p><a></p></a> 错误
2、嵌套格式-缩进
被嵌套的内容前要通过 Tab 键表示缩进
<div>
<p>
<span></span>
</p>
</div>
3、属性和值
属性用来修饰元素的
语法：
<标记 属性=“值” 属性=“值”></标记>
ex:
<p align=“center”> </p>
align:当前元素的文本的水平对其方式
center:居中对齐
标准属性：
又称为通用属性，页面上所有的标记都会具备的属性
1、id
页面元素独一无二的标识
2、title
鼠标移入到元素上时所提示的内容
3、class（css中用）
定义元素的类选择器
4、style（css中用）
定义元素行内样式
4、注释
注释是不会被浏览器所解释运行的
<!--这里面的内容，都是被注释掉的 -->
注意：
1.注释不能嵌套注释
<!--
<!--
<!--
错误
-->
-->
-->
2.注释不能位于<>中
<a<!-- -->></a> 错误
3、文档结构
1、文档类型声明
作用：指定文档的版本和类型
语法：
页面最顶端
<!doctype html>
2、html页面
语法：<html></html>
又称为html根标记
内容：
即两个子元素
1、<head></head>
网页头部
作用：定义页面中的全局信息
包含如下内容：
1、<title>网页标题</title>
2、<meta charset=“utf-8”>
作用：指定网页的编码格式为utf-8
告诉浏览器按照utf-8的方式解析内容
注意：网页文件的编码也必须为utf-8
2、<body></body>
网页主体
包含网页显示的主体内容
属性：
1、text
控制整个页面的文本颜色
2、bgcolor
控制整个页面的背景颜色
<!--1、文档声明-->
<!doctype html>
<!--2、HTML页面-->
<html>
<!--1、网页头部-->
<head>
<!--1、网页标题-->
<title>我的第一个html文档</title>
<!--2、编码格式：注意，当前文件的编码也要为utf-8-->
<meta charset="utf-8">
</head>
<!--2、网页主体-->
<body text="red" bgcolor="green">
这是我的第一个html练习内容
</body>
</html>
文本标记
1、特殊字符
1、在html中，任意多个空格和回车，最后都会被解析成1个空格
2、由<>所包裹的文本，会当成标记被解析
3、通过 转义字符 的特殊表现方式表示特殊效果
< : < (less than)
> : > (greater than)
: 空格
© : ©
¥ : ¥
2、文本标记
1、文本样式
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sup></sup> 上标
<sub></sub> 下标
这是一段有<b>加粗</b>，有<i>斜体</i>，有<u>下划线</u>，有<s>删除线</s>，有上<sup>标</sup>，有下<sub>标</sub>的文本
运行结果：
2、标题元素
作用：以标题的方式显示文本
表现方式：
1、垂直的空白距离
2、不同的标题字体大小不同
3、独占一行
语法：
<hn></hn>
n : 1~6
<h1></h1> ：1级标题
<h6></h6> ：6级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
运行结果：
3、段落元素
作用：在页面中表示一段独立的文本
表现形式：
1、具备垂直空白
2、独占一块
语法：<p></p>
4、换行元素
语法：<br>或<br/>
5、分割线元素
作用：在页面中显示线条
语法：<hr>
属性：
1、size：尺寸，大小（以px为单位，可以省略）
2、width：宽度（以px为单位，可以省略；或百分比）
3、align：线条的水平对齐方式，取值（left,center,right）
4、color：颜色
<hr size="20px" width="200px" align="center" color="yellow">
运行结果：
6、预格式化
作用：保留源文档中的格式。即保留源文档中所有的 回车和空格
语法：<pre></pre>
<pre>
function test(){
console.log("Hello World");
}
</pre>
这是我的第一个html练习内容
运行结果：
7、块分区元素 - div
作用：为元素分组，实现网页布局
表现形式：
独占一行
语法：
<div></div>
8、行内分区元素 - span
作用：设置同一行文本的不同样式
语法：
<span></span>
9、行内元素 和 块级元素
1、块级元素
默认情况下，每个块级元素独占一行，即元素前后都会有换行
如：p,div,h1~h6,pre,……
作用：用在布局
注意：都有align属性
display：block
2、行内元素
不会换行，可以和其他的行内元素或文本在一行内显示
如：span,s,b,i,u,sup,sub,……
作用：处理文本样式
注意：不具备align属性
display：inline
作业
完成下方页面
补充
1、p标记是不能嵌套块级元素的
2、<head>中的补充内容
元数据
1、<meta name=“keywords” content=“关键词1，关键词2，关键词3”> ：定义网页关键字
2、<meta name=“description” content=“描述信息”> ：定义网页描述信息
以上两点，主要针对“搜索引擎”
======================================================================================
图像与链接
1、URL
1、目录
WEB站点中存储文件的文件夹名称
2、URL
URL:（Uniform Resource Location）即统一资源定位器
用于标识网络中的资源位置 - 路径
资源：网页中要用到的文件，都叫资源
3、三种表现形式
1、绝对路径
1、什么是绝对路径
从文件所在的最高级目录下开始的完整路径
2、分类
1、访问互联网上的资源
1、协议名称：https
2、主机名（IP地址/域名）：www.baidu.com
3、目录路径：img
4、文件名：bd_logo1.png
协议名和主机名 用://作为分隔
从主机名开始与后续的内容使用/作为分隔
ex：https://www.baidu.com/img/bd_logo1.png
2、访问本机资源
从 盘符（C盘，D盘，E盘等）所在位置处 一直到 资源文件所经过的路径
2、相对路径
1、什么是相对路径
指 从当前文件所在位置开始 查找 资源文件所在位置所经过的路径
2、分类
1、当前文件 与资源文件在同目录下：直接通过名称进行引用
2、资源文件在 当前文件 的子目录中：先进入，再引用
3、资源文件在 当前文件 的父目录中：先返回，再引用
../表示 向上返回一级
../../../：向上返回三级
3、根相对路径（服务器上使用）
表现：/作为开始
ex:
/images/btn_register.jpg
2、图像
1、图像格式
在web中所支持的图像格式有以下几种：
1、jpeg
*.jpg
2、gif
特点：支持动画
*.gif
3、png
特点：
无损压缩，有8位、24位、32位，3种形式
支持透明色
*.png
2、图像元素
1、语法：
标记：<img>
属性：
1、src：指定要显示的图像url
2、width：宽度，以px或%为单位，单位可以省略，省略的话默认单位为px。
3、height：高度，同上。
注意：如果只改变width或height中的一个属性的话，那么另一个属性会跟着等比缩放。
注意：
1、url严格区分大小写-服务器严格区分，本机开发则无所谓。
2、url中不能出现中文。
3、链接
1、链接语法
1、标记
<a>内容</a>
2、属性
1、href：链接的URL
2、target：
目标，指定打开新网页的形式
取值：
_blank：在新标签页中打开
_self：在自身页面中打开（默认值）
2、链接的表现形式
1、链接目标为资源下载
<a href="xxx.zip/rar">内容</a>
2、链接目标为电子邮件链接
<a href="mailto:xxx@xxx.com">联系我们</a>
3、返回页面顶部的空链接
<a href="#">返回顶部</a>
4、链接到Javascript
<a href="javascript:js脚本">内容</a>
3、锚点
1、作用
在网页的任意位置处做记号。可由任意位置跳转到该记号位置处。
2、使用方式
1、定义锚点
1、使用a元素的name属性
<a name="锚点名称">内容</a>
2、任意标记的id属性
<div id="an1">测试锚点</div>
2、链接到锚点
<a href="#锚点名称">内容</a>
<a href="页面URL#锚点名称">内容</a>
表格
1、表格的作用
按照一定的格式摆放数据
表格是由一些被称为“单元格”的矩形框，按照从左到右，从上到下的顺序 排列到一起组成的
2、创建表格
1、定义表格：<table></table>
2、创建表行：<tr></tr> --table row
3、创建列（单元格）：<td></td> --table data
3、表格属性
1、table属性
1、width：宽度
2、height：高度
3、align：设置表格的对齐方式（left|center|right）
4、border：边框宽度，px作为单位，可以省略px
5、cellpadding：单元格内边距（单元格边框与内容之间的距离）
6、cellspacing：单元格外边距（单元格之间的距离）
7、bgcolor：背景颜色
2、tr属性
1、align：设置该行内容的水平对齐方式
2、valign：设置该行内容的垂直对齐方式 取值：top|middle|bottom
3、bgcolor
3、td属性
1、align
2、valign
3、width
4、height
5、colspan：设置单元格跨列
6、rowspan：设置单元格跨行
4、表格标题
<caption>标题</caption>
默认：表格上方居中显示
注意：
1、<caption>必须紧随<table>之后
2、每个表格最多只能有一个标题
<th>行标题或列标题</th>
<table>
<caption align="center">通讯录</caption>
<tr>
<th>姓名</th>
<th>QQ</th>
<th>联系电话</th>
</tr>
<tr>
<td>张三</td>
<td>123456789</td>
<td>123456789</td>
</tr>
</table>
5、表格复杂应用
1、行分组
html中允许将表格内容分为3个部分
1、表头行分组
<thead></thead>
2、表主体行分组
<tbody></tbody>
3、表尾行分组
表格中最下方的一行或几行，可以放在表尾行分组
<tfoot></tfoot>
注意：
每个行分组中，都允许包含一对或多对tr标记
2、不规则表格
1、跨列
从指定单元格位置处开始，横向向右合并几个单元格（包含自己）。被合并掉的单元格应该从tr中删除
属性：
设置td的colspan属性
取值：合并单元格的数量
2、跨行
从指定的单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的要删除
属性：
设置td的rowspan属性
取值：合并单元格的数量
3、表格的嵌套
在单元格中允许放置另一个表格
<table>
<tr>
<td>
<div></div>
</td>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
列表
1、作用
按照一定的格式显示数据的元素
默认显示方式为 从上到下的 显示
2、列表的组成
所有列表都由“列表类型”和“列表项”组成
列表类型： 有序列表 和 无序列表
列表项：具体显示在列表里面的内容
3、列表的使用
1、有序列表
1、语法
列表类型：<ol></ol> --Order List
列表项：<li></li> --List Item
2、属性
1、type
作用：指定有序列表的列表类型
取值：
1、1：指定类型为数字（默认）
2、a：指定类型为小写字母
3、A：指定类型为大写字母
4、i ：指定类型为小写罗马数字
5、I ：指定类型为大写罗马数字
2、start
作用：指定起始编号
取值：数字
2、无序列表
1、语法
列表类型：<ul></ul> --Unorder List
列表项：<li></li>
2、属性
1、type
指定 列表类型
取值：
1、disc：实心圆（默认）
2、circle：空心圆
3、square：实心矩形
4、none：没有，不显示列表项标识
3、列表的嵌套
被嵌套的列表要放在li中
ex：
<ul>
<li>列表项1</li>
<li>
列表项2
<ol>
<li></li>
</ol>
</li>
</ul>
4、定义列表
1、作用
用于要给出一类事物的定义情形，如：名词解释等
2、语法
<dl></dl> --定义一个定义列表
<dt></dt> --定义列表中的“术语”
<dd></dd> --定义列表中对术语的“解释”
3、使用场合
在“图文混排”时优先使用 定义列表
结构标记
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、作用
表示网页 内容 中的边栏信息
表单（重难点）
1、表单作用
用于显示、收集用户信息，并将信息提交给服务器
表单组成：
1、表单元素-负责将用户数据提交给服务器
2、表单控件-负责接收用户的数据（与用户进行数据交互）
2、表单元素
1、标记
<form></form>
2、属性
1、action
定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL
默认 是提交给本页
2、method
指定表单数据提交的方式
取值：
1、get
向服务器端要数据时使用
特点：
1、显示提交：用户数据是可以显示在地址栏上的
2、提交数据长度限制：2KB
2、post
向服务器传递数据时使用
特点：
1、隐式提交：所提交的数据是看不见的–安全性较高
2、无数据大小限制
3、enctype（非重点）
表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded(默认值)
2、multipart/form-data
使用场合：上传文件时使用
3、text/plain
3、表单控件
1、作用
提供多种类型的表单控件，并且具有可视化的外观，可以接收用户的数据
2、表单控件分类
input组元素，textarea，选项框（select和option），其他元素
1、input元素
1、语法
<input>或<input/>
属性：
1、type
根据type值，创建各种类型的输入字段，如文本框，密码框，单选按钮复选框等……
type属性不写或者写错的话，都默认文本框
2、value
值，要提交给服务器的值
3、name
控件的名称，服务器端使用，没有名字，无法提交
4、disabled
禁用控件，该属性无值，只要出现在控件中就表示禁用
2、分类
1、文本框与密码框
文本框：type=“text”
密码框：type=“password”
属性：
1、maxlength
限制输入的字符数
2、readonly
只读
3、name
以控件的缩写+功能名称组成
文本框和密码框的缩写：txt
ex：用户名称：txtUsername
用户昵称：txtNickname
2、单选按钮和复选框
单选按钮：type=“radio”
复选框：type=“checkbox”
属性：
1、name
名称以及分组，一组单选按钮或复选框的话，名称必须一致
单选按钮：rdo
复选框：chk
2、value
值
3、checked
设置默认被选中
3、按钮
1、提交按钮：type=“submit”
负责提交数据到服务器
2、重置按钮：type=“reset”
将表单元素恢复到默认值
3、普通按钮：type=“button”
执行客户端脚本（JS）
属性：
1、name
缩写：btn
2、value
按钮上的显示文本
4、<button>按钮上的文本</button>
放在表单中，就是提交按钮(IE除外)
放在表单外，就是普通按钮
4、隐藏域和文件选择框
1、隐藏域
不想给用户看，但是要提交给服务器的数据
<input type=“hidden”>
属性：
1、name名称，缩写txt
2、value值
2、文件选择框
提交（上传）文件时使用
<input type=“file”>
属性：
name
缩写：txt
注意：
1、保证form的method属性必须为post
2、保证form的enctype属性必须为multipart/form-data
2、textarea元素
多行文本框
1、语法
<textarea>文本</textarea>
2、属性
1、name
控件的名称，缩写txt
2、readonly
只读
3、cols
指定文本域的列数
变相设置宽度
4、rows
指定文本域的行数
变相设置高度
3、选项框
两种
1、下拉选项框
2、滚动列表
语法
1、<select></select>
功能：创建选项框（滚动列表）
属性：
1、name
缩写：sel
2、size
默认显示的选项数量，如果取值大于1的话，则为滚动列表
3、multiple
设置多选
2、<option></option>
选项框中的选项
属性：
1、value
值
2、selected
预选中
4、其他元素
1、label元素
1、作用
关联文本与表单控件。关联后，点击文本如同点击表单控件。
2、语法
<label>文本</label>
属性：
for：表示与该元素相关联的表单控件的ID值
2、fieldest元素
1、作用
为控件分组
2、语法
1、<fieldset></fieldset>
为控件分组
2、<legend></legend>
为分组指定标题
3、button元素
语法：
<button>内容</button>
注意：
<button>元素放在<form>中，就是提交按钮；放在<form>之外，就是普通按钮（IE除外）
其他标记
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"来分割。日期：yyyy-mm-dd；时间：hh:mm:ss
5、高亮文本显示
1、作用
将页面中的某部分文本，以特殊的背景颜色显示出来
2、语法
<mark>高亮文本显示</mark>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
