XHTML basics (including some css)_html/css_WEB-ITnose-HTML Tutorial-php.cn

Some notes based on the video tutorial at http://www.ycku.com/xhtml/

The explanation of xhtml is quoted from Baidu Encyclopedia

Extensible ultra Text markup language is a markup language whose expression is similar to Hypertext Markup Language (HTML), but its syntax is more strict.

In terms of inheritance relationship, HTML is an application based on the standard universal markup language and is a very flexible markup language, while XHTML is based on the extensible markup language, which is a standard A subset of the universal markup language. XHTML 1.0 became a W3C recommendation on January 26, 2000.

The following example declares the use of html5 in the header , but it is closer to xhtml in syntax. If there is any error, please report it. Personally, I feel that I should learn XHTML first and then learn HTML5. Ideal

For most of the tag attributes, you can go to http://www.w3school.com.cn/tags/index.asp to query and understand. Generally, there are very few built-in attributes for controlling appearance. Use, so I won’t go into details here. However, some issues that you are more concerned about will only be discovered during the development of CSS. You can check the compatibility issues (pc css). However, for the slice layout, I will open a new one later to talk about my current opinions.

XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www. w3.org/TR/html4/loose.dtd">

XHTML1.0 style tag

1. All single tags must be closed: , , , etc.

2. All single attributes must be equal to themselves: checked="checked", readonly="readonly", etc.

3. Try not to Use obsolete tags: , , etc.

4. Try not to use obsolete attributes: align, bgcolor

html basic tags

Title

Thick cu

Slant xie

Delete sha

Underline u&lt ;/u>

Telegram dianb

subscript shang

Superscript xia

dianzhi

uppercase : Make the font larger

Delete

Modify the underline

;b>jiaqiang jiacu

xieti jiaqiang

Formatting

Let the spaces and line breaks of the text be displayed on the html

The same is true for the same html tag, using a more semantic

blockquote quote tag

So del strong em ins these tags will have a better semantic effect than the above tags;

blockquote quoted text, left and right indentation

del strong em ins These tags will play a better semantic role than the above tags; however, html5 has deleted some tags

html sequence

hao

Unordered list

">2

🎜> 🎜>

dl>

Due to using css reset, the value of margin-left of dd is cleared to implement {float: left}, clear the previous serial number style {display: inline;} but it is generally used in reset

html table

Table

Prompt message, search element, the page will not be displayed ' border="1">

🎜> tr> ;th>1

;/tr>

🎜>cellpadding 0

nowrap limits the line wrapping in the text box

th is to hide a bold and centered attribute

col label operates on the column of the table, for example Color or background

The background priority of the table will be higher than the background color priority

html image

图像

文字图像排版的位置测试文本,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 超链接

超链接

超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL

的地址找到所需的资源。

格式:

scheme://host[:post]/path/filename

scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种

host 指的是 IP 地址或计算机名称

post 指的是服务器端口

path 指的是文件路径

filename 指的是文件

基准参考点

基本格式：&lthead&gt&lt basehref=”http://localhost:8080”&gt &lt/head&gt

对应的该页面下的超链接为http://localhost:8080/*

163@163

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 The browser always loads the target document in a newly opened, unnamed window.

_self The value of this target is the default target for all tags that do not specify a target, which causes the target document to be loaded and displayed in the same frame or window as the source document . This target is redundant and unnecessary unless used in conjunction with the target attribute in the tag of the document title.

_parent This target causes the document to be loaded into the parent window or frameset containing the frame referenced by the hyperlink. If this reference is in a window or in a top-level frame, it is equivalent to target _self.

_top This goal causes the document to load into the window containing the hyperlink. Using the _top goal will clear all contained frames and load the document into the entire browser window.

Of course, you can also define the name of the new window yourself, such as target="du" and the new window will be opened in the du window or tab

Preface

Chapter 1

Chapter 2

Chapter 3

All hyperlinks will be opened in the defined view_window, and too many pages will not be opened repeatedly

html form

form

"Text">

🎜>

Guangdong

Guangxi

Display the group name of the following options

Actual multiple is also relatively rarely used, because the interface operation is not friendly and you have to press ctrl to achieve multi-selection. The multi-selection list still needs to be implemented by js, otherwise the user will not Buy your account

Outer border:

Title: ...

The effect title is inside the border

---- Title-----------------

html frame

The body tag must be removed

Basic nesting now uses floating frames

iframe

Javascript is generally required to automatically obtain the web page height

html media (Mainly for flash)

Media

Must have height and width

wmode

Value

window makes flash play its own rectangular window

opaque makes flash hide behind it on the page

transparent makes a certain part of flash transparent

object is an object, and its value must be inserted. The corresponding flash must insert the type declaration object type

Background music uses bgsound src="URL" loop= "Number of times" insert

Meta tag (meta will be discussed in detail when I have the opportunity)

Regular jump page

refresh means re-downloading the page to achieve redefinition of the jump page

Generally written in the head

meta record corresponding information to increase search

For text scrolling without js, you can try this

meta optimization for search

XHTML XML XML can create your own tags, mainly used for data storage Dtd and other formats that restrict xml

CSS

Concatenated typesetting style (overlapping style sheet

Priority:

1. Inline style sheet The maximum weight is 1000; 2. The weight of the ID selector is 100

3. The weight of the Class selector is 10

4.HTML tag selector The weight is 1

Do not use @import to introduce css files, which will cause the file to not be downloaded by multi-threads

The length of px pixels is recommended, Em is based on the current font height. Unit (absolute value has rem anyway, just take a look at this) rem (css3) scales according to the root element

Color rgb(0,0,0) (generally use rgba for effects, which is also css3), Generally, #000000 will be used for design drafts; as for red, yellow, aliceblue, etc., you have to decide by yourself

Simply using font bold will not show up. Generally, it must be combined with font: 12px bold; compound Tags

are best to use font-weight:bold for bolding;

text-indent. The first line indent can be used for the space before the paragraph (Chinese custom format

line-height: 100px corresponds to vertical centering in a 100px container

vertical-align:middle

For the first usage, first look at the following sentence "In table cells, this attribute will Sets the alignment of cell contents in a cell box. "This is easy to understand. If you add a vertical-align:middle style to the td of a table, the content in the table will be vertically centered. Similarly, if you give a vertical-align:bottom, it will be aligned at the bottom. If you give a vertical- align:top will align the top.

For the second usage, read the sentence on the previous page: "This attribute defines the vertical alignment of the baseline of an in-line element relative to the baseline of the line where the element is located." I don't know how to speak professional language. I can use an analogy: Suppose there are two There are inline elements a and b, both a and b are img. When a is added with a vertical-align:middle style, the bottom (baseline) of b will be aligned with the middle position of a, as shown below:

If both a and b add a vertical-align:middle style, then they will be aligned with each other's middle position, that is, their midlines in the vertical direction will be aligned, as shown below:

Having said this, the idea becomes clear.

The same principle applies to text, etc.

Css background

Background

body{background:#fff url("bg.jpg") no-repeat fixed center top;}

li{

list-style:none;

}

Advocate The abbreviation background: color background picture repeat attachment position

list-style:url; picture is almost not used because the picture cannot be adjusted according to the height, generally just use background background

Simple px.this is css

&lt ;p>Simple px.this is css

Simple px.this is css

simple px.this is css

<p&gt ;Simple px.this is css

Simple px.this is css

Borders and borders

Borders and Borders

&lt ;style>

div{

overflow:auto;

}

img{

border:5px dashed ;

/*

border-color:red black yellow green

The corresponding border color should be set on the top, right, bottom and left, and each one needs to be separated

It is recommended to simplify border pixel shape color;/standard

*/

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 merges the first element and the margin of the adjacent elements of the parent element (there is a problem with standard browsers when loading elements in blocks, IE behaves normally )

Solution:

1) Add: overflow:hidden to the parent div;

2) Change the margin-top outer margin to padding-top inner margin Spacing;

3) The parent element's overlapping margins have padding that is not 0 or a border that has a width that is not 0 and style that is not none

parent layer div add: padding-top : 1px, or border-top:1px;

4) Set the parent element or child element to float (left/right)

5) Set the parent element display:inline-block or display:table -cell;

6) Add absolute positioning to the parent element

The above 6 methods can solve the spacing problem of the parent element of the first child element

Adjacent The distance between two adjacent elements is only 20px. If I want to realize that the distance between two elements is my ideal distance, which is 30px, how should I achieve it? There are two methods:

1) Add float (left/right) to the last element

2) Add float to the last element Add display:inline-block to the element; however, display:inline-block is not fully supported under IE6 and IE7, so you need to add *display:inline;zoom:1 to solve the bug in IE6 and 7;

1. Horizontal margins will not be merged.

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

}

超链接测试

超链接测试2

123

zoom:1 缩放图像,只有ie6需要这个标签来显示全部内容

cursor 指定鼠标图片,html就指定整个页面

滤镜

div{

height:200px;

}

p{

height:200px;

}

img{

opacity:0.5

}

滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效

滤镜必须是块状对象,而且是只有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越晚加载的越重要，因为会覆盖之前加载的

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 构造模型 定位（排版重点）

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

<!--

每个浏览器文字的间距不一样

ie6 块状元素默认高度,增加p标签之后不会变化,其他版本会变化,默认div会有的margin

正常嵌套 border:1px solid black;margin:10px;padding:10px;各浏览器显示正常

只修改div contion的 颜色与box不一样,ie6不支持子选择器

#contion p{color:blue}

.box p{color:red}

解决办法 ie hack

-->

123

<!--

margin-left:auto; auto属性ie6都支持,不支持margin-top:auto或者bottom的上下居中

父亲标签中加入text-align:center;,可以实现多浏览居中,可是文字要使用优先级重写text-align:left;,不建议这种写法

auto并不是100%,是自动扩展

padding会增大长度,所以width要减少对应的padding

absolute 绝对定位,是按照html的标签的点来定位,而relative 相对定位是父亲元素,

absolute绝对定位不占位置,relative 相对定位占原来的位置，

一般相对定位和绝对配合使用,父类使用相对定位,不设置top和left（为了兼容一般会习惯性加了left和top；）

,子类使用绝对定位absolute,可以定位的点是根据父类标签的点开始

relative 相对定位

absolute 绝对定位

这么一说还是一头冒水吧

看w3c那个CSS 定位概述 顺便也看浮动吧，浮动使用后记得清除浮动就ok了

-->

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;

}

1

2

<!--

display:block inline element is converted into block or inline

After conversion, width height is canceled

Background gradient : Get the color of the gradient of the background and connect it to achieve the up and down gradient effect

background:url(bg1.jpg) repeat-x #E2FFEA;

Add watermark to the block and use the background position right bottom, positioned at the bottom right

Add an icon to the title

Use background:url() no-repeat 0 50%;

padding-left:15px;

Use icons to achieve upper and lower rounded corners. If padding is not set in the outer area, it will not affect the corresponding width.

background:url(top.jpg) no-repeat 0 0;

background: url(bottom.jpg) no-repeat 0 100%;

Simple shadow effect

Just add background shadow

background:url(shadow.jpg) no-repeat 100% 100%;

The image floats, the shadow div below, and then the margin of the image: -5px 5px 5px -5px; show the background

ie6 does not support //comment

-->

css constructed list

&lt ;head>

css construction list

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;}

111

222

333

444

<!--

ie-8 and above UL has padding margin by default,

Horizontal list li{display:inline;}

Set the title with ul list-style-image:url(1.jpg); and the corresponding prefix cannot be adjusted Punctuation icon

It is recommended to set ul li

li {

background:url(1.jpg) no-repeat 0% 50% ;

padding -left:150px;

line-height:150px;

}

Inline list display:inline; The height cannot be adjusted inline

li{ display:inline;

/* display:inline; A one-line list will remove the prefix number of the list. It is recommended to use float*/

background:url(1.jpg) no-repeat 0% 50% ;

padding-left:150px;

padding-top:150px;

line-height:150px

}

The vertical list is the original background setting. If a is set to display:block; there is no need for a to be outside the li tag. IE7 must add height to the a tag, otherwise there will be a little problem

-->

css constructed hyperlink

a{text-decoration:none;

border:1px dashed black;

/*ie6/7 The border is not fully displayed. Use block elements to display it completely. You can also use zoom or line-height to display it.

*/

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%

}

123 123 3123

mailto

123 123456

<!--

ie6 does not support this writing method a[href^="mailto:"]

If you need ie6 to be compatible with hover and display:none, you need to adjust the font size font-size

-->

Construction of css table

table{

/*Set whether cells are merged or separated border-collapse:collapse;

css cannot enter the size, and instead of the table's default cellspacing="0", there will be element movement

* /

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;}

&lt ;/head>

1 2 3 4

&lt ;tr>

1 2 3 4

Construction of css form

legend{ margin:0 auto}

.label label{

width:100px;

background:red;

display:inline-block;

text-align:right;

}

Registration

Gender: nan nv

good

Name: &lt ;/label>

123123:&lt ;/label>

145: &lt ;/label>

<!--

Use label to achieve text alignment

Although using display:inline-block; can achieve the corresponding function, floating can also be achieved,

Older versions of IE browsers do not support the display:inline-block attribute!

The correct explanation is "Using the inline-block attribute will trigger layout under IE, so the width and height set on the element will take effect, so it will have the same display effect as other browsers." , but it cannot be said that IE6/7 supports display:inline-block!