Heim >Web-Frontend >HTML-Tutorial >XHTML 基础（含部分css）_html/css_WEB-ITnose
XHTML 基础（含部分css）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:33992Durchsuche
基于http://www.ycku.com/xhtml/ 的视频教程的一些笔记
关于xhtml的解释 引用百度百科
可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言，可扩展标记语言是标准通用置标语言的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
下面的例子在头部声明使用了html5了，只是在语法上更加靠近xhtml而已，实在有误请有望提出，个人感觉先学习XHTML再去学习HTML5会比较理想
对于大部分的标签的属性可以到 http://www.w3school.com.cn/tags/index.asp 进行查询了解，一般进行控制外观的内置属性开发中基本甚少使用，所以这里就不细说了。然而css基本要在开发中才会发现一些比较在意的问题，可以去看 兼容性问题（pc css），然而切片布局的，稍后会开新的稍微说说自己目前的见解。
XHTML
/p>
"http://www.w3.org/TR/html4/loose.dtd">
XHTML1.0 风格标记
1.所有单标记都必须关闭：
、
、等
2.所有的单属性必须等于自身：checked="checked"、readonly="readonly"等
3.尽可能不使用废弃标记：
4.尽可能不使用废弃属性：align、bgcolor
html基本标签
粗 cu
斜xie
删sha
下划u
电报dianb
下标shang
上标xia
大写:字体变大
删除
修改 下划线
xiaoxie:字体变细
jiaqiang jiacu 基本与b标签一样jiaqiang jiacu
xieti jiaqiang
格式化 <p>让文本的空格和换行都显示在html上面</p>
同一的html标签也是这样,采取更有语意性的
同一的html标签也是这样,采取更急有语意性的
blockquote 引用标签
所以del strong em ins这些标签比上述标签会起到更好的语意作用;
blockquote 引用文本,左右缩排
del strong em ins这些标签比上述标签会起到更好的语意作用;然而html5已经删除了部分标签了
html序列
无序列表
- 1
- 2
有序列表
- 1
- 2
定义列表(无前序)
- 13
- 11
- 11
- 题目
- 细明
- 细明
由于使用css reset之后,dd的margin-left的值被清空 来实现{float:left} ,清空前序号样式 {display：inline；}不过一般在reset里面已经使用了
html表格
| a | b | c |
|---|---|---|
| 1 | 1 | |
| 1 | ||
table边框设置frame和rules 不常用,对边框的设置
cellspacing 0
cellpadding 0
nowrap限制文本框里面不换行
th是隐藏了一个加粗和居中的属性
col标签对应table的列进行操作,例如颜色或者背景
表格的背景优先级会比背景颜色优先级高
html图像
文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top
缺省是bottom,在图像最的下方见到文字,
top上 center中间
主要用 left或者right,align left或者right属性的设置相当于 浮动float的设置(博客或者日志的图文粗略显示模式
vspace="10" hspace="10" 对应上下margin
上述基本属性基本使用css来实现就可以了
在a标签的包括下图像,边框的设置:css设置图像边框为0,css reset中要设置
设置图标 ie6会有问题显示不了图标
1
Alt属性对应无图像加载时候,对图像的描述，开发的时候必须加入，然而title属性看效果使用也无伤大雅。
Html 超链接
<p>超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL</p> <p>的地址找到所需的资源。</p> <p>格式:</p> <p>scheme://host[:post]/path/filename</p> <p>scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种</p> <p>host 指的是 IP 地址或计算机名称</p> <p>post 指的是服务器端口</p> <p>path 指的是文件路径</p> <p>filename 指的是文件</p> <p> </p> <p>基准参考点</p> <p>基本格式：<head>< basehref=”http://localhost:8080”> </head></p> <p>对应的该页面下的超链接为http://localhost:8080/*</p> <p></p>
href="mailto:163@163.com" 使用本机的邮件发送
锚点 a设置name name="123"
跳转到123的锚点,a超链接 href写的#123 一般直接使用top返回顶部,对应某些页面的锚点,使用href="1.html#123"
超链接hover 点击后css失效 使用正确的书写顺序 link visited hover active 其实就是一个样式重写的问题
Target属性 target="_blank" 新窗口打开
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
当然你还可以自己定义新窗口的名称 例如target="du" 然后新窗口都会在du 这个窗口或者标签打开了
超链接全部会在定义的view_window 打开,不会重复开过多页面
html 表单
属性值multiple 为 多选 ,optgroup label="广西"中,会显示下列选项的组别名字
实际multiple 也比较少用，因为界面操作不友好 要按着ctrl 才实现多选，多选列表还是要交给js来实现，否则用户才不会买你的帐
外 边 框:
标题:
效果 标题在边框里面
----标题-----------------
html框架
必须去掉 body标签
现在基本嵌套都用浮动框架
iframe
一般是需要javascript来自动获取网页高度
html媒体（主要是针对flash）
必须要高度和宽度
wmode
值
window 使 flash 自身的矩形窗口来播放
opaque 使 flash 隐藏页面上位于它后面
transparent 使 flash 某一部分透明
object使用是对象,必须对其的值来插入,对应flash必须插入type声明对象类型
背景音乐使用bgsound src=”URL” loop=”次数” 在head上面插入
Meta标签（meta 这个东西有机会会细说）
定时跳转页面
refresh 表示重新下载页面 从而达到重定义跳转页面
一般写在head里面
meta 记录对应的信息增大搜索
对于做文字滚动不用js 这个可以试试
meta 对于搜索的优化
XHTML XML
XML 可以创建自己的标签,主要使用数据存放
Dtd之类限制xml的格式之类
CSS
串接式排版样式(重叠式样式表
优先级:
1.内联样式表的权值最高 1000；
2.ID 选择器的权值为 100
3.Class 类选择器的权值为 10
4.HTML 标签选择器的权值为 1
不要使用@import引入css文件,会导致文件不是多线程下载
长度 px 像素 推荐使用, Em 以目前字体高度为单位(绝对值反正现在有rem，这个看看就好) rem（css3）根据根元素缩放
Color rgb(0,0,0) （一般做效果使用rgba，也是css3的），一般有设计稿会使用 #000000 ;至于red yellow aliceblue 这些，自己看着办
单纯使用 font 加粗会出现显示不了,一般要配合font :12px bold;复合标签
最好还是使用font-weight:bold进行加粗;
text-indent 首行缩进 可以用于 文段之前的空格(中文习惯格式
line-height: 100px 对应100px的容器里进行垂直居中
vertical-align:middle
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个 vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和 b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了。
同样的原理对文字等也适用。
Css背景
body{background:#fff url("bg.jpg") no-repeat fixed center top;}
li{
list-style:none ;
}
提倡简写写法 background:颜色 背景图片 repeat attachment position
几乎不用list-style:url;图片 因为图片不能根据高度来调整,一般使用背景background就可以了
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
- 简单px.this is css
- 简单px.this is css
- 简单px.this is css
- 简单px.this is css
- 简单px.this is css
边框与边界
div{
overflow:auto;
}
img{
border:5px dashed ;
/*
border-color:red black yellow green
对应的边框颜色要上右下左 设置,需要每个分开出来
建议是简化 border 像素 形态 颜色;/规范
*/
margin:10px;
padding:10px;
}
.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}
.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}
/*margin合并 第一个元素与父亲元素临近元素的margin合并(出现在块装元素标准浏览器出现问题,ie表现正常)
解决办法:
1)在父层div加上：overflow:hidden；
2)把margin-top外边距改成padding-top内边距;
3)父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border
父层div加： padding-top: 1px,或者 border-top:1px ;
4)设置父元素或子元素浮动（left/right）
5)设置父元素dispaly:inline-block或者display:table-cell;
6)给父元素加上绝对定位
以上6种办法都能解决第一个子元素的父元素的间距问题
相邻元素两个相邻元素之间的间隔，只有20px；如果我要实现两元素间的间隔是我理想的间隔，即30px,该如果实现呢？方法有以下两个：
1）给最后面的元素加上浮动（left/right）
2)给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;
1. 水平margin不会合并。
2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。
3. 浮动元素不会和任何元素（包括子孙节点）发生 margin 合并。
4. overflow！=visible的元素不和任何元素发生margin合并。
5. 绝对定位的元素不和任何元素发生margin合并。
6. inline-block 的元素不和任何元素发生margin合并。
7. 设置 clear 属性的元素不和任何元素发生margin合并。
8. 根元素不和任何元素发生margin合并。
9. 父节点和第一个子节点发生margin-top合并。
10. 如果最后一个子节点没有border以及padding，则和其父节点发生margin-bottom合并。
注意IE！特别是hasLayout对于margin合并也有影响，从而也造成了包含的绝对定位元素的位置差异。
*/
CSS链接、光标、DHTML、缩放
a{
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:link{
color:red;
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:visited{
color:black;
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:hover{
color:blue;
text-decoration:underline;
border: 1px solid black;
zoom:1
}
a:active{
color:green;
text-decoration:none;
border: 1px solid black;
zoom:1
}
span{cursor:help
}
123
zoom:1 缩放图像,只有ie6需要这个标签来显示全部内容
cursor 指定鼠标图片,html就指定整个页面
滤镜
div{
height:200px;
}
p{
height:200px;
}
img{
opacity:0.5
}
滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
filter ie9以下包括ie9 ,才支持,然而ie9支持opacity 标签了
Css选择器
优先级:
1.内联样式表的权值最高 1000；
2.ID 选择器的权值为 100
3.Class 类选择器的权值为 10
4.HTML 标签选择器的权值为 1
每个id只能在html里面使用一次,唯一的元素,不会混淆(虽然可以用多个相同id但是不符合规范)
class可以在多个元素里面使用
选择符号
标签 div
Id #div
Class .div
div.div , div .div 优先级都属于11,所以谁先写在前面就会被后一个重写css
div.div div中class位div被选中, div .div div中的子元素class为div的元素被选中
link 加载css
css越晚加载的越重要，因为会覆盖之前加载的
body{font-size: 20px}
h1{font-size: 12px; margin:0;padding:0}
div .div{color:red;}
div.div{color:green;}
123
滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
通过css设置，首先设置body的字体，如
body {font-size: 14px;}
然后其他的都可以使用相对尺寸设置了，如
h1 {font-size: 2em;} /*14*2 = 28*/
h2 {font-size: 1.8em;}
等等
这样便于快速修改页面的整体文字尺寸，同时也不影响你修改局部的文字大小。
很少在嵌套标签里面加class,一般使用子类选择器来继承css
ie6不支持高级选择器 h1 >gt i{}
ie6只支持a的伪类，实在现在还有多少页面会做ie6-7的兼容
css 构造模型 定位（排版重点）
#contion{
padding:20px;
background:green;
border:1px solid black;
}
.box{
border:1px solid black;
margin:10px;
padding:10px;
}
div p{_color:blue}
#contion>p{color:blue}
.box p{color:red}
body{
/*text-align:center;*/
}
#textbox{
width:150px;
height:150px;
background:yellow;
border:1px solid black;
/*margin-left:auto;
margin-right:auto;*/
margin:0 auto;
padding:50px;
position:relative ;
}
#textbox p{
position:absolute ;
top:120px;
left:120px;
}
测试10086moki
测试001moki
测试002moki
123
CSS构造颜色、背景与图像
body{
background:url(bg1.jpg) repeat-x #E2FFEA;
}
div{
//width:90px;
//height:90px;
background:red;
}
span{
width:90px;
height:90px;
background:#fff;
}
.shadow{
background: url(shadow.gif) no-repeat right bottom;
clear: right;
float: left;
//position: relative;
margin: 10px 0 0 10px;
}
.shadow img{
display: block;
/*这个属性到列表再进行解释*/
margin: -5px 5px 5px -5px;
//position: relative;
}
2
css构造列表
body{margin:50px;padding:0}
ul{margin:5px;padding:2px;
list-style:none;
width:160px
}
li{
background:#ddd;
margin:0;
padding:2px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-left:1px solid #666;
border-bottom:1px solid #fff;
}
a{display:block;}
css构造超链接
a{text-decoration:none;
border:1px dashed black;
/*ie6/7 边框显示不全,使用块状元素可以显示齐全,也可以使用zoom,或者line-height显示出来,
*/
zoom:1;
color:blue;
position:relative;
}
a[href^="http:"]{
color:red;
}
a[href^="mailto:"]{
color:green;
}
a span{display:none;
}
a:hover span{
display:block;
position:absolute;
top:1em;
left:0;
font-size:100%
}
1231233123
css表格的构造
table{
/*设置单元格是合并还是分开border-collapse:collapse;
css不能输入大小,和table默认的cellspacing="0"的替代,会存在元素移动
*/
border:1px solid black;
/*border-collapse:collapse;*/
width:auto;}
.table th,.table td {
background:yellow;
width:50px;
border:1px solid black;
text-align:center;
vertical-align:middle;}
th,td {
width:50px;
border:1px solid black;
text-align:center;
vertical-align:middle;}
table col.col1 {
background:green;}
table col.col2 {
background:gold;}
.n{
visibility:hidden;}
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
css表单的构造
legend{ margin:0 auto}
.label label{
width:100px;
background:red;
display:inline-block;
text-align:right;
}