Html和css学习笔记（w3school+慕课网）（一）

2016-08-31 本文已影响328人恰皮

Html和css学习笔记（w3school+慕课网）（一）

tip：以下是个人防遗忘而在w3school和慕课网上重新复习基本的HTML和CSS知识所做的笔记,有不足之处望指正。

Html

◆什么是html（概念）

Html（hyper text markup language）是用来描述网页的一种语言，它不是一种编程语言，而是标记语言（标记语言：一套标记标签），用标签来描述网页。

• Html文档=网页

◆简单的html文档结构（举例）

<html>
<head>
<title>简单html文档结构</title>
</head>
<body>
页面内容
</body>
</html>

◆编辑html代码的工具

我们要用什么来写html代码呢？
可以用记事本、notepad、dreamweaver、sublime、webstorm、phpstorm等（列出来的是我个人用过的编辑器）
个人觉得用sublime或者webstorm、phpstorm比较舒服；

◆用编辑器写好代码之后，保存为html格式的文件，在你保存的地方看到你的html文件，双击将用你的默认浏览器打开。如果你的代码没有问题，页面中将显示你body标签中的内容。

◆Html元素

Html元素是指包含从开始标签到结束标签的所有代码。
元素内容是指开始标签到结束标签中间的内容。

• 空元素标签：eg：

tip：①所有标签都要关闭，虽然目前没有闭合也能正常显示，但是有闭合才是标准的、规范的写法。
②使用小写标签。万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

◆常见的html标签及使用方法

●<strong>注释：<!—注释内容--></strong>
可以使用注释对编写的代码进行解释，有助于之后代码的阅读。
使用方法：eg:

<html>
<head>
<title>try</title>
</head>
<body>
<!--这是注释-->
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

在浏览器中显示如图：（注释标签中的内容不会显示）

1.png

●<strong><!DOCTYPE>标签：定义文档类型。</strong>
tip:①这不是HTML标签。
②必须放在HTML文档的第一行，位于<html>标签之前。
③最好始终在HTML文档中添加<!DOCTYPE>声明，这样浏览器才能获知文档类型。

●<strong><head>标签</strong>
<head>标签中常见<title><link><meta><style><script>标签；
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
<link>标签常用引用外部CSS文件；
<meta>标签常用设置字符编码，eg：<meta charset=”utf-8”/>；

●<strong><body>标签</strong>
body 元素定义文档的主体。
body 元素包含文档的所有内容。

●<strong>
标签：插入一个简单的换行符。</strong>
注意：HTML中将自动忽略键盘手动输入的回车和多余的空格，要换行需使用
，要空格需使用（注意要加分号，相当于一个空格）。

●<strong>

水平线</strong>
eg：

<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr/>
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>

浏览器显示效果：

Paste_Image.png

可见，两段文字中间有一条水平分割线。

●<strong>< a >标签：定义锚（超链接）</strong>
• 用法：<a href=”xxx” title=”鼠标经过出现的文本” target=”_blank”>链接</a>
href是< a>标签的一个重要属性，指示链接的目标。
• HTML5中，如果没有设置href属性，则只是一个占位符。
通过href属性可以跳转到另一个指定的页面，也可以跳转到本页面中指定的位置（例如：页面中常见的“回到顶部”“回到底部”的功能）。
• title属性可以设置鼠标放在链接文字上时出现的文本；
• target属性可以设置点击链接时页面是以在新的窗口打开还是在当前窗口打开；target=”_blank”是在新的窗口打开，target=”_self”是在当前窗口打开。

eg:
< a href=”htttp://www.baidu.com”>百度</a>

< p id=”aim”>我是aim</p>
< a href=”aim”>跳转</a>
<!—点击“跳转”将跳转到“id”值为“aim”的地方去，如果上面的p标签是在页面顶部，则跳转到页面顶部，这样就实现了“回到顶部”功能-->

Paste_Image.png

可以通过CSS设置链接的外观。

●<strong>Html标题类的标签</strong>
< h1>< h2>< h3>< h4>< h5>< h6>
从h1到h6分别是第一级标题、第二级标题......第六级标题，各级标题大小不同。
tip：浏览器会自动地在标题的前后添加空行。
Eg：

<html>
<head>
<title>try</title>
</head>
<body>
<h1>This is h1.</h1>
<h2>This is h2.</h2>
<h3>This is h3.</h3>
<h4>This is h4.</h4>
<h5>This is h5.</h5>
<h6>This is h6.</h6>
</body>
< /html>

在浏览器中显示如图：

Paste_Image.png

●<strong>< p>标签</strong>
表示这是一个段落。
Eg：

<html>
<head>
<title>try</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

在浏览器中显示如图：

Paste_Image.png

可见，第二个< p>标签中的内容不会紧接第一个< p>标签的内容而是自动换行，因为< p>标签是块级元素。如果不做修改，块级元素会新起一行。

tip: HTML 折行：在不产生一个新段落的情况下进行换行（新行），使用 < br /> 标签；
eg:

<p>This is<br />a para<br />graph with line breaks</p>

●<strong>< span>标签</strong>
eg：< span>文本< /span>，行内元素，不可以设置宽度和高度，宽高即为内容实际占有的宽高。

●<strong>< blockquote>长文本引用标签：</strong>
eg：

<h2>心似桂花开</h2>
<p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p>
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
<p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。</p>

效果：（使用了< blockquote>的内容，两端自动缩进）

Paste_Image.png

●<strong>< b>标签、< strong>标签、< big>标签、< small>标签、< i>标签:</strong>

<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />

浏览器显示效果：

Paste_Image.png

●<strong>< code>标签：在页面中显示代码而不被浏览器执行。</strong>
eg：

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

![Paste_Image.png](https://img.haomeiwen.com/i2704790/037697f66b900938.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

●<strong>< ul>和< li>:无序列表</strong>
eg：

<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>

效果图：

![Paste_Image.png](https://img.haomeiwen.com/i2704790/11cfebca20b1c807.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

●<strong>< ol>和< li>：有序列表</strong>
< ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。
eg:

<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>

效果图：

![Paste_Image.png](https://img.haomeiwen.com/i2704790/c43fc3b5f6ebeb27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

●<strong>< div> 标签：可以看成一个容器，把内容包裹起来。</strong>
eg：

<div>
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div>
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>


●<strong>表格：</strong>
创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
eg：

![Paste_Image.png](https://img.haomeiwen.com/i2704790/38549162dd00782f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

在浏览器中显示的默认的样式为：

![Paste_Image.png](https://img.haomeiwen.com/i2704790/d9ca6e06ab42e7c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

tip：没有为表格添加CSS样式的表格是没有边框线的。

• <strong>< caption>标签：</strong>为表格添加标题，< table>标签中添加summary属性，为表格添加摘要，不会在页面中显示，目的是提高表格的可读性。
eg：
```html
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>  
  <tr>
    <th>产品名称 </th>
    <th>品牌 </th>
    <th>库存量（个） </th>
    <th>入库时间 </th>
  </tr>
  <tr>
    <td>耳机 </td>
    <td>联想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>金士顿 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>爱国者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>
</table>

效果图：

Paste_Image.png

●<strong>< button>标签</strong>
eg：
< button type="button">Click Me!</button>
type定义了这是一个按钮，click me是显示在按钮上的文字。

●<strong>< img>标签：插入图片</strong>
使用：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。

●<strong>表单</strong>
eg：

<form>
      <label for="username">用户名:</label><br/>
      <input type="text"  name="username" id="username" value="" /><br/>
      <label for="pass">密码:</label><br/>
      <input type="password"  name="pass" id="pass" value="" />    <br/>
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />

• < form></form>是表单标签；

• < input>标签type属性设置为“text”时为单行文本输入框，设置为“password”时为密码输入框；设置为“submit”时为提交按钮，设置为“reset”时为重置按钮，点击可清空输入框中已经输入的内容。value属性可设置文本框的默认值（初始值），name：为文本框命名，以备后台程序ASP 、PHP使用。

• label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。使用：< label for="控件id名称">，比如下图，用户在“用户名”三个字上点击鼠标，也可以将光标定位到文本输入框，因为“用户名”label的“for”值为下面文本框的ID值。

Paste_Image.png

eg：

<form action="save.php" method="post" >
    <label>个人简介：</label><br/>
    <textarea cols="30" rows="10">在这里输入内容...</textarea><br/>
    <input type="submit" value="确定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form>

• < textarea>为多行文本输入框，cols属性为设置列数，rows为设置行数，可用CSS的width和height代替。

Paste_Image.png

• 单选框、复选框

Paste_Image.png

效果图：

Paste_Image.png

1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
5、像单选框是一个小圆点很难点中时，可以使用label标签的作用，点击对应的label标签值也能选中对应的单选框，改善了用户体验。

tip:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

• 下拉菜单

eg：