html"/>
精简html
目录
1.初始HTML
1.什么是HTML
2.HTML的发展史
3.W3C标准
4.HTML基本结构
5.网页基本信息
1.charset编码
2.关键字
3.作者
4.文件检索
5.网页重定向
6.链接外部样式
7.设置icon图标
8.网页基本信息的操作
2.网页基本标签
3.图像、超链接、网页布局
1.图像
2.链接标签
3.网页布局
4.列表、表格、媒体元素
1.列表
1.有序列表
2.无序列表
3.自定义列表
2.表格
3.媒体元素
5.页面结构分析
6.表单及表单应用
1.常用表单
2.表单常见bug
1、表单的默认样式清除
2、设置相同高度时，输入框和按钮的高度不相同
3、input不同浏览器显示问题
4、表单元素的继承问题
5、border:0 与 border: none;
6、一行文字在宽度显示不够的时候，显示三个点的省略符号
7、表单与div的焦点问题
8、checked
9、表单的disabled状态 。
3.表单的应用
7.表单初级验证
8.常用字符
1.初始HTML
1.什么是HTML
- HTML
- Hyper Text Markup Language (超文本标记语言)
- 超文本
- 超文本包括：文字、图片、音频、视频、动画等。
2.HTML的发展史
3.W3C标准
- W3C
- （World Wide Web Consortium）万维网联盟
- 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
- /
- /
- W3C就是来确定Web页面的语法格式和规范的
- W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript、javaScript)
4.HTML基本结构
5.网页基本信息
1.charset编码
语法：<meta charset="UTF-8">
ASCII/ANSI/Unicode：英语
GBK ：亚洲通用字符集
GB2312：中文简体
Big5 ：台澳港繁体
UTF-8：世界通用字符集
2.关键字
语法：<meta name="keywords" content="">
告诉搜索引擎你的站点的关键字。SEO优化使用
3.作者
语法：<meta name="author" content="名字">
4.文件检索
语法：<meta name="robots" content="all | none | index | noindex | follow | nofollow">
> 有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
> 其中的属性说明如下：
> all：（默认）文件将被检索，且页面上的链接可以被查询；
> none：文件将不被检索，且页面上的链接不可以被查询；
> index：文件将被检索；
> follow：页面上的链接可以被查询；
> noindex：文件将不被检索，但页面上的链接可以被查询；
> nofollow：文件将不被检索，页面上的链接可以被查询。
5.网页重定向
语法：<meta http-equiv="refresh" content="3;url=">
网页自动跳转：网页3秒后自动跳转到百度主页
6.链接外部样式
语法：<link rel="stylesheet" type="text/css" href="1.css">
> `rel="stylesheet"`：链接的是什么？样式表还是图标
> `type="text/css" type="text/css"`：规定链接文件的MIME类型，就是说链接文件时css还是js
> `href="1.css"`：链接的文件路径
7.设置icon图标
语法：<link rel="icon" href="1.ico">
8.网页基本信息的操作
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签达标网页头部-->
<head>
<!-- charset编码
ASCII/ANSI/Unicode：英语
GBK ：亚洲通用字符集
GB2312：中文简体
Big5 ：台澳港繁体
UTF-8：世界通用字符集--><meta charset="UTF-8"><!-- mete：描述性标签，他用来描述我们的网站的一些信息，一般用来做SEOSEO：搜索引擎优化--><meta name="keywords" content="学习web">
<!-- 作者--><META NAME="AUTHOR" CONTENT="名字">
<!--
> 有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
> 其中的属性说明如下：
> all：（默认）文件将被检索，且页面上的链接可以被查询；
> none：文件将不被检索，且页面上的链接不可以被查询；
> index：文件将被检索；
> follow：页面上的链接可以被查询；
> noindex：文件将不被检索，但页面上的链接可以被查询；
> nofollow：文件将不被检索，页面上的链接可以被查询。
--><META NAME="ROBOTS" CONTENT="ALL | NONE | INDEX | NOINDEX | FOLLOW | NOFOLLOW">
<!-- 重定向--><META HTTP-EQUIV="REFRESH" CONTENT="3;URL=HTTPS://WWW.BAIDU.COM">
<!-- 链接外部样式
> `rel="stylesheet"`：链接的是什么？样式表还是图标
> `type="text/css" type="text/css"`：规定链接文件的MIME类型，就是说链接文件时css还是js
> `href="1.css"`：链接的文件路径
--><LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="1.CSS">
<!-- 设置icon 图标--><LINK REL="ICON" HREF="1.ICO"><!-- title网页标签--><title>我的第一个网站</title>
</head>
<body></body>
</html>2.网页基本标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎</p>
<p>跑得快</p>
<!--水平线标签-->
<hr>
<!--删除线标签<del></del> <s></s>-->
删除线标签：<del></del>
<!--下划线标签<ins></ins> <u></u>-->
下划线：<ins></ins>
<!--换行标签-->
两只老虎 <br>
跑得快
<!--粗体<strong></>strong><b></b> -->
<!--斜体<em></em> <i></i>-->
粗体: <b>i love</b>
斜体： <i>i love</i>
<!--注释 ctrl+/-->
<!--特殊符号-->
空格： 空 格
大于号：>
小于号：<
版权符号：©
</body>
</html>3.图像、超链接、网页布局
1.图像
- 常见的图像格式
- JPG
- GIF
- PNG
- BMF
- ...
语法：<img src="地址" alt="图像错误替代文字" title="悬停提示文字" width="宽" height="高"> 红色标识必须写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--img学习
src：图片地址
相对路径：../ --上一级目录
绝对路径：从盘符找到这个文件的地址
title:图片悬停提示文字
width:图像宽度
height:图像高度
alt:图像错误的替代文字
-->
<img src="../imgs/1.jpg" alt="" title="我的证件照" width="344" height="482">
</body>
</html>2.链接标签
- 文本超链接
- 图像超链接
- 页面间链接
- 从一个页面链接到另一个页面
- 锚链接
- 功能性链接
- 空链
语法：<a href="链接路径" target="链接要在哪打开">链接文本或图像</a>
target的常用值：_self、_blank
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a id="top">顶部</a>
<!--a标签
href：必填，表示要跳转到那个网页
target:表示窗口在哪打开_blank 在新标签中打开_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">1</a>
<a href="">百度</a>
<a href="#"><img src="../imgs/1.jpg" alt="" title="我的证件照" width="344" height="482">
</a>
<p><a href="#"><img src="../imgs/1.jpg" alt="" title="我的证件照" width="344" height="482">
</a></p>
<!--锚链接-->
<a href="#top">回到顶部</a>
<a id="down">底部</a>
<!--页面跳转-->
<a href="4.链接标签学习.html#down">111</a><!--功能性链接-->
<!--
邮件链接：mailto
-->
<a href="mailto:16863611111@qq.com">点击联系我</a>
<!--
空链#
空链相当于 #top，实际点击此链接的时候会跳转到页首的位置
-->
<a href="#">111</a>
</body>
</html>3.网页布局
- 块元素
- 无论内容多少，该元素占一行
- （p、h1-h6...）
- 行内元素
- 内容撑开宽度，左右都是行内元素可以排在一行
- (a、strong、em...)
4.列表、表格、媒体元素
1.列表
- 什么是列表
- 列表就是信息资源的- -种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来， 以便浏览者能更快捷地获得相应的信息
- 列表的分类
- 无序列表
- 有序列表
- 自定义列表
1.有序列表
语法：<ol><li></li></ol>
- type="1,a,A,i,I"，type的值可以为1,a,A,i,I
- start="3"决定了开始的位置。
```HTML
<OL TYPE="" START=""><LI></LI> <!-- 列表项 --><LI></LI><LI></LI>......
</OL>
2.无序列表
语法：<ul><li></li></ul>
- `type="square"` ：小方块
- `type="disc"` ： 实心小圆圈，默认值
- `type="circle"` ： 空心小圆圈
<UL TYPE=""><LI></LI> <!-- 列表项 --><LI></LI><LI></LI>......
</UL>
3.自定义列表
语法：<DL><DT></DT><DD></DD></DL>
<DL><DT></DT> <!-- 小标题 --><DD></DD> <!-- 解释标题 --><DD></DD> <!-- 解释标题 -->
</DL>
2.表格
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
常见语法：<TABLE> <tr> <td>1.1</td> </tr> </table>
thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot 表格的脚 放表格的脚注之类添加thead、tbody、tfoot可以优化显示
快速建表：table>tr*3>td*5 ： 按下tab，建立3行5列的表格
- 单元格间隔
border-collapse: spacing; 默认值。边框会被分开
border-spacing: 10px;分开的值为10px
border-collapse:collapse; 边框会合并为一个单一的边框
细线表格
cellspacing="1"属性规定单元格之间的空间。
cellpadding =“1” 属性规定的是单元边沿与单元内容之间的空间。
<tr></tr>（行）
<td></td>（列）
<th></th>（表格标题）
<caption></caption>：位于table标签和tr标签之间（表头）
>width（宽度）
>height（高度）
>border（边框宽度）
>cellspacing（单元格与单元格的距离）
>cellpadding（内容距边框的距离）
>bgcolor（表格背景颜色）
>align=”left | right | center”
>如果直接给表格用align=”center” 表格居中
>如果给tr或者td使用 ，tr或者td内容居中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格制作</title>
</head>
<boby><table border="1"><tr><td>王明阳</td><td>明朝末期</td><td>领导了一场革命</td></tr><tr><th>人物</th><th>背景</th><th>成就</th></tr><tr><td>张三</td><td>清末</td><td>当了走狗</td></tr></table><br><br><br><br><table border="1"><tbody><tr><td>王明阳</td><td>明朝末期</td><td>领导了一场革命</td></tr></tbody><thead><tr><th>人物</th><th>背景</th><th>成就</th></tr></thead><tbody><tr><td>张三</td><td>清末</td><td>当了走狗</td></tr></tbody></table>
</boby>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<!--
<tr></tr>（行）
<td></td>（列）
<th></th>（表格标题）
<caption></caption>：位于table标签和tr标签之间（表头）
>width（宽度）
>height（高度）
>border（边框宽度）
>cellspacing（单元格与单元格的距离）
>cellpadding（内容距边框的距离）
>bgcolor（表格背景颜色）
>align=”left | right | center”
>如果直接给表格用align=”center” 表格居中
>如果给tr或者td使用 ，tr或者td内容居中。
-->
<TABLE WIDTH="300PX" HEIGHT="300PX" BORDER="5" CELLSPACING="10PX" CELLPADDING="0" BGCOLOR="PINK" align="CENTER" ><tr>
<!-- colspan 跨列(合并列) 合并三列 --><td colspan="3">1.1</td></tr><tr>
<!-- rowspan跨行(合并行) 合并三行--><td rowspan="2">2.1</td><td>2.2</td><td>2.3</td></tr><tr><td>3.2</td><td>3.3</td></tr>
</table>
</body>
</html>3.媒体元素
- 视频元素
- video
- 语法：<video src="视频地址"></video>
- controls：显示控件
- autoplay：自动播放
- 音频元素
- audio
- 语法：<audio src="音频地址"></audio>
5.页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容(用于页面或页面中的一块区域) |
| nav | 导航类辅助内容 |
| section | Web页面中的一块独立区域 |
| aside | 相关内容或应用(常用语侧边栏) |
| article | 独立的文章内容 |
| footer | 标记脚部区域的内容(用于整个页面的一块区域) |
6.表单及表单应用
语法：<form action="" method="" name=""></form>
| 属性 | 说明 |
|---|---|
| type | 指定元素类型：text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
| name | 指定表单元素名称 |
| value | 元素的初始值，type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符串为单位，对于其他类型宽度以像素为单位 |
| maxlength | type为text或password时，最大的输入字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
1.常用表单
- action：表单的提交的位置上
- method：提交方式：post get
- post：比较安全，传输大文件
- get：我们可以在url中看到我们提交的信息，不安全，高效
- 文本输入框：input type="text"
type：输入的是文本内容
name：输入框的名字
maxlength：限定输入文本长度
readonly：文本框只读
disabled：文本框未激活
value：输入框中的默认内容
密码框： input type="password"
单选框：input type="radio"
value:单选框的值
name：表示组
checked：默认选中
多选框：input type="checkbox"
checked：默认选中
按钮：input type="button"
图片按钮：input type="image" src="../imgs/1.jpg"
提交按钮：input type="submit"
disabled：禁用
重置按钮：input type="reset"
下拉框列表框：
<select multiple="multiple">
<optgroup lable="分组名称">
<option>下拉列表选项</option>
<option selected="selected">下拉列表选项</option>
</optgroup>
</select>
multiple=”multiple：将下拉列表设置为多选
selected=”selected：设置默认选中项目
<optgroup></optgroup>：对下拉列表进行分组
Label：分组名称
select可以设置宽高等，但是option不可以设置
文本域：<textarea cols="130" rows="10" placeholder=""></textarea>
cols：列
rows：行
cols和rows一般不用，直接使用width和height来设置宽高
对css 设置resize:none; 不可改变大小
placeholder: 提示文本
文件域：input type="file"
邮件验证：input type="email"
URL：input type="url"
数字验证：input type="number"
max：最大值
mix：最小值
step：添加减少的值
滑块：input type="range"
max：最大值
mix：最小值
step：添加减少的值
搜索框：input type="search"
日期：input type="date"
增强鼠标可用性：<lable for=""></lable>
for的范围是id
点击lable的内容跳转到id的所在位置，如输入框等等
2.表单常见bug
1、表单的默认样式清除
input {border: 1px solid #ccc;（1px 实线 ccc颜色）outline-style: none;（清空轮廓样式）padding: 0;（填充（清除））}2、设置相同高度时，输入框和按钮的高度不相同
input文本框和按钮显示模式不同：
文本框是标准盒模型（box-sizing: content-box; ），
而按钮是怪异盒子（box-sizing: border-box;）。
也就是设置相同的宽高时，文本框的实际宽高要更大，而按钮的实际宽高更小。
3、input不同浏览器显示问题
input文本框在IE8及以下浏览器默认不是垂直居中显示的，IE8以上和chrome是默认居中显示的。
4、表单元素的继承问题
表单元素不会继承任何属性，字体大小，颜色，宽高等。
5、border:0 与 border: none;
border:0; 只是border-width:0;（边框宽为0）
而 border:none;（边框样式清除） 是 border-color（边框颜色）,border-style（边框样式）,border-width（边框宽度） 都为 none，效率更低。
6、一行文字在宽度显示不够的时候，显示三个点的省略符号
width: xxxpx; /*设置显示宽度*/white-space: nowrap; /*文本一行显示*/overflow: hidden; /*超出宽度范围不显示*/text-overflow: ellipsis; /*超出宽度部分用三个点代替*/7、表单与div的焦点问题
表单才有focus，div没有focus。
Focus：输入框获得焦点
8、checked
单选框和多选框才有选中状态：checked，在设置css的时候，可以使用 input:checked 来设置已经被选中的input标签，进行样式设置。
Checked=“checked”默认选中
input:checked { height: 50px; width: 50px; }
可以设置宽高等等
9、表单的disabled状态 。
input:disabled {/*设置样式*/}，div没有
Disabled：禁用
input:disabled（禁用输入框）
button:disabled（禁用按钮）
3.表单的应用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body>
<!--表单
action：表单提交的位置上
method：post get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post：比较安全，传输大文件
-->
<form action="666" method="get"><!-- 文本输入框：input type="text"--><p>名字：<input type="text" name="username"></p><!-- 密码框： input type="password"--><p>密码：<input type="password" name="username"></p><p><!-- 提交：input type="submit"--><input type="submit"><!-- 重置：input type="reset"--><input type="reset" value="清空表单"></p>
<!-- 单选框标签
input type="radio"
value:单选框的值
name：表示组
checked：默认选中
--><p>性别<input type="radio" value="boy" name="sex" checked>男<input type="radio" value="girl" name="sex">女</p>
<!-- 多选框
input type="checkbox"
checked 默认选中
--><p><input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="chat" name="hobby" checked>聊天<input type="checkbox" value=code name="hobby">敲代码<input type="checkbox" value="play" name="hobby">玩</p>
<!-- 按钮--><p><input type="button" name="btn1" value="点击边长">
<!-- 图片按钮 点击提交跳转 自带submit功能--><input type="image" src="../imgs/1.jpg"></p>
<!-- 下拉框，列表框--><p>国家：<select name="列表名称" id=""><option value="选项的值">中国</option><option value="选项的值">美国</option><option value="选项的值">瑞士</option><option value="选项的值">俄罗斯</option></select></p>
<!-- 文本域
cols:列
rows:行
--><p>反馈：<textarea name="textarea" cols="10" rows="10"></textarea></p>
<!-- 文件域 input type="file"--><p><input type="file"></p>
<!-- 邮件验证--><p>邮箱：<input type="email" name="email"></p>
<!-- URL--><p>URL：<input type="url" name="url"></p>
<!-- 数字验证--><p>商品数量：<input type="number" name="num" max="100" min="0" step="10"></p>
<!-- 滑块 input type="range"--><p>音量：<input type="range" name="voice" min="0" max="100" step="1"></p>
<!-- 搜索--><p>搜索:<input type="search" name="search"></p>
</form>
</body>
</html>7.表单初级验证
- 为什么要进行表单验证
- 减轻网页压力
- 安全
- 常用方式
- placeholder：提示，用于所有可以书写文本类型的地方
- required：设置非空判断，用于所有可以书写文本类型的地方
- pattern：正则表达式
8.常用字符
| 特殊符号 | 字符代码 |
| ---- | ---------- |
| (空格) | ` ` |
| < | `<` |
| > | `>` |
| & | `&` |
| ¥ | `¥` |
| © | `©` |
| ® | `®` |
| × | `×` |
| ÷ | `&devide;` |
参考链接：[HTML特殊字符编码对照表](.htm)
更多推荐
精简html
发布评论