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

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

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

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

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

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

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

<head>

    <title>...</title> /*会出现在浏览器的标题栏*/

    <meta>            <!--代码的用途-->

    <link>

    <style>...</style>

    <script>...</script>

</head>

语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

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

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

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

网页上要凸显出来的页面内容一定要放在span标签中

<body>

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

</body>

<em>尼克•卡拉威</em>/*斜体*/

<strong>美国梦</strong>/*突出*/

1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<style>

    span{

        color:blue;

    }

</style>

</head>

<body>

    <p>

        <span>梦想家</span>的气质亦为那个奢靡年代的不二注解。

    </p>

</body>

</html>

<q>引用文本</q>

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

<blockquote>引用文本</blockquote>

長文本引用

xhtml1.0写法：

<br />

html4.01写法：

<br>

作用相当于word文档中的回车。

&nbsp;

在html代码中输入空格是不起作用的

html4.01版本 <hr>

xhtml1.0版本 <hr />

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

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

在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它

<code>代码语言</code>

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

<pre>语言代码段</pre>

Web前端开发基础 第一天（Html和CSS）的更多相关文章

  1. Web前端开发基础 第四课（CSS小技巧）

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  2. Web前端开发基础 第四课（CSS元素模型）

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  3. Web前端开发基础 第四课（CSS文字和段落排版）

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  4. Web前端开发基础 第四课（CSS小技巧1）

    垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...

  5. Web前端开发基础 第四课（CSS元素分类）

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  6. Web前端开发基础 第四课（CSS一些性质）

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  7. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  8. 前端基础入门第一阶段-Web前端开发基础环境配置

    Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...

  9. Web前端开发(基础学习+坑）

    0.基本说明 0.内容为课堂所学基本知识,加自己踩过的坑 1.web基本框架:html+css+JavaScript,html为网页骨架,css为网页美化,JavaScript负责页面动态交互,脚本等 ...

随机推荐

  1. PHP学习之字符串

    1.字符串变量用于存储并处理文本: 2.字符串变量用于包含有字符的值,在创建字符串后,就可以对它进行操作了,可以直接在函数中使用字符串,或把它存储在变量中: <?php $txt="H ...

  2. 模数转换(A/D)和数模转换(D/A) 图示

    (从书中截图) 在时间域和频率域中示意图: 1.A/D转换 2.D/A转换

  3. 关于本地存储构成数组以及jquery的inArray方法的使用

    for (var i=0, j = _self.sessionStorage.length; i < j; i++){ var key = _self.sessionStorage.key(i) ...

  4. 解决Myeclipse10 Building Workspace速度慢的问题

    解决方法如下: 选择项目,选择Project -> Properties -> Builders,取消JavaScript Validator,validation或者其它你认为没必要的选 ...

  5. EntityFramework Code First 手写代码实现生成数据库

    第一步:写实体类 第二步:写一个实体操作类,此类必须继承Dbcontext,此处的属性,将会在初始化时(第一次作,增,删,改的时候),生成相应的表. 第三步:运行程序,会自动建表 注意: 若实体类发生 ...

  6. Java List与数组之间的转换

    http://blog.csdn.net/kingzone_2008/article/details/8444678

  7. http://blog.csdn.net/u010246789/article/details/52539576

    http://blog.csdn.net/u010246789/article/details/52539576

  8. SSH建立连接的过程

    1.     服务器建立公钥档: 每一次启动 sshd 服务时,该服务会主动去找 /etc/ssh/ssh_host* 的档案,若刚刚安装完ssh软件时,由于没有这些公钥档案,通过/etc/init. ...

  9. Asp.net_完美设置页面最小宽度（兼容ie）

    div+css的布局相比table布局简化了前端开发的复杂性,也会带来一些问题,现在我们就说一下浮动定位在页面大小改变时布局错位的解决办法,给页面设置最小宽度: 只需更改全局css样式表 body { ...

  10. HDU 2846 (AC自动机+多文本匹配)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2846 题目大意:有多个文本,多个模式串.问每个模式串中,有多少个文本?(匹配可重复) 解题思路: 传统 ...