HTML笔记(适合新⼿⼊门)
HTML
Web 标准构成
Web标准不是某⼀个标准,⽽是由W3C和其他标准化组织制定的⼀系列标准的集合。
主要包括结构(Structure)、表现(Presentation)和⾏为(Behavior)三个⽅⾯。
结构标准:结构⽤于对⽹页元素进⾏整理和分类,咱们主要学的是HTML。最重要
表现标准:表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式,主要指的是CSS。
⾏为标准:⾏为是指⽹页模型的定义及交互的编写,咱们主要学的是 Javascript
HTML标签分类
在HTML页⾯中,带有“< >”符号的元素被称为HTML标签。所谓标签就是放在“< >” 标签符中表⽰某个功能的编码命令,也称为HTML标签或HTML元素。
1.双标签
<;标签名> 内容 </标签名>
该语法中“<;标签名>”表⽰该标签的作⽤开始,⼀般称为“开始标签(start tag)”,“</标签名>” 表⽰该标签的作⽤结束,⼀般称为“结束标签(end tag)”。和开始标签相⽐,结束标签只是在前⾯加了⼀个关闭符“/”。
⽐如 <body>我是⽂字  </body>
js random函数2.单标签
<;标签名 />
单标签也称空标签,是指⽤⼀个标签符号即可完整地描述某个功能的标签。
⽐如  <br />
HTML标签关系
标签的相互关系就分为两种:
1.嵌套关系
<head>  <title> </title>  </head>
2.并列关系
<head></head>
<body></body>
⽂档类型<!DOCTYPE>
<!DOCTYPE html>
这句话就是告诉我们使⽤哪个html版本?我们使⽤的是 html 5 的版本。 html有很多版本。
<!DOCTYPE> 标签位于⽂档的最前⾯,⽤于向浏览器说明当前⽂档使⽤哪种 HTML 或 XHTML 标准规范,必需在开头处使⽤<!DOCTYPE>标签为所有的XHTML⽂档指定XHTML版本和类型,只有这样浏览器才能按指定的⽂档类型进⾏解析。
注意:⼀些⽼⽹站可能⽤的还是⽼版本的⽂档类型⽐如 XHTML之类的,HTML5的⽂档类型兼容很好(向下兼容的原则),所以⼤家放⼼的使⽤HTML5的⽂档类型就好了。
襄阳网站建设制作
字符集
<meta charset="UTF-8" />
utf-8是⽬前最常⽤的字符集编码⽅式,常⽤的字符集编码⽅式还有gbk和gb2312。
html个人网页完整代码顺序gb2312 简单中⽂包括6763个汉字
BIG5 繁体中⽂港澳台等⽤
GBK包含全部中⽂字符是GB2312的扩展,加⼊对繁体字的⽀持,兼容GB2312
UTF-8则包含全世界所有国家需要⽤到的字符
记住⼀点,以后我们统统使⽤UTF-8 字符集, 这样就避免出现字符集不统⼀⽽引起乱码的情况了。
HTML标签的语义化
所谓标签语义化,就是指标签的含义。
为什么要有语义化标签
1、⽅便代码的阅读和维护
2、同时让浏览器或是⽹络爬⾍可以很好地解析,从⽽更好分析其中的内容
3、使⽤语义化标签会具有更好地搜索引擎优化
核⼼:合适的地⽅给⼀个最为合理的标签。
语义是否良好:当我们去掉CSS之后,⽹页结构依然组织有序,并且有良好的可读性。
⼀眼看去,就知道那个是重点,结构是什么,知道每块的内容是⼲啥的。
遵循的原则:先确定语义的HTML ,再选合适的CSS。
HTML常⽤标签
HTML标签有很多,这⾥我们学习最为常⽤的,后⾯有些较少⽤的,我们可以查下⼿册就可以了。
排版标签
排版标签主要和css搭配使⽤,显⽰⽹页结构的标签,是⽹页布局最常⽤的标签。
标题标签 (熟记)
单词缩写: head 头部. 标题 title ⽂档标题
为了使⽹页更具有语义化,我们经常会在页⾯中⽤到标题标签,HTML提供了6个等级的标题,即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
标题标签语义:作为标题使⽤,并且依据重要性递减
其基本语法格式如下:
<hn>  标题⽂本  </hn>
注意: h1 标签因为重要,尽量少⽤,不要动不动就向你扔了⼀个h1。⼀般h1 都是给logo使⽤,或者页⾯中最重要标题信息。
段落标签( 熟记)
单词缩写: paragraph 段落 [ˈpærəgræf] ⽆须记这个单词
在⽹页中要把⽂字有条理地显⽰出来,离不开段落标签,就如同我们平常写⽂章⼀样,整个⽹页也可以分为若⼲个段落,⽽段落的标签就是
<p>  ⽂本内容  </p>
是HTML⽂档中最常见的标签,默认情况下,⽂本在⼀个段落中会根据浏览器窗⼝的⼤⼩⾃动换⾏。
⽔平线标签(认识)
单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上
在⽹页中常常看到⼀些⽔平线将段落与段落之间隔开,使得⽂档结构清晰,层次分明。这些⽔平线可以通过插⼊图⽚实现,也可以简单地通过标签来完成,<hr />就是创建横跨⽹页⽔平线的标签。其基本语法格式如下:
<hr />是单标签
在⽹页中显⽰默认样式的⽔平线。
换⾏标签(熟记)
单词缩写: break 打断 ,换⾏
在HTML中,⼀个段落中的⽂字会从左到右依次排列,直到浏览器窗⼝的右端,然后⾃动换⾏。如果希望某段⽂本强制换⾏显⽰,就需要使⽤换⾏标签
<br />
这时如果还像在word中直接敲回车键换⾏就不起作⽤了。
div span标签(重点)
div span 是没有语义的是我们⽹页布局主要的2个盒⼦ css+div
div 就是 division 的缩写分割,分区的意思其实有很多div 来组合⽹页。
跨度,跨距;范围
语法格式:
<div> 这是头部 </div>    <span>今⽇价格</span>
⽂本格式化标签(熟记)
在⽹页中,有时需要为⽂字设置粗体、斜体或下划线效果,这时就需要⽤到HTML中的⽂本格式化标签,使⽂字以特殊的⽅式显⽰。
b i s u 只有使⽤没有强调的意思 strong em del ins 语义更强烈
标签属性
使⽤HTML制作⽹页时,如果想让HTML标签提供更多的信息,可以使⽤HTML标签的属性加以设置。其基本语法格式如下:
<;标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
在上⾯的语法中,
1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后⾯。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值,省略该属性则取默认值。
采取键值对的格式 key="value" 的格式
⽐如:
<hr width="400" />
属性是宽度cmsv9不开机会录像吗
值是 400
建议:尽量不使⽤样式属性。
图像标签img (重点)
单词缩写: image 图像
HTML⽹页中任何元素的实现都要依靠HTML标签,要想在⽹页中显⽰图像就需要使⽤图像标签,接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下:
该语法中src属性⽤于指定图像⽂件的路径和⽂件名,他是img标签的必需属性。
<img src="图像URL" />
链接标签(重点)
单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的
在HTML中创建超链接⾮常简单,只需⽤标签环绕需要被链接的对象即可,其基本语法格式如下:
<a href="跳转⽬标" target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
href:⽤于指定链接⽬标的url地址,当为标签应⽤href属性时,它就具有了超链接的功能。 Hypertext
Reference的缩写。意思是超⽂本引⽤target:⽤于指定链接页⾯的打开⽅式,其取值有self和blank两种,其中self为默认值,blank为在新窗⼝中打开⽅式。
注意:
1.外部链接需要添加
2.内部链接直接链接内部页⾯名称即可⽐如 < a href="index.html"> ⾸页 </a >
3.如果当时没有确定链接⽬标时,通常将链接标签的href属性值定义为“#”(即href="#"),表⽰该链接暂时为⼀个空链接。
4.不仅可以创建⽂本超链接,在⽹页中各种⽹页元素,如图像、表格、⾳频、视频等都可以添加超链接。
锚点定位(难点)
通过创建锚点链接,⽤户能够快速定位到⽬标内容。创建锚点链接分为两步:
1.使⽤“a href=”#id名>“链接⽂本"</a>创建链接⽂本(被点击的)
<a href="#two">
2.使⽤相应的id名标注跳转⽬标的位置。
<h3 id="two">第2集</h3>
base 标签基本的
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
把所有的连接都默认添加 target="_blank"
特殊字符标签(理解)
注释标签
在HTML中还有⼀种特殊的标签——注释标签。如果需要在HTML⽂档中添加⼀些便于阅读和理解但⼜不需要显⽰在页⾯中的注释⽂字,就需要使⽤注释标签。其基本语法格式如下:
<!-- 注释语句 -->  ctrl + /      或者 ctrl +shift + /
数据库三大范式详解注释内容不会显⽰在浏览器窗⼝中,但是作为HTML⽂档内容的⼀部分,也会被下载到⽤户的计算机上,查看源代码时就可以看到。
路径(重点、难点)sql数据库修复是什么意思
路径可以分为:相对路径和绝对路径
相对路径
以引⽤⽂件之⽹页所在位置为参考基础,⽽建⽴出的⽬录路径。因此,当保存于不同⽬录的⽹页引⽤同⼀个⽂件时,所使⽤的路径将不相同,故称之为相对路径。
图像⽂件和HTML⽂件位于同⼀⽂件夹:只需输⼊图像⽂件的名称即可,如img src="logo.gif" /。
图像⽂件位于HTML⽂件的下⼀级⽂件夹:输⼊⽂件夹名和⽂件名,之间⽤“/”隔开,如img src="img/img01/logo.gif" /。
图像⽂件位于HTML⽂件的上⼀级⽂件夹:在⽂件名之前加⼊“../” ,如果是上两级,则需要使⽤ “../ ../”,以此类推,如img src="../logo.gif" /。绝对路径
绝对路径以Web站点根⽬录为参考基础的⽬录路径。之所以称为绝对,意指当所有⽹页引⽤同⼀个⽂件时,所使⽤的路径都是⼀样的
“D:\web\img\logo.gif”,或完整的⽹络地址,例如“”。