web前端-html学习笔记

学习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:[email protected]?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;
}  /*上面代码是中文网站最常见的设置。只是有字号、行间距、中文字体、英文字体设置。注意/,;符号*/

时间： 2024-09-30 08:29:44

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

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

最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+1+-+Recipe 1.text和font系的属性傻傻分不清楚 在写的过程中,遇到这样的问题:改变字体颜色,改变字体样式,给文本加下划线等等这些操作对应的属性分不清楚,究其原因,我认为是自己对css文本和css字体这两种的属性分不清楚,于是就对常

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

Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: 1.display属性的block,inline-block,inline值的区分 其实真正需要区分的是inline-block和inline.都是在同一行内,怎么区分他们呢?首先要明白块元素和行内元素很重要的一点区别:块元素的高度和宽度我们都是可以控制的,而行内元素是不可以的.block对应的就

Web前端开发 学习笔记

HTML开始: HTML:超文本标记语言;用来做页面;通过浏览器来查看效果: 结构:<html >--页面<head>--网页头部<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>云商城</title></head> <body>--身体 今天再次来到东华,大家非常高兴!</b

Web前端培训学习心得

web前端工程师技术日趋成熟,越来越多的行业巨头正不断向web前端工程师示好,在未来几年,web前端将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注web前端开发行业,今天小编跟大家共同来分享一下自己的web前端工程师学习心得. 今天只是想要跟大家分享一下学习心得,在选择web前端工程师培训之前,我逃避过.犹豫过.迷茫过,站在人生的十字路口,不知道该何去何从,但从加入培训班的那刻起,就把心中的疑问打消了,看到大家倾吐自己的心声,我开始认识到每个人都渴望成功,更希望能够战胜

Web前端入门学习（2）——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的

Web前端入门学习（5）——浮动原理及清除浮动

浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换.加上display属性,可以指定元素的类型,如display:block.display:inline,以及display:inline-block.当然用得最多的是最后一个display:inline-block.结合例子来看: 例

web前端的学习误区

web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便. 入门快.见效快让我们在不知不觉中已经深深爱上了网页制作.此时,很多人会陷入一个误区,那就是既然借助这么帅的IDE,通过鼠标点击菜单就可以快速方便地制作网页. 那么我们为什么还要去学习html.CSS.JavaScrpt.jQuery等这些苦逼的代码呢?这不是舍简求繁吗? 但

关于web前端的学习一

为什么要写这篇文章呢,首先先声明下,我自己也是菜鸟,写博客也是为了记录自己的学习过程,写这篇关于"关于web前端的学习",主要是给自己定制一个学习路线,向着目标前进咯!ps:我也是看着别人的文章,然后写的,自己看了别人的文章后再记录下来,也会更加印象深刻了. 首先先来说下什么是web前端,以下是从百度知道看到的答案: 其实web前端是一个新词汇,刚开始只有美工和程序,后来随着web的发展,对用户交互的需求越来越高,就衍生出了ui(用户交互页面)这出了视觉效果还要有交互体验,就需要js去