HTML、CSS学习笔记

来源：互联网发布：linux 启动过程编辑：程序博客网时间：2024/05/17 07:55

1.html:超文本标记语言，用来对网页文档信息进行格式化展示的语言，主要包括头部(head)和主体(body)。

http协议：用于服务器和浏览器之间的数据传送，规定html如何在客户端和服务器端传输

url:统一资源定位符，进行信息资源的唯一定位

网页中三种最基本的页面组成元素是文字、图像、超链接

单元格垂直合并所用的属性是__ rowspan 。单元格横向合并所用的属性是__ colspan ____。

在HTML中，引入CSS的方法主要有__行内式____、_内嵌样式___、__导入式____、__链接式__4种

CSS中插入注释格式是_/**/ _。

font-size：控制文本尺寸 font-family：修改字体样式

CSS显示这样一个边框：上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素的写法是border-width:10px1px5px20px

CSS中设置行高的属性是line-height

设置网页中某个标签的左边界为5px用的CSS样式为 margin:0 0 0 5px 或者 margin:0 5px。

**margin:5px 6px 7px 8px; 意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，

等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 一样效果简写；

参考链接：http://www.cnblogs.com/spring_wang/p/3938674.html

转法：margin:5px 6px 7px 8px

2.特点：a.独立于平台，即独立于计算机硬件和操作系统

b.超文本

c.精确的结构化文档

几个工具：HBuilder、DW、webStorm

本地文件路径：file:///C:/Users/Administrator/Desktop/hh.html

file://协议 /是根目录

字体样式：

name="decription" name="author" //类似keywords功能

//css外部引入

//js外部引入

<font color="red"> 修改字体颜色

style="background-color:red;font-size:20px;font-family:arial"

background-color:标准的css属性

bgcolor是IE扩展的html属性，两者效果相同推荐使用

shape=rect表示的形状是矩形； shape=poly表示的形状是多边形

HBuilder：http://127.0.0.1:8020/TestHtml/table.html

1.html常见标签

<h1>到<h6> 字体加粗加大效果，字体大小依次减小，默认换行效果，只能识别h1到h6

<h7> 则作为body效果

<h1 align="center">ss</h1> //align标签属性

<hr width="200" align="left" size="7" color="pink"/> //横线，单标签 200px width="80%" 按比例缩放

<font size="5" color="red" face="微软雅黑"/> //没有align属性 face代表字体

<br/> 换行   空格 "" " ' ' & &

<p> 段落符，相隔之间会换行，相对于<br/>有较大的间距

<b> 加粗 <i>斜体 <u>下划线 <del>删除

<pre>aa ss</pre>//中间空格不会被清掉

10<sub>3</sub> 下标 <sup> 上标

<qq> (代表左右括号)

bgcolor 将背景设置颜色

background 设置背景颜色 background和bgcolor不能同时使用 <body background="img/7.png">

2.<img>

常见属性： src:图像文件地址(可以使用网络图片) width:图像大小 height (width和height设置一个即可，会自动等比例缩放，默认px)

border:图像边框(跟style一起使用可以改变样式) alt:图片资源找不到时显示的文本内容(为图片添加简要说明文字的属性)

title:鼠标移动到图片上面的提示信息

border="10" style="border-color:red"

3.<embed src="a.mp3" autostart="true"(可能不支持) loop=“true” hidden="false" width="100px" height="100px"/> 音视频

autostart="true"(可能不支持) loop 循环 hidden 隐藏

支持格式 mp3 wma asf swf flv rm ra ram avi

<center></center> 可以将音视频控件位置放在中间有效

4.<table border="1" width="50%" cellpadding="10" cellspacing="20"> cellpadding 内边距 cellspacing 外边距

tr 行

列 td <th>修饰文本，默认居中加粗的效果 <th align="left" width="100"> width会影响一整列 <td align="center">

rowspan="2" 跨两行 colspan="2" 跨两列

<th rowspan="3">sqwwe</th>  td和th都能使用rowspan和colspan

table>tr*9>th*5 +tab 快捷生成9行5列的表格

style="border-top: none;" 去除上下两个表格重复的线

修改表格的样式，单线条

5.<a href="5.htm"><img border="0" src=""></a> a 超链接 href 链接地址

target="_blank" 在新窗口中打开链接，新的窗口（一般不推荐）

_parent 在父窗体中打开链接

_self 当前窗体中打开链接，默认值

_top 在当前窗体打开链接，并替换当前的整个窗体(框架页)

<a href="login.html" target="_top">退出登录</a> 退出顶层页，前提是已有上一级页面

ctrl+shift+r 快捷复制

6.锚点

<a name="first"> </a> <a href="#first"> </a>点first指向name

<a href="#"> </a> 从页面开头算起

7.框架 Iframe 内嵌框架

Iframe和frame区别：

1、frame不能脱离frameSet单独使用，iframe可以
2、frame不能放在body中,否则不能正常显示
　 frame不能和body同时使用,iframe可以和body同时使用

8.frameSet不能与body共存，否则可能导致效果显示不出来

<frameset rows="20%,60%,*" cols="" border="1"> rows将页面横向切分 cols 纵向切分

<frame src="url"/> border frameborder="yes" 显示框线

scrolling="NO" 不会有scrolling bar 默认yes

Noresize 使用者无法调整分割页面的大小。

常用框架：

</frameset>

</frameset>

9. form表单用于收集和提交用户输入的数据,提交到服务器,客户端和服务器交互数据的一个方式。

action:提交的目标是动态网页jsp等，提交的具体的服务器地址

method: get: 1.把提交的参数信息放在url地址栏 (查询用) 默认

2.参数和提交地址用?相连接

3.参数和参数之间用&相连接

4.每一个参数都是键值对方式提交

5.提交的数据量较少(2-4k)，把信息显示在地址栏，存在安全问题。有缓存，效率比较高

6.如果不写name值，不会提交

post:传送的数据作为http request的一部分，资料不会显示在地址栏，传送的数据量比较大。(增删改用)

2-4与get一样

5.相对安全，不会走缓存，提交的数据理论上没有限制。

post格式：
请求格式：POST /hello.jsp HTTP/1.1
响应格式：HTTP/1.1 200 OK
HTTP请求头与请求正文；HTTP响应头与响应正文要分别以空行分隔
请求正文：username=aaa&password=123&submit=submit
常见状态码：200 响应成功
400 错误的请求 404 文件不存在 405 服务器不支持客户的请求方式
500 服务器内部错误
put：
上传文档到服务器
delete:
用于删除服务器上某个文档

有name才会提交。action="#" 提交到本页

文本框：<input type="text"/> 输入一行文本 placeholder 默认文本 value 默认值

密码：<input type="password"/> 输入一行文本，不可见，以星号表示。

单选按钮:<input type="radio" name="msex"/> 在两个单选按钮上加name="sex"的一组值，可以达到单选效果

<input type="radio" name="msex"/> checked="checked" 默认选择 checked也是可以

复选框:<input type="checkbox"> checked="checked" 默认选择

隐藏域:<input type="hidden"> 值对用户不可见，但会提交给服务器，一般用于传用户id

下拉列表：<select> <option>aa</option> </select> selected="selected" 默认选择

文本域(多行文本): <TEXTAREA rows="5" cols="70">默认值</TEXTAREA>

提交按钮:<input type="submit"> 提交信息

普通按钮:<input type="button">

重置按钮:<input type="reset"> 重置表单信息

文件上传：<input type="file">

图片:<input type="image" src="url" style="height:100px;"/>

验证码:<input type="text" maxlength="3" size="5" name="rcode"/>

name用于提交数据 maxLength最大输入长度 size（1-7）文本框长度

Readonly只针对input(text / password)和textarea有效，disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
但使用了disabled后，当我们将表单以POST或GET的方式提交的话，该元素的值不会被传递出去，而readonly会将该值传递出去。

总结:

所有要提交的表单域必须加name属性，除了不提交，如button

单选按钮和复选按钮：

name相同即为一组

没定义values属性，选中按钮提交默认为:on,而不是空字符串。

option没指定value属性，被选中则提交的是<option>的文本，而不是on或空字符串

表单域名字问题：

服务器目录以"/"开头

CSS3.0:层叠样式表（带px）

1. 三种引用方式：就近原则，按顺序执行，一般先使用最后定义的样式(相同的样式，作用于同一个标签上)

1.内联方式：直接写在html里面 <th style="background-color:red;">1</th>

2.嵌入样式：<style type="text/css">

table{ //对所有table,加样式 table是选择器

border-collapse: collapse

} </style>

3.外部引入 .css文件

2.块级元素(切分成多个块)

<div style="width:500px;border:solid"></div> //列级元素 border:solid 实线边框

<span ></span> //行级元素，切分行

控制隐藏效果:

display:none|block; //不占空间

visibility: hidden|visible; //保留空间

3.id选择器（id选择器优先级 > 类选择器优先级 > 标签选择器优先级）

#div01{ 不可重复

background-color: aqua;

}

2. 元素选择器

div{ //对所有div作用

height: 100;

}

3.类选择器

.divClass{ //对所有class为divClass起作用

height: 100;

}

4.元素选择器

div[class]{ //作用所有带class的属性 div[class^=div] 包含div div[class$=ss] 以ss结尾

background-color:pink;

}

div h2{ height:200px;} 只要div内包含h2，就起作用

子包含选择器： div>h2{ height:200px; } 选择div下第一个元素起作用

#div01,.divclass{ height:200px; } 对div和类divclass起作用

鼠标移动到哪一个div就会改变。

a{ text-decoration: none; } //全网页超链接无下划线

3.行级元素(一般用于显示提示信息)

4.定位：

z-index：1 可以修改图片的位置，值越大，越靠上层。层次样式的体现

position: absolute; 绝对定位只相对于浏览器左上角而言

position: relative; 相对定位相对于上一个div的位置而言

#img02{

position: relative;

top: 120px;

left: 110px;

z-index: 2;

}

float:right 也可以达到放在右边的效果

5.padding：内边距

margin:外边距

border: 边框

盒子模型相关的属性(上右下左)：内容(content)、填充(padding)、边框(border)、边界(margin)

两个元素之间相邻左maigin 10 向右10对于div相距10 对于其他是20

background-position:-5px 10px 向左偏移5px，向下偏移10px xy坐标系

列表的项目符号为实心矩形type: square

文本对齐属性的取值:justify、center、right、left

6..表单实际上包含两个重要组成部分：一是描述表单信息的__web页

二是用于处理表单数据的服务器端___表单处理程序 ___。

7.能够建立网页交互性的脚本语言有两种，一种是只在服务器_端运行的语言，另一种在网上经常使用的语言是客户端语言

8.脚本语言：Web服务器直接把用脚本语言编写的未经编译的程序源代码发送到浏览器端，由浏览器负责解析、编译和执行。

9.web服务器架构采用SOAP(简单对象访问协议)通讯，规定客户与服务器之间一律用xml进行传输数据。

10.Tomcat作为运行Servlet的容器，基本功能是接收与解析来自客户的请求，同时把客户的请求传送给相应的Servlet,

并把Servlet的相应结果返回给客户。

11.jsp提示http://blog.csdn.net/cpp_lzth/article/details/6830463

12.隐藏：

style="display:none;" 隐藏并让出位置

style="visibility:hidden;" 隐藏，但仍占着位置

0 0