前端分为三个标准:
1.html : 结构标准
2.css : 样式标准
3.javascript : 行为标准
html中除了语义其他什么都没有,所谓语义就是用标签将我们的文本内容包裹起来,标签分为行内标签和块级标签
行内标签 :
字体标签 : a:超链接标签 href:链接地址,target:_blank : 在另一个空白页面中打开链接的地址.
span:小跨度的区域标签,这个标签不会对页面布局造成影响.
其他的还有一些 如: font em strong i
特点 : (1) 在一行内显示;
(2)不能设置宽高,默认是字体的大小.
p : 段落标签 , 在认识p的第一天,就是时刻记住p中只能放字体标签.
img : src:链接的图片资源 art: 加载图片资源失败的时候,显示的内容.
排版标签 :
div : 分割标签,整个网页的结构.
ul , ol , li : 列表标签 , ul和ol中的子标签一定是li, li可以包含任意的标签.
html 标签特性:
1.HTML对换行不敏感,对table键不敏感
2.空白折叠
一 web标准
web标准:制作网页遵循的规范
web准备规范的分类:结构标准,样式标准,行为标准.
结构 : html 样式 : css 行为 : javascript
web准备总结:
结构标准:相当于人的身体,html就是用来制作网页的;
样式标准:相当于人的衣服,css就是对网页进行美化的;
行为标准:相当于人的动作,Js就是让网页动起来,具有生命力的;
浏览器内核:各个浏览器内核各不一样,浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,渲染引擎是兼容性问题出现的根本原因.
html:为超文本标记语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.
超文本:音频,视频,图片称为超文本;
标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成.
作用:HTML 是负责描述文档语义的语言.
注意:HTML语言不是一个编程语言,而是一个标记语言,HTML页面直接由浏览器解析执行.
h标签有什么用?
给文本增加了标题的语义.
网页:;由各种标记组成的一个页面就叫网页.
主页(首页):一个网站的起始页面或者导航页面.
标记:<p>称为开始标记,</p>称为结束标记,也叫标签;
每个标签都规定好了特殊的含义;
元素:<p>内容</p>称为元素;
属性:给每一个标签所做的辅助信息;
颜色表示:纯单词表示:red , green , blue , orange , gray等;
十进制表示 , 十六进制表示.
HTML的规范:
html是一个弱势语言,不区分大小写,html页面的后缀名是html或者是htm;
html的结构:
声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准?
head部分:将页面的一些额外信息告诉服务器,不会显示在页面上;
body部分:我们所写的代码必须放在此标签内;
XHTML与HTML4.0的标记基本上一样.
XHTML是严格的,纯净的HTML
二 头标签
head标签都放在头部分之间.这里面包含了:<title>,<meta>,<link>,<style>
<title>:指定整个网页的标题,在浏览器最上方显示;
<meta>:提供有页面的基本信息;
<link>:定义文档与外部资源的关系;
<style>:定义内部样式表与网页的关系;
body中相关标签:
字体标签:h1~h6 ,<font> ,<u>,<b>,<strong>,<em>,<sub>,<sup>
排版标签:<div>,<span>,<br>,<hr>,<center>,<pre>
超链接:<a>
图片标签:<img>
HTML标签中有两类标签:1.字体标签 ;2 . 排版标签;
<b>和<strong> : 字体加粗 <u>:下划线标签 <s> :中划线标签 <i>或<em> : 斜体标签
<sup>:上标 <sub>:下标
二 . 排版标签
段落标签<p>
属性:align="属性" : 对齐方式,属性值包括:left center right
HTML标签是分等级的,html将所有的标签分为两种:
文本级标签: p , span ,a ,b ,i ,u , em,文本标签里只能放文字,图片,表单元素.
容器级标签:div , h系列 ,li,dt,dd,容器级标签里可以放任何东西;
div和span是非常重要的标签,div的语义是division,"分割";
span的语义就是"范围,跨度"
div:把标签中的内容作为一个块来对待,必须单独占据一行,
span里面只能放置文字,图片,表单元素,span里面不能放p,h,ul,dl,ol,div;
div标签是一个容器级标签,里面什么都能放,甚至可以放自己;
br是换行标签,打算结束一行开始新段落时;<br>标签就派上用场了;
水平线标签<hr>,可以在视觉上将文档分割成各个部分;
内容居中标签<center>
预定义(预格式化)标签:<pre> :保留其中的所有的空白字符(空格,换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)
超链接<a> a: text-dicoration:none; 清除下划线
超链接有三种形式:
1.外部链接:链接到外部文件;
<a href="#" >点击这里进入到新网页</a>
2.锚链接:指给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转:
例 :
<a name="top''>顶部</a>
<a href="#top">回到顶部</a>
3.邮件链接:
代码举例:<a href="mailto:52343443@qq.com">联系我们</a>
特殊几个链接:
<a href="#">跳转到顶部</a>
与JS相关:
<a href="javascript:alert(1)">内容</a>
<a href="javascript:j">内容</a>
a是一个文本级的标签
p应该能包含a,而a不能包含p,a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字;
img:代表的就是一张图片,是单边标记;
img是自封闭标签,也称为单标签;
能够插入的图片类型是:jpg(jpeg),gif,png,bmp;
不能往网页中插入的图片格式是:psd,ai
HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要报图片上传到服务器上;
4.列表标签:
列表标签分为三种:
1.无序列表<ul>,无序列表中的每一项是<li>
li不能单独存在,必须包裹在ul里面,反过来说,ul的"儿子"不能是别的东西,只能是li;
我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的"语义的"
声明:ul的儿子只能是li,但是li是一个容器级标签,li里面生么都能放,甚至可以再放一个ul;
2.有序列表<ol>,里面的每一项是<li>
ol和ul就是语义不一样,怎么使用都是一样的
li里面只能有li,li必须被ol包裹,li是容器级;
3.定义列表<dl>
<dl>没有属性,dl的子元素只能是dt和dd;
<dt>列表的标题,这个标签是必须的;
<dd>列表的表项,如果不需要它可以不加;
备注:dt,dd只能在dl里面;dl里面只能有dt,dd;
dt,dd都是容器级标签,想放什么都可以,所以现在就应该更加清晰的知道用什么标签,不是根据样子来决定,而是语义(语义本质上是结构)
行内标签:1.在一行内显示, 2.不能设置宽高,默认是字体的大小;
块级标签:1.独占一行. 2.可以设置宽高,默认是父亲100%的宽度;
行内块标签(img,input):1.在一行内显示, 2.可以设置宽高