https://blog.csdn.net/u013047859/article/details/51485496
1.HTML：Hyper Text Markup Language(超文本标记语言.)

文本:就是一个文件，包含一部分的文本内容.

标记语言：标记语言都是由标签组成. 一般情况下，标签分为开始和结束标签.

[html] view plain copy
1.<font></font>

也有个别的标签：不需要结束. 例如<br/>
•HTML的特点： •不区分大小写. <Font></font>
•个别的标签可以没有结束.

•HTML的结构

[html] view plain copy
1.<html>

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

写在head的title中内容会显示到标题栏.写在body标签中的内容会显示到页面的内部.

2.meta 标记：
meta标记用于定义文件信息，是对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间。
用meta设置关键字：
<meta name = "keywords" content = "关键字">多个关键字用“,”分隔。
设置描述：<meta name = "description" content = "对关键字的扩展说明">
设置作者：<meta name = "author" content = "作者名">
设置字符集：<meta http-equiv = "content-type" content = "text/html;charset = gb2312">
编码格式：GB2312编码占用2个字节，UTF-8占用3个字节，如果网页文字较多，选择GB2312编码。
设置页面定时跳转：<meta http-equiv = "refresh" content = "2;URL = http://www.baidu.com"/>里面的2，代表2秒
上面的几个地方需要特别注意：
1.http-equiv之间不能加空格，否则没用，也就是不能写成“http - equiv”！
2.content-type也是一个整体，不能以空格分隔。

3.图片标记：
图片标记使用<img>标签就可以在页面中引入一张图片.

[html] view plain copy
1.<img src=”4.jpg”>

src:就代表的是图片的路径

Src要注意图片的路径问题.
图片与文件在同一层路径！
图片与文件不在同一层路径！
Width：代表图片的宽度
Height:代表图片的高度
Alt:图片的提示

[html] view plain copy
1.<img src="../img/4.jpg" width="100" height="150" border="10" alt="美女!!!">

4.语义标签

<span>没有语义的标签，作用为设置单独的样式</span>

<q>简短文本的引用</q>

<blockquote>缩进文本，引用长段落</blockquote>

<br />换行

<hr />水平分割线

空格

无序列表：<ul><li> 无序列表 </li></ul>

[html] view plain copy
1.<ul>

<li>信息</li>
<li>信息</li>
......
5.</ul>

有序列表：<ol><li> 有序列表 </li></ol>

[html] view plain copy
1.<ol>

<li>信息1</li>
<li>信息2</li>
......
5.</ol>

<div>栏目板块，作为容器</div>

<div id="版块名称">给网页独立板块增加ID标记</div>

html注释 5.表格 eg: [html] view plain copy 1. 2. 3. 4. 5.认识table表标签 6. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.

2012年到2013年库存记录
产品名称	品牌	库存量（个）	入库时间
耳机	联想	500	2013-1-2
U盘	金士顿	120	2013-8-10
U盘	爱国者	133	2013-3-25

40. 41. 1）…

：整个表格以标记开始、

标记结束。 2）…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。 3）…：表格的一行，所以有几对tr 表格就有几行。 4）…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。 5）…：表格的头部的一个单元格，表格表头。 6）表格中列的个数，取决于一行中数据单元格的个数。 7) 8) 6. 1)本浏览器原窗口打开链接：链接显示的文本在新建浏览器窗口中打开链接： click here! 2)对此影评有何感想，发送邮件给我 7.标签，为网页插入图片 [html] view plain copy 1.

alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； src:就代表的是图片的路径 [html] view plain copy 1.

8. 1）用户名:密码: 2）文本输入框、密码输入框语法： [html] view plain copy 1. 2. 3. *type：当type="text"时，输入框为文本输入框; 当type="password"时, 输入框为密码输入框。 *name：为文本框命名，以备后台程序ASP 、PHP使用。 *value：为文本输入框设置默认值。(一般起到提示作用) 3)文本域，支持多行文本输入 [html] view plain copy 1. 注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替 4)使用单选框、复选框，让用户选择 [html] view plain copy 1. *type: 当 type="radio" 时，控件为单选框当 type="checkbox" 时，控件为复选框 *value：提交数据到服务器的值（后台程序PHP使用） *name：为控件命名，以备后台程序 ASP、PHP 使用 *checked：当设置 checked="checked" 时，该选项被默认选中注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。 [html] view plain copy 1. 2. 3. 4. 5.单选框、复选框 6. 7. 8. 9. 性别: 10. 男 11. 12. 女 13. 14. 15. 16. 5)使用下拉列表框，节省空间 [html] view plain copy 1. 2. 3. 4. 5.下拉列表框 6. 7. 8. 9. 爱好: 10. 16. 17. 18. selected="selected"：设置selected="selected"属性，则该选项就被默认选中。 type：只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字 7）使用重置按钮，重置表单信息。 [html] view plain copy 1. 8）form表单中的label标签 [html] view plain copy 1. 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 eg: [html] view plain copy 1. 2. 男 3. 4.
5. 女 6. 7. 输入你的邮箱地址 8. 9. 9）placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的类型：text, search, url, telephone, email 以及 password。 10. 1) [html] view plain copy 1. p:选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。 span{ } 2)CSS注释语句：用 /*注释语句*/ 来标明 3)内联式css样式，直接写在现有的HTML标签中。并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。 [html] view plain copy 1.

这里文字是红色。

4)外部式css样式，写在单独的一个文件中 [html] view plain copy 1. 5）CSS样式优先级就是--就近原则（离被设置元素越近优先级别越高）。 11. 1）选择器。每一条css样式声明（定义）由两部分组成，形式如下： [html] view plain copy 1.选择器{ 2.样式; 3.} 2)标签选择器 [html] view plain copy 1.p{font-size:12px;line-height:1.6em;} 上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。 3)类选择器 [html] view plain copy 1..stress{color:red;}/*类前面要加入一个英文圆点*/ [html] view plain copy 1.胆小如鼠 4）ID选择器 [html] view plain copy 1.认识html标签 2. [html] view plain copy 1.绿色的字体 5）类和ID选择器的区别相同点：可以应用于任何元素不同点： ① ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 ②可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。如正确代码示范： [html] view plain copy 1..stress{ 2. color:red; 3.} 4..bigsize{ 5. font-size:25px; 6.} 7.

到了三年级下学期时，我们班上了一节公开课...

错误代码示范： [html] view plain copy 1.#stressid{ 2. color:red; 3.} 4.#bigsizeid{ 5. font-size:25px; 6.} 7.

到了三年级下学期时，我们班上了一节公开课...

6）子选择器 [html] view plain copy 1..food>li{border:1px solid red;} 添加边框样式（粗细为1px，颜色为红色的实线 [html] view plain copy 1..first>span{border:1px solid red;} 7）包含(后代)选择器 [html] view plain copy 1..food li{border:1px solid red;} 总结：>作用于元素的第一代后代，空格作用于元素的所有后代。 8）通用选择器 [html] view plain copy 1.* {color:red;font-size:20px;} 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色： 9）伪类选择符比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： [html] view plain copy 1.a:hover{color:red;font-size:20px;} 10)分组选择符 [html] view plain copy 1.h1,span{color:red;} 它相当于下面两行代码： [html] view plain copy 1.h1{color:red;} 2.span{color:red;} 12. 1）继承。有些CSS样式具有继承性，但border:1px solid red;不具备。 2）特殊性。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 [html] view plain copy 1.p{color:red;} /*权值为1*/ 2.p span{color:green;} /*权值为1+1=2*/ 3..warning{color:white;} /*权值为10*/ 4.p span.warning{color:purple;} /*权值为1+1+10=12*/ 5.#footer .note p{color:yellow;} /*权值为100+10+1=111*/ 3）层叠。层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。 [html] view plain copy 1.p{color:red;} 2.p{color:green;} 3.

三年级时，我还是一个胆小如鼠的小女孩。

理解为就近原则就好了。 4）重要性。!important [html] view plain copy 1.p{color:red!important;} 2.p{color:green;} 3.

三年级时，我还是一个胆小如鼠的小女孩。

这时 p 段落中的文本会显示的red红色。 13. 1）文字排版--字体。 [html] view plain copy 1.body{font-family:"Microsoft Yahei";} [html] view plain copy 1.body{font-family:"微软雅黑";} 注意：第一种方法比第二种方法兼容性更好一些。 2）文字排版--字号、颜色。 [html] view plain copy 1.body{font-size:12px;color:#666} 3)文字排版--粗体。 [html] view plain copy 1.p span{font-weight:bold;} 4)文字排版--斜体。 [html] view plain copy 1.p a{font-style:italic;} 2. 3.

三年级时，我还是一个胆小如鼠的小女孩。

5)文字排版--下划线。 [html] view plain copy 1.p a{text-decoration:underline;} 6)文字排版--删除线。 [html] view plain copy 1..oldPrice{text-decoration:line-through;} [html] view plain copy 1.

原价：300元现价：230 元

7)段落排版--缩进。 p{text-indent:2em;} 8)段落排版--行间距（行高）。 [html] view plain copy 1.p{line-height:2em;} 9)段落排版--中文字间距、字母间距。 [html] view plain copy 1.h1{letter-spacing:50px;} 10)段落排版--对齐。 [html] view plain copy 1.div{text-align:center;} /*可以为center、left、right*/ 11）缩写 [html] view plain copy 1.body{ 2. font-style:italic; 3. font-variant:small-caps; 4. font-weight:bold; 5. font-size:12px; 6. line-height:1.5em; 7. font-family:"宋体",sans-serif; 8.} [html] view plain copy 1.body{ 2. font:italic small-caps bold 12px/1.5em "宋体",sans-serif; 3.} 14.CSS盒模型。 1）元素分类。在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：

、

...

、
、
、
、

、

、
常用的内联元素有：、、
、、、、、、、、常用的内联块状元素有：、 2)内联块状元素 [html] view plain copy 1.display:inline-block; 3)盒模型--边框 [html] view plain copy 1.div{border:2px solid red;} 相当于： [html] view plain copy 1.div{ 2. border-width:2px; 3. border-style:solid; 4. border-color:red; 5.} 注意： ①、border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）。 ②、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。 ③、border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用象素（px）。 ④、单方向的边框。 [html] view plain copy 1.border-top:1px solid red; 2.border-bottom:1px solid red; 3.border-right:1px solid red; 4.border-left:1px solid red; 4）盒模型--宽度和高度 [html] view plain copy 1.div{ 2. width:200px; 3. padding:20px; 4. border:1px solid red; 5. margin:10px; 6.} 5）盒模型--填充。 [html] view plain copy 1.div{padding:20px 10px 15px 30px;} 相当于： [html] view plain copy 1.div{ 2. padding-top:20px; 3. padding-right:10px; 4. padding-bottom:15px; 5. padding-left:30px; 6.} 6）盒模型--边界。 [html] view plain copy 1.div{margin:20px 10px 15px 30px;} 相当于： [html] view plain copy 1.div{ 2. margin-top:20px; 3. margin-right:10px; 4. margin-bottom:15px; 5. margin-left:30px; 6.} 15.css布局模型。 1）流动模型（Flow） 2）浮动模型 (Float) [html] view plain copy 1.div{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. float:left; 6.} 7. 8. [html] view plain copy 1.div{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5.} 6.#div1{float:left;} 7.#div2{float:right;} 3）层模型（Layer）层模型有三种形式： 1、绝对定位(position: absolute) [html] view plain copy 1.div{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. position:absolute; 6. left:100px; 7. top:50px; 8.} 9. 2、相对定位(position: relative) [html] view plain copy 1.#div1{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. position:relative; 6. left:100px; 7. top:50px; 8.} 9. 10. 3、固定定位(position: fixed) [html] view plain copy 1.#div1{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. position:fixed; 6. left:100px; 7. top:50px; 8.} 9.文本文本文本文本文本文本文本文本文本文本文本文本。 4）Relative与Absolute组合使用。 1、参照定位的元素必须是相对定位元素的前辈元素： [html] view plain copy 1. 2. 相对参照元素进行定位 3. 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了） 2、参照定位的元素必须加入position:relative; [html] view plain copy 1.#box1{ 2. width:200px; 3. height:200px; 4. position:relative; 5.} 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 [html] view plain copy 1.#box2{ 2. position:absolute; 3. top:20px; 4. left:30px; 5.} 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。 16、单位和值。 1）颜色值： ①英文命令颜色。 [html] view plain copy 1.p{color:red;} ②这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 [html] view plain copy 1.p{color:rgb(133,45,200);} [html] view plain copy 1.p{color:rgb(20%,33%,25%);} ③十六进制颜色。这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。 [html] view plain copy 1.p{color:#00ffff;} 且可以简写为p{color:#0ff；} 2）长度值。 [html] view plain copy 1.p{font-size:12px;text-indent:2em;} [html] view plain copy 1.p{font-size:14px} 2.span{font-size:0.8em;} [html] view plain copy 1.p{font-size:12px;line-height:130%} 17、css样式设置小技巧 1）水平居中设置-行内元素。text-align:center 2)水平居中设置-定宽块状元素。 [css] view plain copy 1. 3）clear:both清除浮动。 18、标签定义多行的文本输入控件。 [html] view plain copy 1.<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。web 0 分享微博 QQ 微信收藏上一篇：所见不为真--图片格式文件检测p... 下一篇：html文档 qq5a2902d647d79 45篇文章，3W+人气，0粉丝 Ctrl+Enter 发布发布取消推荐专栏更多 Web网站安全评估分析及防御企业级网安运维共30章 | simeon2005 ￥51.00 337人订阅订阅 JavaScript全栈工程师养成记 20年软件开发心法共17章 | 边城__ ￥51.00 320人订阅订阅猜你喜欢 ajax请求方式 html文档 CSS的浮动及其在布局中的应用一站式手把手教你学习Sublime Text 3（插件安装、html/css速写、输入法不跟光标等）超级绚丽，20款前端动画特效，轰炸你的眼睛【基础】EM 还是 REM？这是一个问题！动效，一种属于前端程序员的浪漫，无与伦比的体验相对定位与绝对定位的分析测试扫一扫,领取大礼包 0 分享 qq5a2902d647d79

html基础

...

、
、
、
、

45篇文章，3W+人气，0粉丝

推荐专栏更多

企业级网安运维

共30章 | simeon2005

￥51.00 337人订阅

20年软件开发心法

共17章 | 边城__

￥51.00 320人订阅

猜你喜欢

DAY 6 面向對象

day6 socket的實現

ajax請求方式

html基礎

re模塊

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結