码迷,mamicode.com
首页 > Web开发 > 详细

HTML & CSS

时间:2016-01-04 11:40:38      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:

1 请遵循html元素必须有开始和结束的标准规范
<html></html>
<p></p>

2 空元素,空元素没有结束标签,形式如下
<br />   //换行
<hr />   //水平线

3 html注释
<!--  注释内容 -->

4 上标下标
<sub>下标</sub>    //下标
<sup>上标</sup>    //上标

5 预格式文本
<pre></pre>   //保留了里面的空格,适合放代码,html元素默认会除去行首行尾段首段为空格

6 删除线下划线
<del></del>
<ins></ins>

7 链接
没有下划线的链接
<a href="/example/html/lastpage.html" style="text-decoration:none">

使用 Target 属性,你可以定义被链接的文档在何处显示
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

链接到同一个页面的不同位置
name 属性规定锚(anchor)的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示,它对读者是不可见的
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>

8 样式表
  内部定义的
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
 
  引用外部的
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

  内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

9 规定字体的大小颜色
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>    

10 图像标签
<img>    定义图像。
<map>    定义图像地图。
<area>    定义图像地图中的可点击区域。

10 div,span 块级元素

11 表单和输入元素
<form></form>
<input></input>
<input type="checkbox" name="bike">

11 框架
   垂直框架

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

水平框架
<frameset rows="25%,50%,25%" noresize="noresize">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

内联框架
<iframe src="http://www.baidu.com" width="200" height="200"></iframe>

12 文档描述
<meta name="author"
content="w3school.com.cn">

<meta name="revised"
content="David Yang,8/1/07">

<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />   //重定向

13 需要知道的一些元素
<head><meta><base><link><style><script>

14 html注释
<!--      -->


15 css定义的语法
三部分组成:一个选择器,属性和一个值
选择器是你希望去定义的html元素/标签
值为多个单词必须用双引号括起来,多个属性用分号隔开
--  selector{property:value}
例如
-  body{color:black}
-  p{font-family:"sans serif";text-align:center;color:red}

也可以分行写,更具可读性
例如:
   p{
    font-family:"sans serif";
    text-align:center;
    color:red
    }
    
也可以将选择器组合
例如一下3种标题使用一种样式
 h1,h2,h3{color:red}

 选择器类,将同一类型的html元素定义出不同类型的样式
 例如:
 p.right{text-align:right;color:red}
 p.left{text-align:left;color:red}
 使用方式如下:
 <p class="left">类属性</p>
 
 省去标签名称直接去定义,这样就可以在所有的html元素中使用了,  ‘.‘点号不能省
 例如:
 .center{text-align:center}
 <p class="center">类属性</p>          //所有使用了center类的元素都可以使用
 
 id选择器,为不同的html元素定义相同的样式
 例如:
 #green{color:green}
 <h1 id="green">搜呢么</h1>
 <p id="green">搜呢么</p>
 
 css注释
 例如:
 /*  这是注释 */
 
 外部样式表
 使用<link>标签让每个页面都连接到样式表,<link>标签在head区域使用
 例如:
 <head>
        <title>这是网页的标题</title>
        <link rel="stylesheet" type="text/css" href="my.css" >        //可以使用相对路径或者绝对路径
</head>

内部样式表在head区域使用<style type="text/css">定义
例如:
<style type="text/css">
.center{color:red}
</style>

行内样式
例如:
<p style="color:red;margin-left=20px">行内样式</p>

多重样式表
样式表优先级:行内样式,内部样式,外部样式,浏览器样式
当给同一标签定义了样式表时,按照优先顺序选取样式表中定义的值,
即定义了相同值取优先级高的,没有定义取优先级低的已经定义了的


16 http协议
1)请求行格式如下
Method Request-URI HTTP-Version CRLF
例如:
GET /test.html HTTP/1.1 (CRLF)

GET请求获取由Request-URI所标识的资源。
POST在Request-URI所标识的资源后附加新的数据
HEAD获取由Request-URI所标识的资源的响应消息,要求服务器接收附在请求后面的数据

当我们通过浏览器的地址栏直接输入网址的方法访问网页时浏览器采用的就是get方法
协议中GET和POST必须大写,html中不区分大小写

2)http响应
三部分组成:状态行,消息报头,响应正文
格式如下:
HTTP-Version Status-Code Reason-Phrase CRLF

状态码类别
1XX 指示信息,表示已经接收,继续处理
2XX 成功,表示请求已经被成功接收,理解,接受
3XX 重定向,要完成请求必须进行更进一步的操作
4XX 客户端错误,请求有语法错误或无法实现
5XX 服务器错误,服务器未能是实现合法请求

常见的状态码
200 客户端请求成功
400 由于客户端请求有语法错误,不能被服务器所理解
401 请求未经授权
403 服务器收到请求但是拒绝提供服务
404 请求的资源不存在,比如输入了错误的url
500 服务器发生不可预期错误,导致无法完成客户的请求
503 服务器当前不能够处理客户端的请求,在一段时间后服务器可能恢复正常

对于请求消息,开始行就是请求行,对于响应消息,开始行就是状态行

GET /index.html HTTP/1.1
Host:www.sina.com.cn
 

HTML & CSS

标签:

原文地址:http://www.cnblogs.com/Mr-Zhong/p/5098195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!