1.1HTML语法规则:
1.HTML标签是由尖括号包围的关键词,例如html。2.HTML标签通常是成对出现的,例如html和/html,我们称为**双标签**。3.签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
有些特殊的标签必须是单个标签(极少情况),例如,我们称为单标签。
1.2标签的关系:
双标签关系可以分为两类:包含关系和并列关系包含标签:headtitle/title/head
并列关系:
head/headbody/body
1.3基本结构标签:
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写
1.4开发工具:
VSCode的使用:
1.双击打开软件。2.新建文件(Ctrl+N)。3.保存(Ctrl+S),注意移动要保存为.html文件4.Ctrl+加号键,Ctrl+减号键可以放大缩小视图5.生成页面骨架结构。输入!按下Tab键。6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出窗口中点击“OpenInDefaultBrowser”。
DOCTYPE!DOCTYPEhtml文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
lang语言种类
用来定义当前文档显示的语言。
en定义语言为英语zh-CN定义语言为中文简单来说,定义为en就是英文网页,定义为
zh-CN就是中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页
其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
字符集:
1.字符集(Characterset)是多个字符的集合。以便计算机能够识别和存储各种文字。
2.在head标签内,可以通过meta标签的charset属性来规定HTML文档应该使用哪种字符编码。
3.metacharset="UTF-8"/
4.charset常用的值有:GB、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符.
5.注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量统一写成标准的"UTF-8",不要写成"utf8"或"UTF8"。
1.5语义化标签:
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
1.6什么是语义化标签:
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。下图没有语义化标签:
1.7添加语义标签:
二、常用的标签:
2.1标题标签
**标题标签h1-h6(重要)**为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,即h1-h6。具体实现:h1我是一级标题/h1特点:1.加了标题的文字会变的加粗,字号也会依次变大。2.一个标题独占一行。来!!!左边。。。右边。。。中间:h1标题一共六级选,/h1h2文字加粗一行显。/h2h3由大到小依次减,/h3h4从重到轻随之变。/h4h5语法规范书写后,/h5h6具体效果刷新见。/h6
2.2段落标签:
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,p标签用于定义段落,它可以将整个网页分为若干个段落。具体实现:p我是一个段落标签/p特点:1.文本在一个段落中会根据浏览器窗口的大小自动换行。2.段落和段落之间保有空隙。
2.3换行标签
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签br/。具体实现:br/特点:1.br/是个单标签。2.br/标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
2.4文本格式化标签:
在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
2.5div和span标签
div和span是没有语义的,它们就是一个盒子,用来装内容的。具体实现:div这是头部/divspan今日价格/span特点:1.div标签用来布局,但是现在一行只能放一个div。大盒子2.span标签用来布局,一行上可以多个span。小盒子
2.6图片标签:
在HTML标签中,img标签用于定义HTML页面中的图像。具体实现:imgsrc="图像URL"/解释:src是img标签的必须属性,它用于指定图像文件的路径和文件名。所谓属性:简单理解就是属于这个图像标签的特性。图像标签的其他属性:
图像标签注意点:
1.图像标签可以拥有多个属性,必须写在标签名的后面。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。
2.7路径:
分为相对路径和绝对路径:**路径之相对路径**相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于HTML页面的位置
特点:相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。
路径之绝对路径:
绝对路径:
1.是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。例如,“D:\web\img\logo.gif”或完整的网络地址“