HTML5中有一些特性需求咱们知道。
空白折叠现象
空白折叠现象有两种:
1、便是文字和文字之间的多个空格、换行会被折叠成一个空格。
2、标签的“内壁”和文字之间的空格会被忽略。
接下来我具体的演示一下,第1种空白折叠现象到底是怎么回事。
翻开vscode,这次我在之前创立的第三个网页.html里边写代码来演示。
我先生成一个HTML5的骨架,如下图:
然后我在body里边写一个p标签,在这个p标签里边随意写一段文字:”不矜细行,终累大德。”我在”不矜细行”后面打好多个空格,然后再给”终累大德”换行,如下:
Document
不矜细行,终累大德。
然而在浏览器中的效果如下:
“不矜细行”和”终累大德”之间只是只要一个空格。
也便是说,文字和文字之间的空格和换行不管有多么复杂,不管有多少个空格、有多少次换行,都会被折叠成一个空格,这便是空白折叠现象。
接下来我再演示一下第2中空白折叠现象到底是怎么回事。
我再写一个p标签,里边写上文字:”吉光片羽”,然后在开始标签和这句话的最初之间打上很多空格,在这句话的结尾和完毕标签之间也打上很多空格,如下:
Document
不矜细行,终累大德。
吉光片羽
然后在浏览器中,看的的效果如下:
这个现象阐明,在标签的”内壁”和文字之间,不管打多少空格,在浏览器中显现时,都不会有空格。
所以,空白折叠现象的真正含义是:假如你想给文字换行,不管你在代码里边如何打空格,打换行,都不会起效果,只要经过标签的语义和特性才干完成。
也便是说,假如你想给某些文字换行,你就在这些文字外面包裹个p标签就行,可是你在编辑器的代码里边,不管怎么换行,在浏览器中都不会起效果。
转义字符
为了阐明转义字符的效果,我先演示一个小例子:我把前面为了演示空白折叠现象的代码都删除掉,直接在body里边写上这样一句话:”咱们知道标签对的功用是表明一个阶段”,如下:
Document咱们知道标签对的功用是表明一个阶段
然后看到浏览器中的效果是这样:
是不是很古怪?分明我写的是这样一句话:”咱们知道标签对的功用是表明一个阶段”,可是在浏览器中显现的结果是这样:没有了,并且从”咱们知道”这四个字后面换行了。这是为什么呢?
这是由于浏览器把直接当作HTML的p标签了,这个中没有任何文字,所以在浏览器中对应的位置,就什么都没有,并且p标签具有换行的效果,所以就换行了。
那么,如何才干在浏览器中显现出这几个字符,而不是被浏览器作为p标签解析掉呢?
这就需求转义字符。
常见的转义字符:
也便是说,你想在浏览器中显现一个小于号,你就在代码中写<,你想在浏览器中显现一个大于号,你就在代码中写>,那么你想在浏览器中显现,你就应该在代码中这样写:
<p></p>
其实更简略的写法是:<p></p>;
Document咱们知道<p></p>标签对的功用是表明一个阶段
此刻浏览器显现效果:
也便是说,在代码中,我用转义字符把p标签的小于号损坏掉了,这样浏览器就不会把它看做一个标签了。
也便是说,浏览器看到代码中直接写小于号、大于号的,就会把它们全体看做是标签,而浏览器看到转义字符<和>,就会把它看做是小于号和大于号,这样就避免了抵触和歧义:你本来是想在浏览器中直接显现这几个字符,可是假如你在代码中直接这样写,浏览器就会认为是p标签从而给你解析掉,而你用转义字符来表达的话,它就理解这是大于号小于号。
再来看看别的两个转义字符和?
表明空格,并且不会被折叠,前面说了,在HTML5中,文字之间的多个空格会被折叠,可是你用转义字符来表明空格,就不会被折叠。
?表明版权符号。
接下来看看和?的效果。
Document咱们知道<p></p>标签对的功用是表明一个阶段
空格哈喽你好
版权符号?
我在哈喽和你好之间用转义字符来表明空格,一共写了8个空格,不会被折叠成1个空格:
留意:转义字符不要忘记写分号。
HTML注释
任何编程语言的代码,注释都是非常重要的。它可认为自己或他人日后阅览代码供给提示。
HTML的代码,注释的语法是这样的:
HTML的注释,在vscode中,能够运用快捷键ctrl+/来输入。
HTML的注释,在代码中是这样的:
Document咱们知道<p></p>标签对的功用是表明一个阶段
空格哈喽你好
版权符号?
html注释快捷键写法
CSS也是我们常叫的款式表、浅显叫切图和静态网页布局。我们知道HTML网页是由若干标签和内容组成。标签包含了div标签、span标签、a锚文本标签、strong加粗标签、b加粗标签、p段落标签、br换行标签等组成。而好看的网页款式却是CSS操控得出。一个完整漂亮网页,就是由html标签与操控这些标签布局和美化功用CSS组成。
注释标签:对代码进行阐明
常用格式标签
<b>加粗
斜体
段落标签
:分割线
:换行
<strong>(粗字体)强调文本
标题标签
<h1>一级标题标签
二级标题标签
三级标题标签
四级标题标签
五级标题标签
六级标题标签
列表标签
<ultype=”disc”>
列表项1
列表项2
列表项3
有序列表:
<oltype=”1″>
列表项1
列表项2
列表项3
CSS款式
内嵌款式:放在标签之间
<styletype=”text/css”>
选择器名{特点名:特点值;
}
所有标签(*)
*{
padding:0px;/*铲除默许内边距*/
margin:0px;/*铲除默许外边距*
}
超链接:
<ahref=”网页的网址”target=”_blank”>超链接文字或图片
_blank:在新窗口打开网页
_self:在当时本身窗口打开网页
锚点链接
<ahref=”#锚点名”>锚点链接:跳转链接
name=”锚点名”>锚点名:要跳转到的方位