大家一起学习一起讨论一起进步

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

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

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

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

！+Tab

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" 
         content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
    </head>
    <body>
        <h1></h1>
    </body>
</html>

在<h1>和</h1>标签之间，输入Hello World 字符串。

在 <title>和</title>标签之间，是你的自定义名字或者说网页备注

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8">
        <title>Html和CSS的关系</title>
        <style type="text/css">
        h1{
        font-size:12px;
        color:#930;
        /*color:red;*/
        text-align:center;
        }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

<style> h1{} strong{} em{} span{} <!style>

span一般是用来自己定义样式，em和strong是语义标签，用来强调。

如果现在我们把一段话中“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了

eg:span{color: blue;}:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。<em>需要强调的文本</em> ；<strong>需要强调的文本</strong>

font-size文字大小 color 文字颜色 text-align:center; 文字居中显示；style type = "text/css"表示这是类型为css。

为什么不直接在<h1>标签里写，直接定义改标签内容的样式呢？

因为可以复用，代码更简洁

认识html标签

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>认识html标签</title>
    </head>


    <body>
        <h1>网页内容文章的标题</h1>
        <p>网页中文章的段落</p>
        <p><!--<p></p>-->是段落标签。</p>
        <img src="1.jpg" >
    </body>


</html>

图片，由img标签来完成的，它在网页上的代码写成<img src="1.jpg">

标签的语法

1. 标签由英文尖括号<和>括起来，如<html>就是一个标签。

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

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

eg：<div><p>balabalabalabala</p></div>这就是<p>标签嵌套在<div>里

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

认识html文件基本结构

一个HTML文件是有自己固定的结构的。

<html>
    <head>...</head>
    <body>...</body>
</html>

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

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

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

html的代码注释格式

语义化

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

语义化的优点:

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

在后面的章节会带领大家学习了解html中每个标签的语义（用途）。

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

meta是一个标签经常用在html文档的head部分就是你经常会看到的也是初学时会学到的<meta name="">引号中可以填入 description keywords 等等

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

注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>

HTML5 规定了一种通过 "audio" 元素来包含音频的标准方法。直接可以这样写：

其中src后的url就是你的歌曲位置和名字，至于controls，如果出现该属性，则向用户显示控件，比如播放按钮，也就是用户自己点击播放，暂停等！如果想要网页一载入，自己就自动播放，可以这样写<audio src="white.mp3" autoplay="autoplay"></audio>,这样就自动播放了！

<q>标签，短文本引用

语法：

<q>引用文本</q>

注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

<blockquote>标签，长文本引用

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

<q>标签不是也是对文本的引用吗？不要忘记<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。

语法:

<blockquote>引用文本</blockquote>;浏览器对<blockquote>标签的解析是缩进样式。如下图所示：

使用<br>标签分行显示文本

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

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

为你的网页中添加一些空格

在上一节的例子，我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入 是一个空格五个空格就要五个

值得思考的问题

不同的标签有什么特点？它们的使用场景是什么？
div 和 span 有什么不同，什么时候使用 div、什么时候使用 span？

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。div是一个块级元素，相当于一个盒子，用来装东西。

行元素与块元素有什么不同？行元素有那些属性限制？
css 样式是怎么比较优先级的？
使用 img 与 background-image 显示图片有什么不同？

学习HTML和CSS基础详细教程(1)