盒子的阴影
box-shadow:0px 0px 0px #000000；分别是宽高阴影密度颜色
box-sizing：border-box；padding包括里面
content-box；padding不包括里面
块级元素和内链元素的转换
display：block；转换为块级元素盒子元素
inline转换为内链元素 block-line都有
html介绍
超文本标记语言，即html（hypertext markup language），是用于描述网页文档的一种标记语言。html之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种url指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是html获得广泛应用的最重要的原因之一。
xhtml介绍
xhtml是the extensible hypertext markup language（可扩展超文本标记语言）的缩写。xhtml是一个基于xml的标记语言，看起来与html有些相像，只有一些小的但重要的区别，xhtml就是一个扮演着类似html的角色的xml，所以，本质上说，xhtml是一个过渡技术，结合了部分xml的强大功能及大多数html的简单特性。
w3c简介
万维网联盟是国际著名的标准化组织。
1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。目前，万维网联盟拥有来自全世界40个国家的400多个会员组织，已在全世界16个地区设立了办事处。2006年4月28日，万维网联盟在中国内地设立首个办事处。（深圳北京航空航天大学）
w3c中国
中国企业w3c联盟成员汇总
2011年9月15日消息，百度（纳斯达克证券代码：BIDU）已经加入万维网联盟，并成为该联盟中的第一家中国公司。
百度在加入万维网联盟之后，将能够与全球500加IT和互联网企业联手，共同研究和制定互联网开放平台及无线互联网技术等相关的国际互联网网络标准。腾讯和360也后续加入
编辑html
html其实是文本，它需要浏览器的解析，html的编辑方式大体可以分为两种： 手工编写方式：使用记事本等编辑器，将文件存成.htm或.html格式即可。
使用可视化编辑器：如Dreamweaver、frontpage等。
提示：关于.html和.htm，其实两者之间没有本质意义的区别，htm只是为了满足DOS仅能识别8+3的文件名的格式而已，在DOS下文件名的命名规则只能是文件名8位长度，文件后缀3位长度这样的规则。
xhtml标签
xhtml语法非常简单，组成xhtml的元素只有xhtml标签与xhtml属性。
在xhtml中标记被分成两种：
1、双标签
<标签名 属性=“属性值” 属性=“属性值”>内容</标签名>
2、单标签
<标签名 属性=“属性值” 属性=“属性值”/>
xhtml语法规范
1、在xhtml中标记名称必须小写
2、在xhtml中属性名称必须小写
3、在xhtml中标签必须严格嵌套
4、在xhtml中标签必须封闭
5、在xhtml中，即使是空元素的标记也必须封闭
6、在xhtml中属性值用双引号括起来
7、在xhtml中属性值必须使用完整形式
8、在xhtml中，应该区分“内容标记”与“结构标记”
xhtml基本结构
是以<html>标签开始以及</html>标签结束的，整个文档被分成头部（head部分）和体部（body部分）两部分。
<head></head>标签
<head>标签用于定义文档的头部，他是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在head部分：<base>,<link>,<meta>,<script>,<style>,以及<title>.
<title>定义文档的标题，它是head部分中唯一必须元素。
<meta />
<meta />元素可提供有关页面的元信息(meta-infotmation),比如针对搜索引擎和更新频度的描述和关键词。
<meta />标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
<meta http-equiv="content-type" content="text/html; charset=gb2312(或者utf-8、big5) />标准格式说明这是一个什么html,用的说明标准，必写
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" />
意思两秒之后刷新到百度主页
<meta name="author" content="作者“ />
<meta />中title、keywords、description的限制
<meta name="keywords" content="关键词1，关键词2，……” />
<meta name="description" content="这里写网站的描述" />
title内容设置的时候一般不超多80个字符，符号也算
keywords关键字设置的时候内容一般不要超过100个字符，关键字与关键字之间的字符一般用英文逗号隔开！！！关键词一般设置七个左右，不会被恶意屏蔽
description描述设置的时候内容一般不要超过200个字符，搜索引擎一般能显示40个字
<body></body>
body元素定义文档的主体
body元素包含文档的所有的内容（比如文本、超链接、图像、表格和列表等等。
常用的文本标签 标签 用途
<h1></h1>~<h6></h6> 标题用
<p></p> 段落用
<br /> 换行用
<pre></pre> 预先格式化标签
<i></i>、<b></b>、<u></u> 用于对文本应用各种格式，
<strong></strong> 如粗体，斜体，下划线
<em></em>、<sub></sub> 下标，上标等
<sup></sup>
<font></font> 字体标签
<ul></ul>、<ol></ol> 列表用
<hr /> 水平线标签
<h1-6></h1-6>标题标签
<h1>-<h6>标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题。浏览器在解析标签的时候会自动地在标题的前后添加空行。一个网页只有一个标题。
标题标签显示特性：
1、标签中的文字默认加粗
2、h1-h6文字大小逐渐变小
3、标题标签默认独占一行
4、标题标签默认上线文有间距
<p></p>段落标签 定义段落
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
标签默认显示特性：
1、一个<p></p>标签默认独占一行。
2、每个<p></p>标签和上下文直接都有一定间距。
属性 值 描述
left(居左）
align center（居中） 规定段落中文本的排列
right（居右）
<pre></pre>预先格式化标签
pre元素可定义预先格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>标签的一个常见应用就是用来表示计算机的源代码。
字符格式化
<i></i>用来标记文字斜体（过时）
<b></b>用来标记文字加粗 （过时）
<u></u>用来标记文字下划线
<strong></strong>用来标记文字加粗的标记
<em></em>用来标记文字斜体的标记
<sub></sub>用来标记文字下标显示
<sup></sup>用来标记文字上标显示
<font></font>文字字体标签用来控制文字显示的样式。
比如说字体、颜色、大小等。font标签中有一些属性需要我们去了解。color属性是用来控制文字颜色的。size是用来控制文字大小的。face属性用来控制字体
<font color="颜色” size="字体大小" face="宋体，黑体，楷体" >内容</font>
属性 值 描述
color rgb（255,255,255） 规定文本的颜色
#FFFFFF
red，bule，yellow
face 宋体，黑体，楷体 规定文本的字体
size 1-7，默认是3 规定文本的大小
<ul></ul>无序列表 <ol></ol>有序列表
列表项用<li></li>标签
<ul type="disc"> </ul>
无序列表属性 描述 有序列表属性 描述
disc 默认值，实心圆 1 默认值列表项文阿拉伯数字
circle 空心圆 a 小写英文
square 实心方块 A 大写英文
i 小写罗马数字
I 大写罗马数字
<hr />水平线标签 在html中创建一条水平线
水平分隔可以在视觉上将稳定分隔成各个部分
属性名 属性值 作用
align center，left，right 控制水平线的对其方式
noshade noshade 控制hr预算显示颜色为纯色（把标签的颜色填充起来）
size 多少px 控制水平线的高度（厚度）
width px 百分比% 控制水平线的长度
特殊字符
>； 大于号（>)
< 小于号（<)
"； 引号（”）
®； 注册商标（带圈的R）
© 版权符（带圈的C）
&； &符号
 ； 空格
<a></a>超链接
在xhtml中使用超级链接与网络上的另一个文档相连。几乎可以所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。用来表示链接的标签为<a></a>
<a href="http://www.baidu.com">百度</a>
属性 值 描述
href url 链接的目标url
target _blank另一页 新的一页
_self 在本页 默认 在何处打开目标url
_parent在父框架集中打开
_top在整个窗口中打开
framename 在指定的框架中打开
href 属性 相对路径、绝对路径
相对路径是相对于当前文档的位置找到目标文档的路径
./是当前路径 可以省略
../ 是上级路径
反之则是绝对路径
a标签除了创建普通的链接以外还能穿件邮件链接，当点击邮件链接是浏览器会打开客户端系统中默认的邮件客户端进行邮件的操作。穿件邮件链接的方式只要在href属性中写入“mailto：邮件地址”就可以了
<a href="mailto:344871874@qq.com">344871874@qq.com</a>
<img />图片标签
在xhtml中如果要插入图片，我们就要用到img标签。img标签是个单标签。img标签中有几个常用的属性让我们来看下。
<img src="1.jpg" width="100" height="100" />
特殊字符 效果
src 属性设置的是要插入图片的url地址
alt alt属性用来为图像定义一串预备可替换的文本
无法加载图片会显示文字
width 指定图像的宽度
height 指定图像的高度
align="absmiddle"; 图片上下居中
xhtml中的框架的处理
使用xhtml中的款姐结构就可以吧一个浏览器窗口分割成几个小窗口，每个串口可以显示不同的网页，每个框架里的网页相互独立。不仅可以分成方便地在浏览器中同时浏览不同的网页，还可以非常方便地完成导航的工作。
如果所有的框架标签都要放在xhtml的文档中，这个xhtml的文档的体部也就是<body></body>标签将被框架集标签<frameset></frameset>标签代替，然后通过<frame />标签定义每一个子窗体和子窗体的页面。子窗体的排列顺序为从左到右，从上到下的次序规则。
示例 <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>示例</title>
</head>
<frameset row="80,*">
<frame src="top.html" name="topframe" />
<frame src="main.html" name="mainframe" />
</frameset>
</html>
属性 说明
cols 用像素或者百分比来分割左右窗口，*表示剩余部分
rows 用像素或者百分比来分割上下窗口，*表示剩余部分
frameborder 指定是否显示边框。0表示不显示，1表示显示
border 指定款姐边框的粗细
noresize frame里面的标签 =“noresize”边框不可移动
框架里的<a herf="网址” target=“top（指定网页在上面框里打开）left right bottom” />
兼容性里面
<noframes>
<body>
<h1>你的浏览器不支持框架</h1>
</body>
</noframes>
显示里面内容则是浏览器不支持框架
html中的表单
表单是一个保护表单元素的区域。表单元素是允许用户在表单中添加如：文本域、下拉列表、单选框、复选框等中输入信息的元素。
表单用<form></form>标签
<form>标签用于为用户输入创建html表单。
属性 值 说明
action url 规定当提交表单是，向何处发送表单数据
method get/post 规定如何发送表单数据
name name 规定表单的名称
enctype mime_type 规定表单数据在发送到服务器之前应该如何编码
默认可以不写，特殊情况需要写，比如需要上传头像什么的
<form>标签有三个是我们经常用到的
action属性 该属性是指定表单提交的地址
method属性 该属性是指定表单提交的方式，它的方式有两种post和get
enctype属性 规定在发送到服务器之前应该如何对表单数据进行编码。默认的，变动数据会编码为“application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为”+“号，特殊符号转换为 ASCII HEX值）。当为“multipart/form-data"属性时一般是用来做上传是传说文件用的。
表单中的元素
文本框
<input type="text" name="name" value="默认值” maxlength="12" />
value是框里面默认的内容 type和name是必写的 maxlegth最大长度 写用户名
密码框
<input type="password" name="name" />
复选框
<input type="checkbox" name="name" value="值" checked="checked" />
注意名字不能相同 所有属性都需要写 value接收用 checked为默认选中
单选框
<input type="radio" name="name" value="值" checked="checked" />
单选框的同一系列选项name必须一样，除checked以外必写
提交按钮value内容显示在按钮上
<input type="submit" name="name" value="提交" />
重置按钮value内容显示在按钮上
<input type="reset" name="name" value="重置" />
放到哪里都会重置本页的内容
上传框
<input type="file" name="name" />
隐藏域
<input type="hidden" name="name" value="固定值" />
一般是存储固定值的
普通按钮
<input type="button" name="name" value="按钮" />可以自定义事件
多行的文本输入控件
<textarea name="name" cols="8" rows="3">
框里的默认值
</textarea>
cols代表宽度 rows代表高度 1代表一个字符
下拉框
<select name="name">
<option value="1">选项1</option>
<option value="2" selected="selected">选项2</option>
<option value="3">选项3</option>
</select>
所有的表单元素必须有名字，selected为默认选中 value代表每一个选项所对应的值
表格
表格的最基本单位是单元格，然后是行或者列。最后才是表格本身。需要呈现的数据就必须写在单元格内，否则在某些浏览器中将不被显示。
在xhtml中，表格是通过<table></table>、<tr></tr>、<td></td>标签来完成的。
示例表格
<table border="1">
<tr>
<th>标题</th>
<th>作者</th> 标题 作者 时间
<th>时间</th>
</tr> 这是一个表格 php100 2012.5.6
<tr>
<td>这是一个表格</td>
<td>php100</td>
<td>2012.5.6</td>
</tr>
</table>
（th代表表格的标题只有一行，剩余的全是td，标题默认加粗居中）
table的属性
属性 说明
width 表格的宽度，可以用像素或者百分比表示
height 表格的高度，可以用像素或者百分比表示
align 表格在页面的水平对齐情况
bgcolor 表格的背景颜色
border 表格的边框粗细 像素大小，可以设置为0
bordercolor 表格的边框颜色
cellspacing 单元格之间的间距，0是正常的表格
cellpadding 表格内内容与单元格之间的间距
<tr></tr>标签定义html表格中的行
属性 说明
align 行内内容的水平对齐情况
valign top Middle bottom 行内内容的垂直对齐情况
bgcolor 行的背景颜色
<td></td>标签html表格中的单元格
属性 说明
width 单元格的宽度，可以用像素或者百分比表示，最宽的td决定了这一列的宽度。
height 单元格的高度，可以用像素或者百分比表示
align 单元格内内容的对齐情况
bgcolor 单元格的背景颜色
colspan 占几行 单元格横向合并
rowspan 写数字几 单元格纵向合并
传统table布局 不利于设计和修改
缺点 设计复杂，改版时工作量巨大
表现代码与内容混合，可读性差
不利于数据调用分析
网页文件量大，浏览器解析速度慢如蜗牛
web标准的构成
结构：用来对网页中的信息进行整理与分类
船用的技术有：html、xhtml、xml
表现：用于对已经被结构化的信息进行显示上的修饰，包括板式颜色大小等
主要技术就是css，目前版本3.0
行为：是指对整个文档内部的一个模型进行定义及交互行为的编写
主要技术有：JavaScript脚本语言
div+css的好处
1、高效率的开发与简单维护
2、信息跨平台的可用性
3、降低服务器成本，加快网页解析速度
4更良好的用户体验
使网页的表现与内容分离
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">是表示默认的格式兼容性的网页表现与内容。
在html中引入css的方法
行内式
<h1 style="color:white; background-color:blue">内容</h1>
内嵌式
<style type="text/css">
h1{color:white; background-color:blue}
</style>
导入式
<style type="text/css">
@import"mystyle.css";
</style>
链接式
<link href="mystyle.css" rel="stylesheet" type="text/css" />
表示这是引入了一个css样式的脚本，3个属性都不能省
最多引入31个css
css选择器
选择器{ 属性：值； 属性：值； }
标记选择器 html标记，标签名
类别选择器 .classname
id选择器 #idclassname
*或者body 页面里面所有的标签
在一个页面，class可以给很多，id具有唯一性
复合选择器
交集选择器
div.a{ 属性：值； }
div#ad{ 属性：值；}
并集选择器
div,h1.first,p.specia{ 属性：值； }
后代选择器
div h1.first span.firstletter{ 属性：值； }
css优先级
行内样式>id样式>类别样式>标记样式
css文字样式
准备网页
设置字体
文字大小
行高
文字颜色与背景颜色
文字加粗、倾斜与大小写
文字的装饰效果
文字的水平对齐方式
文字布局
段落的垂直对齐方式
css文本处理
文本缩进：text-indent：px % cm 如果值是负数 则向左-9999则是隐藏
文本对齐：text-align：left right center justify（两端）
色 彩：color：#FFFFFF red rgb（0,0,225）
字 体：font-family： atial "黑体"，"宋体"
字体大小：font-size：可以是单位尺寸，也可以用绝对字体尺寸或相对字体尺寸
字体粗细：font-weight：normal bold（最细100~700最粗） bolder比normal粗 lighter比normal细
文字修饰：text-decoration：underline（下划线）line-through（横穿线）overline（上划线）none（没有修饰）
大小写：text-transform：capitalize（首字母）upperease（大）lowerease（小）
行高：line-height 单行文本高度 可以调节上下位置
示例p{text-indent:10px; text-align:center; color:blue; font-size:100px;
font-weight:500; text-decoration:underline;
text-transform:capitalize; line-height:10px;}
css背景的处理
背景固定：background-attachment scroll背景随对象滚动(默认） fixed 背景固定
背景颜色：background-color
背景图像：background-image:url（./images/1.jpg)
背景定位：background-position top center bottom left right Middle x y(对一张图片进行背景定位）
背景重复：background-repeat no-repeat repeat-x repeat-y
背景透明：background:rgba(0,0,0,0.5)
背景透明别的颜色:filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5;opacity: 0.5
背景：background:url(./images/1.jpg) #990000 repeat-x 100px 50px;
盒子模型
从外到内分别是margin border padding content
写的盒子的宽度和高度都是border的宽度和高度
盒子在网页上所占的多少是有四项一块算的
margin/padding的简写
方法是按照规定的顺序，给出2个、3个、或者4个属性值，它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性
如果给出3个属性值，前者表示上边框的属性，中间数值表示左右边框的属性，后者表示下边框的属性；
如果给出4个属性值，依次表示上、右、下、左边框的属性，即为顺时针排序。
margin：5px（上下） 10px（左右）；
margin：5px（上） 10px（左右） 15px（下）；
margin：10px（上） 8px（右） 5px（下） 15px（左）
深入盒子 边框-border
属性
颜色 border-color:red;
宽度border-width:1px;
样式border-style:dotted（点划线） dashed（虚线） solid（实线） double（双重线）下面只有一根线 border-bottom
简写
border：1px solid #FF0000；
块级元素和内联元素
块的显示与继承
display：block（块） none（隐藏） inline（内联）
块与内联的区别
块的对象默认宽度是100%(继承自父元素），如果没有采用”float:left/right;"样式，相邻的两个块对象就会分排在不同的两行上。
内联对象的快读取决于其内部元素的宽度与padding样式值之和，不可直接指定其宽度与高度（"display:block;" "float:left/right;"强行转换之后可以定义），相邻的两个内联对象会排在同一行上。（内联元素不可以设置高度和宽度，但可以使用border，margin和padding）
h1默认有margin p标签也是有margin
深入理解盒子模型
div标记与span标记 div：块级元素（block） span行内元素(Iinline)
float:浮动 left right clear 清除浮动 left right both（左右一块清除）
浮动会排成一排，如果想排在浮动的下面，可以给下面的盒子属性添加clear清除浮动的影响
css伪类（链接的样式）
:link :hover :active :visited
属性 说明
a:link 超链接的普通样式，即正常浏览状态的样式
a:visited 被点击过后的超链接的样式
a:hover 鼠标指针经过超链接上时的样式
a:active 在超链接上单击时，即“当前激活”时，超链接的样式，点住时的样式
css定位
position：ststic(默认） absolute relative fixed(ie6不兼容)
ststic 没有特别设置 对z-index无效
absolute 使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父对象进行绝对定位
relative使用left,right,top,bottom父对象进行相对定位
z-index设置块与块之间的层级关系的，z-index:-9999~9999;数值越大，越在上面，最好写正数。
css列表样式
属性 值
list-style-type disc 默认值，实心圆
circle 空心圆
square 实心方块
none 不使用项目符号
（有序列表项ol） decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
list-style-image:url(./1.jpg);（把前面的符号改成图片）
list-style-position:outside(标记在文本外） inside（标记在内）（标记在border内外的意思）
css溢出 overflow
overflow: hidden 隐藏
scroll 滚动条
auto 自动设置是否需要滚动条
visible 默认
overflow-x：
overflow-y: 单向设置一个方向的
css兼容及处理
1、<!--[if !ie]><!-->除ie外都可识别<!--<![endif]-->（IE11也可以识别）
2、<!--[if ie]>所有的ie可识别<![endif]-->
3、<!--[if ie6]>仅ie6可识别<![endif]-->
4、<!--[if gte ie6]>ie6以及ie6以上版本可识别<![endif]-->
5、<!--[if ie7]>仅ie7可识别<![endif]-->
6、<!--[if gte ie7]>ie7以及ie7以上版本可识别<![endif]-->
7、<!--[if it ie7]>ie7以及ie7以下版本可识别<![endif]-->
ie兼容处理工具 ietester 作用；模拟ie的一些版本 网址：www.ietester.com 里面有个debugbar 可以直接查看 临时调整属性
浏览器 查看元素 火狐 firebug 调整兼容 ie工具里面有一个 开发人员工具
css兼容二
！important 优先级显示 ie6不支持 width：100px !important；
*html .a{ } ie6 ie7 ie8支持
*+html .a { } ie7 支持 也不管用
.a{_background-color:red;} ie6支持
ie8兼容 <meta http-equiv"x-ua-compatible" content="ie=7" />意思ie8以上的浏览器暂时以ie7版本运行，固定用法，不可更改
7可以往上加，不可以往下加
网站内容命名
顶部 top 导航栏nav 广告栏 adv 底部footer 搜索search
首页叫index.html 产品页 category。html 产品详细页deltails.html
special.html
html 5
新增元素
1<section></section> 内容区块与 h1等元素结合使用 标示文档结构
2<article></article>一块上下不相关的独立内容，比如一篇文章
<aside></aside>表示areticle元素内容之外的、与areticle内容相关的辅助信息
<header></header>表示页面中一个内容区块或整个页面的标题
<hgroup></hgroup>元素用于对整个页面或页面中一个内容区块的标题进行组合
<footer></footer>表示整个页面或页面中一个内容区块的脚注，包含作者的姓名创作日期以及作者联系信息
<nav></nav>表示页面的导航链接部分
<figure>
<figcaption>标题</figcaption>
<p>这里写内容</p>
</figure>
表示一段独立的流内容，一般表示文档主体内容中的一个独立单元，使用figcaption元素为figure元素组添加标题
<video src="movie.ogg" controls="controls">video元素</video>
定义视频
<audio src="someaudio.wav">audio元素</audio>
定义音频 比如音乐或音频流
<embed src="horse.wav" />
插入多媒体，格式可以是midi,wav,aiff,au,mp3等
<mark></mark>元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。
<meter></meter>用来显示javascript中耗费时间的函数的进程
<time></time>表示日期或时间
<canvas id="mycanvas" width="200" height="200"></canvas>
表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，单它把一个绘图api展现给客户端javascript，以使脚本能够把想绘制的东西绘制到这块画布上
<command οnclick="cut()" label="cut">
表示命令按钮，比如单选按钮 复选框或按钮
自己刚学html的时候记得笔记，别嫌丑，我就是这么学过来的
阅读 63
2023-02-15
相关推荐
精彩评论（0）
0 0 举报