Web前端入门
二、HTML标签
(一) 学习目标
(二)HTML语法规范
1、 所有标签由尖括号加关键词组成,如<html >
。
2、 双标签:大部分情况下标签成对出现。<html></html>
,其中<html>
为开始标签,</html>
为结束标签,多一个/
。
双标签关系分为包含关系和并列关系。
3、单标签极少情况,单标签的结尾加上/
如<br />
。
(三) HTML基本结构标签
1、概念
/2、制作第一个网页
txt中编辑如下内容,另存为.html文件,并用浏览器打开。
(四) 开发工具
1、使用记事本写.html文件有诸多不便,课程中选择VSCode进行.html的编写。
/2、 安装VSCode
VSCode中安转以下插件,输入英文感叹号出现HTML基本结构,编辑title和body后,右键选择Open in Default Browser 打开网页。
3、使用VSCode进行网页开发:
(1)Ctrl n:新建文件
(2)Ctrl s:保存为.html
(3) Ctrl +/-: 代码字体变大/变小
(4) 英文!:生成页面骨架结构
(5) 安装插件,右键鼠标选择浏览.html文件
4、VSCode工具生成骨架标签新增代码
※ <!DOCTYPE>标签:必须写到整个页面的第一行,文档类型声明标签,告诉浏览器当前页面采用的那个HTML版本,(HTML4/HTML5/XHTML)。如<!DOCTYPE html>
表示当前页面采取HTML5进行显示。不是HTML标签,而是文档类型声明标签。
5、lang语言:定义当前文档显示的语言。
en为英文页面、zh-CN表示中文页面,但对于文档显示来说,定义成en也可以显示中文,定义成zh-CN也能显示英文。这个属性对浏览器和搜索引擎有作用,建议中文网站为zh-CN,否者浏览器会提升进行翻译。
6、charset字符集:识别和存储各种文字,charset常用的值有:GB2312, BIG5, GBK和UTF-8, 其中UTF-8也被成为万国码,基本包含了全世界所有国家的文字。必须写得代码,否则会引起乱码情况。
(五) HTML常用标签
1、语义标签:
标签的含义,用来干嘛的。根据标签的语义,在合适的地方给一个合理的标签,能让页面的结构更清晰。
2、标题标签(重要):
<h1>-<h6>
,表示一级-六级标签,重要性递减。h为head的缩写,是双标签如:<h1> </h1>
。加了标题的文字会加粗,字号也会变大,并且独占一行。
※ 练习:
※ 新建ctrl n, 后先保存ctrl s,代码更改后先ctrl s保存,在用浏览器打开。
3、段落和换行标签(重要):
①段落标签
a、语法格式
<p>我是一个段落标签</p>
b、标签语义:把文字分为不同的段落,p为paragraph 段落缩写。
c、文本在一个段落中,会根据浏览器的大小自动换行,段落和段落之间保有空隙。
d、练习
e、 查看中勾选自动换行能消除文字的段落间隙。
②换行标签
a、语法格式(单标签)
我是<br />一个换行标签
我是
一个换行标签
b、 标签语义:强制换行,br为break 换行缩写。
c、 <br />
是一个单标签,<br />
和<p>
的区别,段落标签不同段落间有间距,换行标签没有间距只是换行。
d、 练习:新闻
e、 双标签,先将标签内的内容剪切,在输入html标签,最后将粘贴板的文字复制到标签内;单标签直接加在合适位置。按层级依次对标题、段落、换行标签进行操作。
4、文本格式标签:
①语法格式:
② 标签语义:突出重要性,在网页中为文字添加粗体、斜体或下划线等效果,使文字以特殊方式显示。
③ 练习
5、div和span标签:
①语法格式:
<div>我是一个div标签,我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span&g