设计师学习HTML/CSS之路-02

392 阅读5分钟

不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!

第2章 认识标签(第一部分)

2-1 语义化

语义化,让你的网页更好的被搜索引擎理解。 标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。

语义化的好处:

  1. 更容易被搜索引擎收录;
  2. 更容易让屏幕阅读器读出内容;

2-2 body标签

在网页上要展示出来的内容,一定要放在body标签中

<body>
网页展示内容
</body>

2-3 p标签,添加段落

语法: <p>段落文本</p>

<body>
 <p>我的第一个段落。</p>
 <p>我的第二个段落。</p>
</body>

2-4 hx标签,为网页添加标题

标题标签一共6个,分别是h1,h2,h3,h4,h5,h6

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2-5 strong和em标签(加强语气标签)

语法:
<em>需要强调的文本(斜体)</em>(em=emphasize强调)
<strong>需要强调的文本(加粗)</strong>

国内推荐使用strong标签

2-6 使用span标签为文字设置单独样式

语法:
<span>文本</span>
<span>标签是没有语义的,他的作用就是为了设置单独的样式。

<html>
   <head>
     <style>
     span{color:blue;}
     </style>
   </head>
   <body>
     <p>这是一段<span>示例</span>文字。</p>
    </body>
</html>

q标签,短文本引用

语法: <q>文本</q>

解释: quote

2005年5月2日星期一,这一天,是这位百岁老人阿朗.卡尔松的百岁生日,大家要为这个百岁老人举办一个大party,市长会亲自来参加,还有全体工作人员,但唯一不打算出现的,是主角本人。这老头从养老院的窗户里爬出来,身着棕色的外套,棕色的裤子,和棕色的尿点拖鞋,揣着几百块钱,消失了……

tips:<q>标签的目的是表达语义,而不是简单的加引号。

2-8 blockquote标签,长文本引用

语法:
<blockquote>引用文本</blockquote>

2005年5月2日星期一,这一天,是这位百岁老人阿朗.卡尔松的百岁生日,大家要为这个百岁老人举办一个大party,市长会亲自来参加,还有全体工作人员,但唯一不打算出现的,是主角本人。

这老头从养老院的窗户里爬出来,身着棕色的外套,棕色的裤子,和棕色的尿点拖鞋,揣着几百块钱,消失了……

<p>2005年5月2日星期一,这一天,是这位百岁老人阿朗.卡尔松的百岁生日,大家要为这个百岁老人举办一个大party,<q>市长会亲自来参加,还有全体工作人员,但唯一不打算出现的,是主角本人。<blockquote>这老头从养老院的窗户里爬出来,身着棕色的外套,棕色的裤子,和棕色的尿点拖鞋,揣着几百块钱,消失了……</blockquote>
</p>

2-9 使用br标签分行显示文本

语法:
文本</br>
文本</br>
文本</br>
</br>标签相当于Word文档里的回车

解释:
line break

2-10 添加空格

语法:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
解释:
Non-Breaking Space

2005年5月2日  星期一

2-11 hr水平横线标签

语法:
<hr>
解释:
horizontal rule


2-12 address标签,为网页加入地址信息

语法:
<address>联系地址信息</address>
在浏览器上显示的样式为斜体

2-13 加入一行代码 用code标签

语法:
<code>代码语言</code>
注:
如果是多行代码,使用<pre></pre>标签

2-14 使用pre标签,为网页加入大段代码

语法:
<pre>代码语言</pre>
标签的主要作用:
预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
解释:
predefined 预定义

例:

    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }

如果用老方法回车需要输入<br>,空格需要输入&nbsp;
<pre>标签不仅仅用于代码展示,其他需要的情况下,也可以使用