一丶HTML介绍
1.HTML的概述
html全程HyperTextMackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体丶颜色丶大小等.
超文本:音频,视频,图片称为超文本.
标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成.
作用:HTML是负责描述文档语义的语言.
注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行.
二丶HTML的规范
HTML是一个弱势语言
HTML不区分大小写
HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
HTML的结构:
声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准.是HTML5标准
head部分:将页面的一些额外信息告诉服务器.不会显示在页面上
body部分:我们所写的代码必须放在此标签内
1.编写HTML的规范
1.所有标记元素都要正确的嵌套,不能交叉嵌套
2.所有的标记都必须小写
3.所有的标记都必须关闭
双边标记:<span></span>
单边标记:<br>转成<br /> <hr>转成<hr />,还有<img src="URL"/>
4.所有的属性值都必须加引号:<h1 id="head"></h1>
5.所有的属性必须有值.<input type = "radio" checked = "checked" />
2.HTML的基本语法特征
1.HTML对换行不敏感,对tab不敏感
HTML只在乎标签的嵌套结构,嵌套关系.谁嵌套了谁,谁被谁嵌套了,和换行丶tab无关.换不换行丶tab不tab,都不影响页面的结构.
2.空白折叠现象
HTML中所有的文字之间,如果有空格丶换行丶tab都将被折叠为一个空格显示.
3.标签要严格的封闭
标签有开头就要有结尾,单边标记除外,比如:开头是<span>就必须有</span>结尾
三丶HTML结构详解
新建HTML文件后,会自动生成如下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1.文档声明头
任何一个标准的HTML页面,第一行一定是一个以<!DOCTYPE.....开头的这一行,就是文档声明头.DocType Declaration,简称DTD.此标签可告知浏览器文档使用哪种HTML或XHTML规范.
2.头标签(head)
head标签都放在头部分之间.这里面包含了:<title>丶<meta>丶<link>,<style>
<title>:指定整个网页的标题,在浏览器最上方显示.
<meta>:提供有关页面的基本信息
<link>:定义文档与外部资源的关系.
<style>:定义内部样式表与网页的关系
3.Meta标签介绍:
meta标签的组成: meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能.
常用的meta标签:
(1)http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值.
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
(2)name属性
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用','号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息的
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率.让别人能够找到你,搜索到.只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO(search engine optimization，搜索引擎优化)
4.title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题.
5.字体标签:
字体标签包含h1~h6丶<font>丶<u>丶<b>丶<strong><em>丶<sup>丶<sub>
(1)标题 h1~h6
标题使用<h1>至<h6>标签进行定义.<h1定义最大的标题>,<h6>定义最小的标题.具有align属性.属性值可以是:left丶center丶right.
<body> <h1>我的标题</h1> <h2>我的标题</h2> <h3>我的标题</h3> <h4>我的标题</h4> <h5>我的标题</h5> <h6>我的标题</h6> </body>
(2)字体标签 <font>
设置字体颜色: color = "红色"
设置字体大小: size 1~7
设置字体类型: face = "微软雅黑"
(3)粗体标签<b>或<strong>
<b>小马哥</b> <strong>小马哥</strong>
(4)下划线标记<u>中划线标记<s>
<u>小马哥</u> <s>小马哥</s>
(5)斜体标记<i>或<em>
<i>小马哥</i> <em>小马哥</em>
(6)上标<sup>下标<sub>
5<sup>2</sup> 8<sub>3</sub>
(7)特殊字符
-
：空格 （non-breaking spacing，不断打空格） -
<：小于号（less than） -
>：大于号（greater than） -
&：符号& -
"：双引号 -
'：单引号 -
©：版权© -
™：商标™
四丶排版标签
1.段落标签<p>
段落:是英文paragraph的缩写
属性:
align = "属性值" :对齐方式.属性值包括: left丶center丶right
示例:
<p>这是一个段落</p> <p align="center">这是另一个段落</p>
HTML所有的标签分为两种:
文本级标签: p丶span丶a丶b丶i丶u丶em.文本标签里只能放文字丶图片丶表单元素
容器级标签:div丶h系列丶li丶dt丶dd.容器级标签里可以放任何东西
p标签是一个文本级标签,p里面只能放文字丶图片丶表单元素.其他的一律不能放.
2.块级标签<div>和<span>
div和span是非常重要的标签,div的语义是division"分割";span的语义就是span"范围丶跨度".
div:把标签中的内容作为一个块来对待 (division),必须单独占据一行.
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
<div>你好哇</div> <span>你好</span> <span>你好</span> <span>你好</span>
3.换行标签<br>
当你打算结束一行,而又不想开始一个新段落时,就用<br>标签
将军 北方仓粮<br>占据六马十二兵 等待你光临<br>胡琴 诉说英勇事迹<br>败军 向南远北方离
4.水平线标签<hr>
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分
<h3>我的标题</h3> <hr> <hr> <hr> <h4>我的标题</h4>
5.内容居中标签<center>
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
<center>我是在中间的</center>
五丶超链接
href:目标URL
title:悬停文本.
name:主要用于设置一个锚点的名称
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self：在同一个网页中显示（默认值）
_blank：在新的窗口中打开。
_parent：在父窗口中显示
_top：在顶级窗口中显示
a是一个文本级的标签
比如一个段落中的所有文字都能够被点击,那么应该是p包含a:
<p> <a href="">段落段落段落段落段落</a> </p>
六丶img图片标签
img: 代表的就是一张图片。是单边标记。也称为单标签
<img src="1364810.png" alt="">
img标签的常用其它属性:
宽度
height:高度
title:提示性文本.公有属性.也就是鼠标悬停时出现的文本
align:指图片的水平对齐方式,属性值可以是;left丶center丶right
alt:当图片显示不出来的时候,代替图片显示的内容.alt是英语alternate “替代”的意思。（有的浏览器不支持）
注意事项:
(1)如果要想保证图片等比例缩放,请只设置width和height中其中一个.
(2)如果想实现图文混排的效果,请使用align属性,取值为left或right
七丶form表单
<form action="https://www.baidu.com/s"> <!--表单控件--> <input type="text" name = 'wd' value=""/> <!--<input type="password" name = 'pwd' value="123"/>--> <input type="submit" value="搜索"> </form>
