html简介(HyperText Markup Language):超文本标记语言,标准通用标记语言下的一个应用。
超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素,能够表达更丰富的内容(相对于普通文本)。
标记:标识符号,就是html中的标签。
语言:不是编程语言,而是html标签的描述,浏览器翻译html代码。
网页扩展名:.html .htm
标签分类:
双标签:如 <font>HTML</font>,有开始标签和结束标签(标记)
单标签: 如<br />。
<br>与</br>的区别:
在早先发布的html规范中<br>、<hr>、<img>等标记元素是无需“封闭自身”的,这就造成了html规范本身的不严谨,所以后来参考了更规范的XML语言的语法推出了xhtml。
在xhtml中所有类似br这样的孤立标签都需要自行封闭,具体的做法就是在标签名字的后面跟个“/”,例如<br />,因此,是没有</br>这个写法的。
从逻辑上讲<br />=<br>=</br>,这样做的目的是为了尽量减少网页的代码量,同时保持逻辑严谨。
标签书写规范:
●所有的标签都在< >中。
●所有的标签都有开始和结束,即使是单标记也要结束。
——<br /> 强制换行。
——<img /> 图片标记。
●所有的标签和属性及值小写。
●标签和属性,属性与属性之间有空格。
●属性值必须有加引号(单引号或双引号都可以)。
●属性必须有值。
●属性可写可不写。
●标签与标签之间正确嵌套。
标签格式:
<开始标签 属性1="值1" 属性2="值2" 属性n="值n">控制的内容</开始结束标签>
<开始标签 属性1="值1" 属性2="值2" 属性n="值n" 空格/>
<开始标签 空格/>
文档结构:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
解释:
html: 指明当前的文档的类型,是一个网页
head:是网页头部 包括网页的相关信息,基本设置,其中title网站的标题就在里面。
body:在浏览器看到的内容。
html注释:<!--注释内容-->
html标签按功能分类:
●文本的修饰
●文字排版
●图片
●链接
●表格
●列表
●表单
●框架
文本的修饰:
属性:
<font>:
color:颜色 red、blue、green、yellow、gray、pink、tomato、wheat。
size:值(1-7),默认值:3。
如<font color="green" size="4">我的网页(1-7)</font>与<font color="green" size="+1">我的网页(1-7)</font>等效。
face:字体。(建议使用英文字母表示中文字体)
<body>:
text :文字的颜色
bgcolor:背景色
background:背景图。当前网页文件和背景图片在一起(建议)。
bgproperties:背景图固定。
如:<body text="orange" bgcolor="snow" background="bg1.jpg" bgproperties="fixed">
●通过样式来处理背景图固定的问题。
如:<body style="background:url(fixed.jpg)fixed"
HTML文本修饰标记:
<big>:相对默认文字大一些。
<small>:对默认文字小一些。
<b>:加粗。
<strong>:加强语气。
<i>:斜体。
<em>:斜体。
<u>:下划线。
<s>:删除线。
<ins><del>: ins标签定义被插入的文本,del定义文档中已被删除的文本,ins通常应连同del标签一同使用,表示被插入与被删除的文本,使用ins定义的文本通常带有下划线。
<sup> <sub>:sup上标,sub下标。
<b></b>和<strong></strong>的区别:
两者虽然在网页中显示效果一样,但实际目的不同。
<b>这个标签对应 bold,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
<strong>这个标签意思是加强,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;
总结:<b>为了加粗而加粗,<strong>为了标明重点而加粗。
<i></i> 和<em></em> 的区别:
<i></i> 就是italic,字体斜体;
<em></em> 也是强调内容,而被倾斜。
HTML排版标记:
<p>:<p> 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
——自动在段前段后添加一个空白行
——属性:
<br>:强行换行<br />。
<hr>:<hr> 标签在 HTML 页面中创建一条水平线。水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
——单标记 <hr />
——属性:width 宽度 :值:默认是像素,也可是百分比
——align:对齐方式:left center right ,默认 center
——color :颜色
——noshade 阴影设置
如:<hr width="50%" color="blue" size="4" noshade="noshade" />
<h1-h6>:<h1> - <h6> 标签可定义标题。
<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义,因此请慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
<pre>:pre元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。
pre元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。
<center>:对其所包括的文本进行水平居中。
<div>和span区别块元素和行内元素:
<div>:division,块元素,双标签。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
<span>:行内元素,双标签。
<span> 标签被用来组合文档中的行内元素。
块元素和行内元素的主要区别:
块级元素占一行,不论内容多少只要是有2个这样的元素就会换行,行内元素内容少时不会换行。这是个重要区别。
块级元素(block element):
div -最常用的块级元素
dl - 和dt dd搭配使用的块级元素
form - 交互表单
h1 - 大标题
hr - 水平分隔线
ol - 排序表单
p - 段落
ul - 非排序列表
内联元素(inline element):
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
HTML字符实体:
HTML 中的预留字符必须被替换为字符实体。
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
空格:1. 代表一个字符的空白
2.在输入法全角状态下,直接敲空格,代表一个汉字。
<和>:< >
&:&
¥:¥
版权:©
注册商标:®
申请中的商标:™