在慕课上学习的，HTML和CSS基础学习笔记1

// 在此之前，看了一遍慕课上的HTML和CSS基础教程，还有就是上过大约一周的前端课。但是学习时间不集中，不够清晰。

// 现在打算专心学习，重新开始学习：复习一遍慕课上的基础教程，再看一遍Head First HTML with CSS & XHTML，由于英文水平有限，看的是电子中文版。不多说，开始吧。

1、html介绍

1-1 Hello World

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

1-2 Html和CSS的关系

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

<!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;text-align:center;}</style></head><body><h1>Hello World!</h1></body>
</html>

1-3 认识html标签

网页中每一个内容在浏览器中的显示，都要存放到各种标签中。

以代码为例：

“勇气”是网页内容文章的标题，<h1></h1>就是标题标签，它在网页上的代码写成<h1>勇气</h1>。

“三年级时...我也没勇气参加。” 是网页中文章的段落，<p></p>是段落标签。它在网页上的代码写成 <p>三年级时...我也没勇气参加。</p>

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

<!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><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body>
</html>

1-4 标签的语法

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

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

3.标签是可以嵌套的。

4.一般用小写。

1-5 html文件的基本结构

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

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

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

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

1-6 head标签

描述了文档的各种属性和信息，包括文档的标题等。

<title>标签的内容会在浏览器中的标题栏上显示出来

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

1-7 代码注释

标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。

2、标签1

2-1 语义化

明白每个标签的用途

优点：

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

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

2-3 <p> 标签

<p>段落文本</p>

每段一个标签。

<p>标签的默认样式，段前段后都会有空白，可以用css样式来删除或改变它。

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> p标签</title></head><body><p>我的第一个段落。</p><p>我的第二个段落。</p></body>
</html>

2-4 标题标签 h1-h6
<hx>标题文本</hx> (x为1-6) 使用<hx>标签来制作文章的标题。

因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站,如：<h1>腾讯网</h1>

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

2-5 强调语气

<em>或<strong>标签：

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

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

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

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

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

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>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p><p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

2-7 <q>标签

短文本引用，浏览器会对q标签自动添加双引号。

语义在于引用了别人的话。

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

2-8 <blockquote>标签

长文本引用。

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

2-9 <br/>标签

xhtml1.0写法：<br />

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

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

2-10 在网页中添加空格

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>空格讲解</title>
</head>
<body>
<h1>感悟梦想</h1>
来源：作文网  作者：为梦想而飞
</body>
</html>

2-11 <hr>---水平横线

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

2-12 <address>标签---地址信息

<address>联系地址信息</address> 默认样式为斜体

<address>文档编写：lilian 北京市西城区德外大街10号</address>

2-13 <code>--加入一行代码

<body>
<p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>

2-14 <pre>--加入大段代码

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符

<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

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

在慕课上学习的，HTML和CSS基础学习笔记1相关推荐

全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
CSS基础学习--6 CSS Text（文本）
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...
CSS基础班笔记(二)
web前端剑法之css ??web前端剑法之css 地址 ??CSS基础班笔记(一) https://blog.csdn.net/Augenstern_QXL/article/details/1155 ...
UI设计学习流程写给零基础学习的你
UI设计是互联网时代的设计变革,有界面与人之间交互的时候就存在,但却没有现在这样对UI设计专业能力的重视.很多人现在学习UI设计,有的是看重UI设计月能薪破万的高薪资,有的人看重它未来大好的职业发展前 ...
H5前端学习之一HTML和CSS基础认识
前言我是一个转行的前端小白,大专非计算机专业毕业,所以对计算机很不擅长,但是对信息技术的好奇,让我对技术党尤为崇拜,既然好奇代码和崇拜技术,不如成为它!所以我来学习了当前教主流的--前端.初学前端, ...

在慕课上学习的，HTML和CSS基础学习笔记1

在慕课上学习的，HTML和CSS基础学习笔记1相关推荐

最新文章

热门文章