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插件)
  空格