码迷,mamicode.com
首页 > Web开发 > 详细

HTML(前端)

时间:2018-08-12 21:37:12      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:none   两种   告诉   单元   应该   .com   com   pre   font   

前端分为三个标准:

  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.可以设置宽高

 

HTML(前端)

标签:none   两种   告诉   单元   应该   .com   com   pre   font   

原文地址:https://www.cnblogs.com/fengkun125/p/9464008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!