HTML基础

第一章 HTML介绍

1-1Html和CSS的关系:
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1-2标签的语法
1. 标签由英文尖括号<和>括起来，如<html>就是一个标签。

2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。如下图所示。

4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

1-2认识html文件基本结构
1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

1-3 head标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

1 <head>
2     <title>...</title>
3     <meta>
4     <link>
5     <style>...</style>
6     <script>...</script>
7 </head>

1-4HTML的代码注释
代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

<!--注释文字 -->

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <title>HTML的代码注释</title>
 6     </head>
 7     <body>
 8         <!--在线咨询 begin-->
 9         <div>
10             <p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p>
11         </div>
12         <!--在线咨询 end-->
13     </body>
14 </html>

第二章HTML标签 随笔

2-1 <body>标签  网页添加内容
在网页上要展示出来的页面内容一定要放在body标签中。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>

</head>

<body>

    <h1>了不起的盖茨比</h1>

    <p>1922年的春天，一个想要成名名叫<em>尼克?卡拉威</em>（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

    
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

</body>

</html>

2-2 <p>标签   添加段落
如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
语法：

<p>段落文本</p>

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 <title> p标签</title>
 9 
10 </head>
11 
12 <body>
13 
14 <p>我的第一个段落。</p>
15 
16 <p>我的第二个段落。</p>
17 
18 </body>
19 
20 </html>

2-3<hx>标签  网页添加标题

我们将使用<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)

因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。

h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。

2-4<strong>和<em>标签  强调语气

<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。

语法：

<em>需要强调的文本</em>  

<strong>需要强调的文本</strong> 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>了不起的盖茨比</title>
 6 </head>
 7 <body>
 8     <p>1922年的春天，一个想要成名名叫<strong>尼克•卡拉威</strong>（托比•马奎尔Tobey Maguire饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
 9     <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
10 </body>
11 </html>

2-5<span>标签  为文字设置单独样式

语法：

<span>文本</span>

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>了不起的盖茨比</title>
 6 <style>
 7 span{
 8     color:blue;   
 9 }
10 </style>
11 </head>
12 <body>
13     <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
14     <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
15 </body>
16 </html>

2-6  <q>标签  短文本引用

想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。

语法：

<q>引用文本</q>

 注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>q标签</title>
 6 </head>
 7 <body>
 8 <p>周瑜，不可否认，他是历史上一个了不起的英雄人物！确实也配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p>
 9 </body>
10 </html>

2-7  <blockquote>标签   长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

语法:

<blockquote>引用文本</blockquote>

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>blockquote标签的使用</title>
 6 </head>
 7 <body>
 8 <h2>心似桂花开</h2>
 9 <p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p>
10 <blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
11 <p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。</p>
12 </body>
13 </html>

2-8 <br>标签  分行显示文本

在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

      与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。

      在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>br标签的使用</title>
 6 </head>
 7 <body>
 8 <h2>《咏桂》</h2>
 9 <p>暗淡轻黄体性柔，<br />情疏迹远只香留。<br />何须浅碧深红色，<br />自是花中第一流。</p>
10 </body>
11 </html>

总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。

 

2-9   &nbsp；  为网页增加一些空格

我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入&nbsp;。

语法：

&nbsp;

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>空格讲解</title>
 6 </head>
 7 <body>
 8 <h1>感悟梦想</h1>
 9 来源：作文网&nbsp;&nbsp;作者：为梦想而飞 
10 </body>
11 </html>

2-10 <hr>  添加水平横线

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些

语法：

xhtml1.0版本 <hr />

html4.01版本 <hr>

注意：

1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>hr标签使用</title>
 6 </head>
 7 <body>
 8 <p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
 9     <hr/>
10 <p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
11 </body>
12 </html>

2-11  <address>标签，为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

语法：

<address>联系地址信息</address>

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>address标签介绍</title>
 6 </head>
 7 <body>
 8 <h2>慕课网</h2>
 9 <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!公司地址：<address>北京市西城区德外大街10号</address></p> 
10 </body>
11 </html>

2-12

在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：

<code>var i=i+300;</code>

注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。

语法：

<code>代码语言</code>

注：如果是多行代码，可以使用<pre>标签。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>code标签介绍</title>
 6 </head>
 7 <body>
 8 <p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
 9 </body>
10 </html>

 

posted @ 2019-04-13 20:30  吃汤圆啦i  阅读(240)  评论(0)  编辑  收藏  举报