本帖最后由 付付付付付 于 2018-5-3 15:31 编辑
HTML+CSS HTML
——概述
HTML(Hyper Text Markup Language) 超文本标记语言。
标记语言：通过一组标签形式描述事物的一门语言
超文本：比普通文本更强大
作用：制作页面（静态页面）
——语法
HTML文件后缀：.html/.htm
书写规则：
标签必须用<>引起来,成对出现(有开始有结束),各别例外
可以有属性。属性名="属性值"
不区分大小写
常见属性元素属性
class 元素类名 多个类名中间用空格分隔
id 元素唯一ID
style 元素样式
title 元素额外信息
color： 字体颜色
align： 对齐方式 left/right/center
width="" 宽,像素：1px 百分比：20%
height="" 高,同width属性
border="1px" 边框
background 背景颜色
颜色取值
1.#xxxxxx/#xxx(3个16进制数，RGB,光的三原色)
2.英文单词
路径写法
相对路径：
./ 或者 什么都不写 当前目录
../ 上一级目录
绝对路径：
以盘符开头的路径 d:/img/1.jpg
带协议的绝对路径 http://www.b.com
<!-- 注释内容 -->
//版本声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> //html4标准
<!doctype html> //html5标准
<html></html> //根标签
<head></head> //头标签
<title></title> //标题标签
<body></body> //体标签
<font></font> //字体标签
face="黑体"(字体样式)
size="(1-7字号)"
排版标签
<h1>...<h6> //标题标签
<p> //段落标签，前后空行
<hr/> //水平分隔线
<br/> //换行
<center> //内容居中显示
<b> //粗体
<i> //斜体
<u> //下划线
<img src="图片源"/> //图片标签
alt="" //图片找不到显示此内容
title="" //鼠标移上显示此内容
列表标签
<ol> //有序列表。默认1.2.3.
type="1" 默认。(a,A,i 罗马字符,I 大写罗马字符)
start="10" 从10开始
<li> //列表项
<ul> //无序列表。
type="disc" //默认，实心原点(circle空心原点，square实心正方形)
<li>
超链接。链接资源
<a></a>
href="" //默认指向当前文件目录
target="_self" //默认,当前页面打开
_blank 新页面打开
框架名 打开到指定框架显示
表格
<table> //表格
cellpadding 文字边距
cellspacing 单元格间距
<thead>
<tbody>
<tr> //行
<th> //表头单元格，加粗居中
<td> //单元格
colspan="" //占的列数，跨列合并
rowspan="" //占的行数，跨行合并
表单标签
<form>
action="url?name=chen" //指定提交路径并且get提交数据，不写默认提交到本页面
method="get|post" //提交方式，默认get，不只有这两种
get和post区别
get 数据显示在地址栏中。请求大小有限制
post 数据不会显示在地址栏中。请求大小无限制
<input /> 表单输入标签
type="text" //文本框 属性maxlength
password //密码框
radio //单选按钮，需指定value属性用于提交
checkbox //多选按钮，需指定value属性用于提交。如果name一样，会提交多个
button //普通按钮。无任何功能
reset //重置按钮。还原表单初始状态
submit //提交按钮。
file //文件框。value返回选择文件的路径
hidden //隐藏字段。页面上不显示，但会提交到服务器
image //图片提交按钮，图片作为按钮
src="图片路径"
name
必须有name属性才可以提交至服务器
可以将几个单选框(复选框)设置为一组，name属性相同即可
value="" //文本框默认值、按钮名称
size="" //文本框的长度
maxlength="" //输入的最大长度
disabled="disabled" //禁用此元素，不会提交
readonly="readonly" //只读文本框
<select name=""> //下拉框，需指定value属性用于提交
<option value="">
selected="selected" //默认选中此项
<textarea name="" cols="" rows="" > 文本域
提交至服务器内容格式
URL?key=value&key2=vlaue2&...
文本框、密码框、文本域 文本框内容直接传递过去
单选框、多选框 需设置value属性
下拉框 默认把选中的内容传至服务器，可设置value值传递指定值
默认值
文本框、密码框、文本域 设置value属性即可
单选框、多选框 的指定项添加属性checked="checked"
下拉框 的指定项添加selected="selected。默认第一个
//框架标签
<frameset> //框架集。与body标签冲突
rows="30%,*" //按行分，水平切割
cols="30%,*" //按列分，垂直切割
<frame src="显示的页面URL.html" /> //框架，具体实现
name="" //用于a标签 target属性 链接
//块标签，无含义，封装数据
<div> 封装整行，默认独占一行
<span> 封装行内，默认在同一行
HTML转义特殊字符
< < (less then)
> > (great then)
& &
空格
<<<DIV+CSS>>>
css概述:层叠样式表,
css用途:美化页面
css基本语法:
选择器{属性:属性值;属性:属性值...}
eg:h1{color:red; font-size:15px;}
引入的三种方法:
1.行内样式:直接在HTML的元素上使用style属性设置CSS
2.页面内样式:在html的<head>标签中使用<style>标签设置css
3.外部样式:单独建一个css文件,在HTML中引入
引入方法:<link href="css路径" rel="stylesheet" type="text/css" />
选择器:
元素选择器 //直接写元素名
id选择器 //使用"#"
类选择器 //使用"."
后代选择器 //使用空格
子元素选择器//使用">"
并列先择期: 选择器1,选择器2,选择器3{}
css浮动
使用float属性
值:left/right/none
css清除浮动
使用clear属性
值:left/right/both/none
css背景
background:通用属性
background-color:设置背景颜色
background-image:设置背景图
css文本
color:文本颜色
direction:文本方向
line-height:行高
text-align:对齐文本
text-decoration:添加修饰
text-shadow:文本阴影
css字体
font:通用属性
fint-family:字体系列
font-size:字体大小
font-style:字体风格
font-weight:字体粗细
列表:
list-style:通用属性
css盒子模型
margin:外边距
可以有四个属性值,依次代表上右下左
可以有两个属性值,分别代表上下和左右
可以有一个属性值:代表四个方向
margin-top:上
margin-bottom:下
margin-left:左
margin-right:右
passing:内边距
属性方式同margin一样
border:边框
css定位
position属性设置定位
relative:相对定位
absolute:绝对定位
使用定位后可使用left和头top属性
超链接的伪类
:link //未访问的链接
:visited //已访问的链接
:hover //鼠标移动的链接
:active //选定的链接
|
|
收藏
淘帖
踩
