学习html最重要的是坚持、细心、多动手。慕课网《HTML+CSS基础课程》的笔记。

1.<h1>网站标题</h1> 如：<h1>腾讯网</h1>

2.<em><strong><span><p>标签的用法:
    <span><em>狗狗</em></span>
    <strong>狗狗</strong><span>
    <p>狗狗</p>
    <p>狗狗</p>

总结：<em>斜体强调<strong>加粗强调<span>行内元素，不换行<p>段落标签，换行。

3.用<span>标签定义一段中的关键词为特殊样式。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
  color:blue;
  font-size: 19px;
}
</style>
</head>
<body>
    <p>为了追寻他的<span >美国梦</span>，他搬入纽约附近一海湾居住。</p>

效果：

4.<q>引用别人简短文本一两句话，浏览器自动给一段话加双引号。

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

效果：

6.<br/>回车换行（空标签）

7.&nbsp;空格（在浏览器中输入多个空格，只显示一个，多个空格需要用&nbsp;
一段前加两个空格&nbsp;&nbsp;

8.<hr/>水平分隔线（空标签）

9.<address>地址，浏览器自动换行并斜体。

<h2>慕课网</h2>
<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!<address>公司地址：北京市西城区德外大街10号</address></p>

效果：

10.<code>插入一行代码

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

效果：

11.<pre>插入一大段代码或预格式文本。（代码中的换行和空格都会保留下来。）

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

效果：

12.ul-li添加无序新闻列表

<ul><li>我的第1个列表信息</li>
    <li>我的第2个列表信息</li>
    <li>我的第3个列表信息</li>
</ul>

效果：

13.ol-li添加有序新闻列表

14.<div>独立栏目板块

<div  id="版块唯一名称">…</div>

15.表格标签

<table>表格（默认无边框）<tbody>表格全下载完再显示<tr>一行<td>一个单元格<th>表头（默认加粗居中）

16.用CSS给表格添加边框

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为表格添加边框</title>
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
</head>

解释：为单元格添加1像素的黑色边框。

17.为表格添加标题和摘要

<summary>摘要，增加表格可读性，用户看不到，为了SEO。<caption>表格标题。

<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
  <caption>2012年到2013年库存记录</caption>

18.<a>超链接

<a>超链接，href链接地址，title鼠标滑过显示的文本，为了SEO。

<a  href="http://www.百度.com"  title="点击进入百度网" target="_blank>百度欢迎你</a></p>

19.<mailto>发送邮件

例：<a href="mailto:xx@qq.com?subject=主题名称&body=邮件内容">对此影评有何感想，发送邮件给我</a>

20.<img>为网页插入图片

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

21.网站与用户交互，如获取注册时的用户名、密码等，用<form>标签。

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

解释：type="text"文本输入框，type="password"密码输入框，name文本框名称，value默认数值。

type="submit"确定提交，type="reset"重置按钮。
         <input/>没有开始标签

22.文本域，多行文本输入。

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

解释：<textarea>多行文本输入，cols列，rows行。

23.单选框和复选框

<form action="save.php" method="post" >

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

</form>

解释：type="radio"单选框，type="checkbox"复选框。name选矿名称，value默认数值，checked="checked"默认选中。

同一组单选按钮的name名称必须一致 。

24.下拉列表

<form action="save.php" method="post" >

<select>

<option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>

</select>

</form>

25.<label>标签作用

<form>
   <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="sex" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

效果：

也就算说不一定点点，按女字，也可以选中它。

26.CSS定义网页文字的显示样式，如大小、颜色、加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{
   font-size:20px;/*设置文字字号*/
   color:red;/*设置文字颜色*/
   font-weight:bold;/*设置字体加粗*/
}
</style>

</head>

<p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>

27.CSS优势——一段文本中的几个词单独设置成某种格式，只需要一条CSS语句。词组用<span>标签标注。

为网页定义编码格式:

<head>

<style type="text/css">

span{
   color:blue;

}

</head>

<p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>

效果：

28.内联CSS

<span style="color:blue";font-size="12px";>超酷的互联网</span>

29.嵌入CSS（26-27就是）

30.外部CSS，用<link>标签调用，CSS样式保存在外部.css文件中。

<head>

<link href="style.css" rel="stylesheet" type="text/css" /> /*  rel="stylesheet" type="text/css"  这段代码不能改动，为固定格式*/

</head>

31.CSS优先级：内联式 > 嵌入式 > 外部式
                      嵌入式在外部式后面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>慕课网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！内联式 > 嵌入式 > 外部式</p>
</body>

32.可以定义CSS的标签：p body span img h

33.定义CSS的类选择器

.类名{css样式代码;}   /*定义类,类名可以随便定义，只要是英文就可以*/

<span class="类名">胆小如鼠</span>  /*调用类*/

34.定义CSS的ID选择器

#ID名称{css样式代码;}   /*定义ID选贼,ID名可以随便定义，只要是英文就可以*/

<span id="ID名称">胆小如鼠</span>    /*调用ID选择器*/

35.CSS类和ID选择器的区别：

1.类可以用多次，ID选择器在html中只能用一次。

2.一个词可以调用多个类，ID选择器不可以。

<style type="text/css">
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

<span class="stress bigsize">三年级</span>

36.CSS子选择器 >作用于元素的第一代后代

<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}

</style>

<p class="first"><span>三年级时，</span>

37.CSS包含选择器  空格作用于元素的所有后代。

<style type="text/css">
.first span{color:red;}

}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>

38.通用选择器*作用于html所有标签

<style type="text/css">
* {color:red;}
</style>

39.伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如下面我们给html中一个标签元素的鼠标滑过的状态来设置字体。伪类选择符还有其他的，但兼容性不好，下面a:hover最常用。

<style type="text/css">
a:hover{
    color:red;
}

40.分组选择器，为html多个标签设置同一个样式。

<style type="text/css">
h1,span{color:red;}
</style>

只把第一段设置成绿色：

<style type="text/css">
h1,span{color:green;}
.first,#second span{color:green;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

CSS选择器权值

标签的权值为1，

类选择符的权值为10，

ID选择符的权值最高为100

例： p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

41.CSS特性：
（1）继承性
（2）特殊性。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

（3）层叠。统一词组有多个相同权值的CSS样式，就近原则。
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
（4）重要性。在html中给某些样式设置具有最高权值。

p{color:red!important;}

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
42.文字排版——字体，浏览器兼容性最好微软雅黑

body{font-family:"Microsoft Yahei";}

43.文字排版——字号、颜色

body{font-size:12px;color:#666;}

44.文字排版——粗体

<meta charset="utf-8">

45.文字排版——斜体

p{
    font-style:italic;    
}

46.文字排版——下划线

a {
    text-decoration:underline;    
}

47.文字排版——删除线（电商网上划去原价）

<style type="text/css">
.oldPrice{text-decoration:line-through;}

</style>

<span class="oldPrice">300</span>

48.段落排版——缩进

<style type="text/css">
p{text-indent:2em;}

</style>

注意：2em的意思就是文字的2倍大小。

49.段落排版——行间距（行高）

<style type="text/css">
p{line-height:2em;}
</style>

50.段落排版——字母间距、单词间距

letter-spacing:50px; /*字母与字母之间*/

word-spacing:10px;  /*单词与单词之间*/

51.段落排版——对齐  为块状元素图片、文字对齐。

div{text-align:center;} /*居中对齐*/

div{text-align:left;} /*左对齐*/

div{text-align:right;} /*右对齐*/

52.CSS元素分类

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

块状元素会自动换行，可以设置行高，margin，高等，

内联元素，不会换行，设置行高和高都不管用，但是能设置宽度，（上下不管用，左右管用）

dispaly:block;  设为块状元素,

display:inline;    默认。此元素会被显示为内联元素

53.盒模型——边框border

p{border:2px solid #111;} /*边框粗细、样式、颜色*/
边框粗细：多少px

边框样式：dashed（虚线）、dotted（点线）、solid（实线）

边框颜色：#十六进制颜色码

为上下左右边框单独设置样式：

<style type="text/css">
li{
    border-top:1px solid red; /*上边框*/
    border-right:1px solid red;  /*右边框*/
    border-left:1px solid red; /*左边框*/
    border-bottom:1px solid red;  /*下边框*/
}
</style>

54.盒模型——宽度width和高度height 是内容的宽度和高度，而不是盒子的宽度和高度。

<style type="text/css">
li{
    border-bottom:1px dotted #ccc;
   width:200px;height:20px;
}
</style>

效果：
55.盒模型——填充padding 是内容和边框的距离

div{padding:20px 10px 15px 30px;}  /*上、右、下、左顺时针方向*/

效果：
56.盒模型——边界margin盒与盒直接距离。

div{margin:20px 10px 15px 30px;}  /*上、右、下、左顺时针方向*/

div{margin:20px;}  /*上、右、下、左都是20px*/

div{margin:20px 10px;}  /*上下20px，左右10px。*/

速记：
57.CSS元素有三种布局模型：
（1）流动模型（Flow）块状元素换行，内联元素不换行。
（2）浮动模型 (Float)

float:left; /*左对齐*/

float:right; /*右对齐*/

#div1{float:left;} /*一左一右对齐*/
#div2{float:right;}

（3）层模型（Layer）
58.层模型有三种形式：
（1）绝对定位(position: absolute)

这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

div{
    width:200px;
    height:200px;
   border:2px red solid;
   position:absolute;
    right:100px;
    top:20px;  
}

效果：

（2）相对定位(position: relative)
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

#div1{
    width:200px;
    height:200px;
border:2px red solid;
position:relative;
    left:100px;
    top:50px;
}

效果：

偏移前的位置保留不动，这个比较少见，知道是什么就行了。

（3）固定定位(position: fixed)

坐标是浏览器，不随滚轮动，位置固定不变。弹窗广告效果。

#div1{
    width:200px;
    height:200px;
border:2px red solid;
    position:fixed;
    bottom:0;
    right:0;   
}

效果演示
（4）参照定位元素（position:absolute; ）子元素以父元素为参考定位
59.颜色值缩写 相邻两位数字一样时，可以缩写一个。

p{color:#000000;}缩写为p{color:#000}
p{color:#336699;}缩写为p{color:#369}

60.字体缩写

body{
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;

}

缩写为

body{
    font:12px/1.5em  "宋体",sans-serif;
}  /*上面代码是中文网站最常见的设置。只是有字号、行间距、中文字体、英文字体设置。注意/,;符号*/

web前端-html学习笔记的更多相关文章

  1. Web前端开发学习笔记（一）

    最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...

  2. Web前端开发学习笔记（二）

    Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...

  3. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  4. WEB前端开发学习：源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  5. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  6. Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  7. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  8. web前端安全---读书笔记

    web前端安全---读书笔记 粗略的看完了Web前端黑客技术揭秘前两章了,由于自身的前端功力不深,当然也是初涉前端的安全问题,所以实话还是有些问题看不太明白的.在豆瓣看到的这本书,名字真心有点很肥主流 ...

  9. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

随机推荐

  1. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  2. VMware虚拟机中调整Linux分区大小手记（转发）

      前段时间用VMware5.5安装了CentOS5.3,安装的时候分配了5Gb的虚拟硬盘空间给Linux系统,系统安装选择很多组件和软件,后面使用时又安装也一些软件,结果导致虚拟硬盘空间不足.查看分 ...

  3. 使用 Struts2 校验器校验用户注册信息

    基于验证框架的输入校验 一.创建一个struts2项目testValidators.Struts2 初体验:http://www.cnblogs.com/likailan/p/3280820.html ...

  4. ora-00600笔记

    一. ORA-600 概述 Errorsof the form ORA-600 are called internal errors. This section clarifies themisund ...

  5. Struts学习之ValueStack学习

    1. 数据传输背后机制:ValueStack(值栈) 在这一切的背后,是因为有了ValueStack(值栈)! ValueStack基础:OGNL OGNL是Struts2中使用的一种表达式语言,它可 ...

  6. DataTable中执行DataTable.Select("条件"),

    我们在使用Sql ******这些数据库时,可以轻松的通过Sum.Aver.Count等统计出相关结果,那么,在已经把数据检索出来的DataSet(DataTable)中呢?特别是通过Web Serv ...

  7. 使用html，JavaScript，ajax写一个小型实例

    //1.创建受捐单位数组 var arrOrgData = [     { "Id": 1, "OrgName": "红十字会" },    ...

  8. Scala基础入门－3

    学习Scala——映射和元组 映射和和元组,也就是Maps和Tuples.Map这东西应该都挺明白的,就是键值对的集合.而元组,tuple,这东西并不是每个语言都有(Python中是有的,不过当时学的 ...

  9. Which PHP mode? Apache vs CGI vs FastCGI

    Which PHP mode? Apache vs CGI vs FastCGI There are multiple ways to execute PHP scripts on a web ser ...

  10. mysql性能优化学习笔记（6）数据库配置优化&硬件优化

    一.操作系统配置优化:          1. 网络方面,修改/etc/sysctl.conf文件,增加tcp支持的队列数,减少断开连接时,资源的回收.          2. 打开文件数的限制.修改 ...