一、web标准
一.HTML介绍:
1.概述:HTML全称Hyper Txet Macepu Language,翻译为超文本标记语言,不是编程语言,是一种描述性的标记语言,用于描
述超文本内容的显示方式,比如字体,颜色,大小等.HTML
超文本:音频,视频,文件,称为超文本.
标记:<单词或字母>这样的格式称为标记,一个HTML页面就是由各种标记组成的.没有编译的过程,HTML页面直接由浏览器解析执行
HTML除了语义什么都没有
2.HTML标签对:标签对能够给文本不同的语义
3.HTML的网络术语:
网页,由各种标记组成的页面就叫网页
标记:<p>这样的标记称为开始标记,</p>这样的标记称为结束标记,也叫标签,每个标签都规定好了,特殊的含义
元素:<p>内容</p>这样的整体称为元素
4.HTML规范
4.1编写规范:
HTML不区分大小写,但是尽量用小写
HTML页面的后缀名是html或htm(由于有一些系统不支持后缀名的长度超过3个字符)
HTML的结构:
声明的部分:主要高告诉浏览器,我们这个页面使用的是哪个标准,HTML标准
head部分:将不会显示在页面上的一些额外的信息告诉服务器
body部分:正常显示在页面上的内容放在此标签内
<!--文档的声明,告诉我们执行的是HTML标准-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--网站的配置-->
<meta charset="UTF-8">
<!--标题标签-->
<title>shanghongyun</title>
</head>
<body>
正常显示在页面上的内容放在此标签内
</body>
</html>
4.2基本语法特征:
HTML对换行不敏感,对tab不敏感
空白折叠
严格封闭
5.结构详解:
1.头标签:
头标签放在头部之间,包含了<title>,<meta>,<link>,<style>
<title>:整个网页的标题,在浏览器最上方显示
<title>中国铁路</title>
<meta>:提供有关页面的基本信息
(1)http-equiv属性,与之对应的属性值为content
两秒后跳到对应的网址
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
refresh是固定的 2是两秒 跳到这个网址
指定文档的内容类型,编码类型
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
内容类型 编码类型
告诉IE浏览器,以最高级模式渲染当前网页
<meta http-equiv="x-ua-compatible" content="IE=edge">
(2)name属性,与之对应的属性为content,主要用于页面的关键字和描述
便于搜索引擎查找和分类用的关键字(关键字之间用逗号隔开)
<meta name="keywords" content="文字,图片,视频">
告诉搜索引擎,这个页面是干什么的
<meta name="Description" content="介绍一下网易是干什么的">
<link>:定义文档与外部资源的关系
<style>:定义内容样式表与页面的关系
2.字体标签
字体标签包括:h1-h6,<font>,<u>,<b>,<strong><em>,<sup>,<sub>
h1-h6:定义标题的大小(h1-h6从大到小),具有align属性,属性值可以是:center,left,right
<h1 align="center">火车票</h1>
<h2 align="left">火车票</h2>
<h3 align="right">火车票</h3>
<h4>火车票</h4>
<h5>火车票</h5>
<h6>火车票</h6>
<strong>:加粗
<strong>火车票</strong>
<u>:加下划线
<u>火车票</u>
<i>:斜体
<i>火车票</i>
<em>:斜体
<em>火车票</em>
<sup>:上标
<sub>:下标
5<sup>2</sup>
4<sub>3</sub>
<br>:换行
火车票<br>zdfsdf
<del>:删除线
<del>79</del>
<hr>:画一条横线
3.特殊字符:
 :空格
<:小于号
>:大于号
©:版权
火 车<票>©(直接连起来用就行)
更多特殊字符:http://tool.chinaz.com/Tools/HtmlChar.aspx
4.排版标签:
HTML的标签是分等级的,HTML将所有的标签分为两级:
文本级标签:p,span,a,b,i,u,em 文本标签里只能放文字图片和表单元素
容器级标签:div,h系列,li,dt,dd 容器级标签里可以放任何东西
段落标签:<p>,有aligen属性,属性值包括:left,center,right
<p align="center">段落一</p>
<p>段落二</p>
***p标签是一个文本级标签
块级标签:<div>,<span>
div的语义是分割,span的语义是范围,跨度
<span>和<div>的区别:<span>是不换行的,<div>是换行的,div是用来划分大的区域的,span是用来划分小的区域的
<div>连用时,行与行之间没有间隙,<p>连用时,行与行之间有间隔
5.超链接
<a> 具有herf,id,class,title属性, a是一个文本级标签
<a href="http://www.baidu.com" id='ancher' class='foot',title='欢迎你'>百度一下</a>
这里面的id是不可以重复的,class是可以重复的,title鼠标在上面悬浮时,过一段时间就会显示的东西,title是每一个标签都具有的属性
6.图片标签
<img>具有src,weight,height,title,align,alt属性
<img src=".18.jpg" alt="不好意思放出来" height="100">
src 是要打开的图片,已用绝对路径,也可以用相对路径,也可以用网上的路径
alt 是图片显示不出来时,显示出来的文字
height 是图片的高度,也有宽度weight属性,同时使用时要注意比例,不要失真,单个使用时,自动调整比例,宽和高的单位都是px
html中：
分类:
(1).行内标签
（1）在一行内显示 span strong em i del a
(2)不能设置宽高 默认的宽和高 是内容填充
1.1 行内块标签 img input
(1) 在一行内显示
(2) 可以设置宽高
(2).块级标签 div p h1~h6
（1）独占一行
（2）可以设置宽高,如果不设置宽和高，默认的宽是父亲的100%。高度是内容的高度
7.表单
<form>
<div>
<form action="http://www.baidu.com/s">
<input type="text" name="wd" value="杨丞琳">
<input type="submit" value="搜索">
</form>
</div>
<div>
<form action="http://www.baidu.com/s">
<input type="text" name="wd" value="">
<input type="password" name="pwd" value="">
<input type="submit" value="搜索">
</form>
</div>