您的位置：首页 > Web前端 > CSS

Web前端开发基础 第一天（Html和CSS）

2015-07-14 18:13 1141 查看
　　学习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文档中的回车。

 

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

html4.01版本
<hr>


xhtml1.0版本 
<hr />


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

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

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

<code>代码语言</code>


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

<pre>语言代码段</pre>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航