们发现了一个问题,就是代码,可能没有我们想象的那么难。 这节课我们来藤里解一个名词——HTML。
HTML是个缩写,全称是:HyperText Markup Language。说到这里, 可能有人会说,哇噻,好长一串单词,不行,我困了,我要去睡觉了。先别 急着走;咱们把这串单词拆吧拆吧;看看你认识多少。
•Hyper:不认识
•Text:你敢说不认识?
•Mark:每天用马克笔,另11和我说不知道是这个Mark
•Up:不认识……吗?
•Language:就算是英文再不好,这个单词也得认识吧,玩游戏的时候都
是找这个单词切换成中文的所以乍一看挺长,但别害伯,把它打碎了,说不定你还认识一半以上 呢!感觉自己十分厉害的样子!
那么说一下,他的中文名字,或者说翻译过来的样子——超文本标记语 言。不过这个名称也很少被人提及,现在的人都喜欢用缩写,缩写成了 HTML还不够,又缩成了 H5……你马上会说,原来这个名字和上面一样, 也是了解一下就行了。嘿嘿,并不是,这个名字很重要,认真理解这个名 字,你便可以很快的掌握HTML 了。
首先,文本,就是纯文字呗,代码可不全是字么(其实我们偶尔也输 入表情喵:,皮这一下表示很开森〜。那什么是超文本呢,就是 在文本的基础上进行增强和扩展。那如何进行増强呢?答案就是标记。原 本,我们在文本里写什么就是什么,现在,我们用文本中的一些内容去标记 另一些内容。就比如上一章里我们说到的:
其中的<strong>和</strong>并不会被显示出来,而是用来标记 超级7□敌这四个子,表不要被关出。
至于语言,我们知道,无论是汉语,还是英语,都属于语言,是我们人 类间用来相互沟通的工具。而我们编程用到的语言呢,是我们人类和电脑之 间沟通的工具。不过,这可比学一门外语简单多了,毕竟,需要用到的单词 没有几个,语法也十分简单,关键问题,只是逻辐清晰的把你的想法描述出 来。
好了,那么我们回头再来念一遍这个名字:超文本标记语言,是不是觉 得不是那么的陌生了呢?
html概述
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
一个html的基本结构如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>
第一行是文档声明,第二行“”标签和最后一行“”定义html文档的整体,“”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是’lang=“zh-CN”’,不定义也没什么影响,它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素,“”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“”内编写网页上显示的内容。
HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本,目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法: html:xt + tab
文档示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文档类型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的
此版本文档用sublime text创建方法: html:5 + tab 或者 ! + tab
文档示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文档类型 </title> </head> <body> </body> </html>
两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
html注释:
html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:
<!-- 这是一段注释 -->
通过
、
、
、
、
,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系,比如说:
,再其次是
,以此类推。搜索引擎会使用标题将网页的结构和内容编制索引,所以网页上使用标题是很重要的。
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
html段落标签
标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超 文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的 标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。 </p> <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方 式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网 页可以从一个网页链接跳转到另外一个网页。</p> </body> </html>
html换行标签
代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入
来强制换行,代码如下:
<p> 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br /> 文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br /> 渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。 </p>
html字符实体
代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:
<!-- 在段落前想缩进两个文字的空格,使用空格的字符实体: --> <p> 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br /> 文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br /> 渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示 “<” 和 “>” 会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:
<!-- “<” 和 “>” 的字符实体为 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html块标签
1、
标签 块元素,表示一块内容,没有具体的语义。
2、 标签 行内元素,表示一行中的一小段内容,没有具体的语义。
含样式和语义的标签
1、 标签 行内元素,表示语气中的强调词
2、 标签 行内元素,表示专业词汇
3、 标签 行内元素,表示文档中的关键字或者产品名
4、 标签 行内元素,表示非常重要的内容
语义化的标签
语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。
html图像标签
标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
绝对地址:相对于磁盘的位置去定位文件的地址
相对地址:相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:
“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录,比如:“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
标签可以在网页上定义一个链接地址,它的常用属性有:
href属性 定义跳转的地址
title属性 定义鼠标悬停时弹出的提示文字框
target属性 定义链接窗口打开的位置
target="_self" 缺省值,新页面替换原来的页面,在原来位置打开
target="_blank" 新页面会在新开的一个浏览器窗口打开
、 HTML语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language),它不是一种编程语言,而是一种使用一套标记标签(markup tag)来标记元素作用的标记语言,标记语言使用标记标签来描述网页的内容。标记标签不会出现在页面中,只有标签中的内容才会显示在页面上。
二、 HTML标签和HTML元素
HTML 标记标签通常被称为 HTML 标签 (HTML tag),是由一对尖括号括起来的关键词,称为标签名,如 <html>、<a>、<h1>。标签不区分大小写,但是推荐使用小写,(X)HTML 版本中强制使用小写,这样更加严谨。
标签的标记分为起始标签和结束标签。HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有内容。
起始标签用于标记对应HTML元素的开始位置,结束标签用于标记HTML元素的结束位置。
标签分为单标签和双标签,都需要起始标签和结束标签,不同的是单标签起始、结束标签都写在一个尖括号里而双标签则分别写在两个尖括号里。单标签又称为空标签,双标签又称为闭合标签。单标签的结束标签就是在标签的右尖括号前面一个反斜杠,如<br />就是一个单标签,双标签的结束标签就是在左尖括号后比开始标签多了一个反斜杠,如<html>和</html>就是一对开始标签和结束标签。
三、 HTML元素的分类
不同的HTML标签对应的HTML元素可以根据位置特征等分为两类:
四、 标签嵌套
双标签的开始标签和结束标签之间可以嵌套其他标签,不过需要遵循以下规则:
1、两个标签嵌套时必须确保开始标签和结束标签的层级是一致的,即开始标签在外层的结束标签必须在外层;
2、建议书写HTML文本时嵌套标签的内层标签相对外层标签进行缩进以体现嵌套关系;
3、块元素标签可以包含行元素标签,但行元素标签不能包含块元素标签,它们只能包含其它的行元素标签;
4、a标签想要用hover必须把它的路径写全;
5、伪类(hover/link/visited/active)只能加给a标签,在支持 CSS 的浏览器中,伪类表示链接的不同状态,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态:
1)link用在为访问的连接上;
2)visited用在已经访问过的连接上;
3)hover用于鼠标光标置于其上的连接;
4)active用于获得焦点(比如,被点击)的连接上。
6、块元素标签之间:
1)h1、h2、h3、h4、h5、h6、p、dt标签内不能再嵌套块标签;
2)li元素可以嵌入ul, ol, div;
3)div内可以再嵌套其他块元素;
4)块元素嵌套其他标签时,同一层级必须都是块元素,或必须都是行元素,不能一部分是块元素,一部分是行元素。如<div><span></span><p></p></div>这种模式是错误的,因为span是行元素,p是块元素,所以这个是错误的嵌套。
虽然标签可以嵌套,但为了提高浏览器的渲染效率,应该尽量少使用标签嵌套。
五、 标签的属性
HTML 标签可以拥有属性,属性为HTML元素提供的更多的附加信息, 属性只能在开始标签中使用,总是以名称/值对的形式出现,属性与属性之间需要用空格隔开,属性使用小写。常用的属性有class(样式类)、id(属性名)、style(显示风格)、title(标题)、align(对齐方式)、bgcolor(背景色)、color(颜色)。
如:
。
*请认真填写需求信息,我们会在24小时内与您取得联系。