HTML简介
HTML（HyperText Markup Language）超文本标签语言。
- 纯文本：文字，没有样式，没有图片，没有声音，没有视频，没有程序…
- 超文本：不只有文字，还有样式，声音，视频，链接，程序… 一个网页上面不只有文字，还有其它的资源。
一张网页是由超文本组成的。 - 标签：一个单词 前后加上<> < name> 在HTML中定义好很多的标签，如：< div > < img>
一张网页是由一堆的标签组成的。 不同的标签有不同的含义 - 语言：计算机语言（人与计算机交流的工具） 工具 汉语（人与人之间交流）
HTML叫标签语言 C语言叫编程语言，JAVA，PHP，JS，Python，GO都是编程编程语言。
标签语言不是编程语言。
网页三层结构：
- 结构层：内容层，使用HTML技术实现。 HTML只能给网页提供结构或内容。 人的基本骨架。
- 样式层：美化结构，使用CSS技术实现。CSS是用来美化HTML结构。
- 行为层：人与页面之间的交互，使用JS技术实现。
三个概念：
- 标签： 双标签< html></ html> ；单标签< meta>
- 属性：写在开始标签或单标签中，通常以xxx="xxx"格式来写
如：< meta charset=“utf-8”> charset="utf-8"是属，charset是属性名 ，"utf-8"是属性值 - 元素element: 标签+属性+标签间的内容 ： < h1 title=“xxx”>首页面< /h1>
好习惯：
- 必须有文档声明
- 标签全部使用小写
- 给属性值加上引号
- 标签可以嵌套，但不能交叉
- 标签要正确的关闭
语义化
为了更加准确的表示我们要描述的信息，我们需要使用合适的标签来描述它。这就是语义化。
目的，为了搜索引擎更好的搜索到他。
head标签中设置的内容
网页编码：<meta charset="UTF-8">
网页标题：<title>小米优品</title>
网页icon: <link rel="shortcut icon" href="//m.youpin.mi.com/favicon.ico">
网页关键字（有利于SEO（让别人更容易搜索到你的网页））：
<meta name="keywords" content="小米电商,小米电商平台,小">
网页描述（有利于SEO）：<meta name="description" content="有品是小米旗下精品生">
网页视口：<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文档声明 -->
<!DOCTYPE html>
<!-- html标签 双标签（有开始标签，有结束标签） 根标签 -->
<html lang="en">
<!-- 在html标签中 有两个了标签 一个是head 一个是body -->
<!-- head标签可以写一些用来设置网页标签 -->
<head>
<!-- meta 是用来设置网页的元信息的 charset="UTF-8" 表示网页的编程 大陆程序员来说，使用最最最多是utf-8编程 -->
<meta charset="UTF-8">
<!-- 网页的标题 -->
<title>小米优品</title>
<!-- 设置网页的icon link表示引入外部的资源 rel表示资源是什么类型 href表示外部资源的地址-->
<link rel="shortcut icon" href="https://m.xiaomiyoupin.com/favicon.ico">
<!-- 设置视口 当你想做移动端网页 视口必须要有 如果没有整个页面的字体变的非常少 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- keywords 用来指定网页的关键字 -->
<meta name="keywords" content="淘宝,掏宝,网上购购物,电,网店购,店铺" />
<!-- 网站的描述 -->
<meta name="description" content="有品是小米旗下精领域。">
</head>
<!-- body是网页的主体内容 99%的标签都是写在body中 -->
标签分类
根据所大小分类
男标签：独占一行
- form
- 列表相关的标签
- 表格相关的标签
- h1, h2, h3, h4, h5, h6
- 段落标签 p
- div
女标签：并排显示
- 人妖：input img
- 其它： a span strong em i
根据标签的类型进行分类
-
表单相关的标签
form input select textarea 文本域 -
列表相关的标签
无序列表 ul + li 有序列表 ol + li 自定义列表 dl + dt + dd -
表格相关的标签
table thead tr th tbody tr td -
其它常用的标签
A，h1, h2, h3, h4, h5, h6 B，超链接标签 a 站外链接 站内链接 锚点链接 C，段落标签 p D，div span E，img
表单标签
form创建一个表单。使用： <form></form>
重要属性：
- action：表示当前 表单需要提交给哪个页面来处理
- method：表示表单提交的方式，有get和post之分，默认是get。
GET 会将用户输入的内容放到地址栏里面，使用 GET 请求不安全
POST 不会将用户输入的内容放到地址栏里面，相对安全
input
input可以通过type来指定是什么样的框
每一个 input 标签都有一个 value 属性，不同类型的 input， value 的作用稍有不同
对于 type=”text”来说，value 可有可无，因为用户输入的内容都可以提交过去。
对于 type=”radio”或 type=”checkbox”来说，没有 value，是提交不了的。
select和option
作用：用来实现下拉列表
select 表示下拉菜单 里面放下拉菜单选项
option 下拉菜单选项
我们通常给 opton 设置一个 value 属性，属性值我们通常用数字
我们可以使用 selected 属性让某个 option 处理默认选中状态。
textarea
作用：提供输入大量文本的输入框
手机号码：<input type="text"> <br>
密码：<input type="password"> <br>
性别：<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 <br>
兴趣爱好：<input type="checkbox"> 篮球
<input type="checkbox"> 足球
<input type="checkbox"> 双色球 <br>
生日：<select>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
</select> <br>
<input type="submit" value="登录"> <br>
列表
无序：ul+li ul 是unorder list 缩写
type= disc：实心圆点默认； circle：空心圆圈； square：实心方块
有序：ol+li ol 是order list 缩写
使用type属性设置(1 ,A ,a ,I ,i)
自定义：dl+dt+dd
表格
table tr th / td
table 表格
表格中分成两块：
表头：thead t table head 头的意思
tr t table r row行
th 表头的单元格 只有表头中的单元格是th
表体：tbody t table body 主体的意思
tr t table r row行
td 表体中的单元格
表格标签相关属性：
table
- border 给表格设置边框 默认单元格加上边框
- width 指定表格的宽度
- height 指定表格的高度
- align 表格在页面上对齐方式 left center right
- valign 单元格内容垂直对齐 top middle bottom
- cellpadding 定义边框与内容之间的距离
- bgcolor 背景颜色
- cellspacing=“0” 单元格边框到表格边框距离
cell细胞 也是单元格 spacing 空隙
tr
- height
- bgcolor
- align ：有left、center、right之分
- valign：有top、middle、bottom之分
td/th
- width
- height
- bgcolor
- align
- valign
- rowspan：合并行
- colspan：合并列
注意：
- width、height可以设置百分比或px值，border、cellpadding、cellspacing只能设置px。它们都可以直接设置数字，默认为px。
- border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
- cellpadding属性来创建单元格内容与其边框之间的空白，而cellspacing属性则用来设置单元格之间的距离。
- colspan和rowspan必须在合并单元格的第一个单元格中设置。
基本标签
标题标签：
用来定义标题：< h1>内容</ h1>
段落标签：
格式：< p>内容< /p>
p就表示段落。br仅仅就是换行而已
图片标签：
<img src ="" width="" heigth="" alt="" title="" />
alt 当图片路径发生错误，不存在时，显示 alt 对应的属性值（内容）
alt只有在图片标签中才能使用，title可以在所有的标签中使用
图片映射：
map
<img src="./images/map.png" alt="" usemap="#map">
<map name="map"><area shape="react"
coords="85,140,110,150" href="" alt="">
</map>
div和span：
div是division（分隔）的缩写。
span是跨度的意思。
div它是一个占据一整行的分隔块，而span则是占据一行中的一部分的分隔块
超链接
a标签
a 是 anchor(超链接)的缩写
href属性：链接到什么地方
href="http://www.baidu.com" 链接到百度官网
http:// 不能少 少就链接不到
target: 以什么样的形式打开链接
_self 在当前的选项卡中打开
_blank 在新的选项卡中打开
title: 当鼠标放到链接上时，显示出 title 对应的属性值（内容）
name: 用于设置锚点
a标签有默认的样式：
- 字体颜色默认是蓝色的
- 默认有下划线
对于超链接标签，如果不写 href 属性，是没有任何意义的
任何标签都有 title 属性，只在是超链接上用的比较多而已
站内链接
从一个网站某一个页面 跳转到 另一个页面 就是站内链接
./ 表示当前目录， 可以省略
../ 表示上一级目录，不能省略
锚点链接
<a name=”t”></a>
<a href=”#t”>返回顶部</a>
#top， 表示不需要设置锚点，就可以返回顶部
#， 表示不需要设置锚点，就可以返回顶部
<a href=””></a>
<a href=”#”></a>
不带#表示重新加载（刷新），带#表示返回顶部
框架
框架集frameset，用于页面分割，多用于后台管理系统
用于将页面划分成多个部分，每一个部分显示一个独立的页面
<frameset >
<frame src=””>
<frame src=””>
</frameset>
非常重要的一点：frameset和body势不两立。frameset是body的替代品
需要在frame中使用name属性设置frame的名称
需要在a标签中使用target指向对应的name
iframe浮动框架 内嵌框架
iframe 浮动框架 网页中嵌套另一个页面 常用于天气
<iframe src="" frameborder="0"></iframe>
其它标签
em和strong
em 倾斜强调 strong 加粗强调
尽管在浏览器中em是使用斜体显示的，但是它的作用不是用来表示斜体的。
尽管在浏览器中strong是使用粗体来显示的，但是它的作用也不是用来加粗的。
多媒体元素
< object>
针对flash，常见的格式有如下两种：
swf格式，简单动画。如果是swf格式，使用embed标签，兼容所有的浏览器。
flv格式，视频。如果是flv或者f4v，使用插件来实现。（js插件）
  空格
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
