html
2017-02-07 12:00:58 71 举报AI智能生成
作者其他创作
大纲/内容
网页样式
选择器
标签选择器
标签名{属性名：属性；属性名：属性}
类选择器
.标签名{属性名：属性；属性名：属性}
ID选择器
#id{属性名：属性；属性名：属性}
<h1 style="font-size:18px">行内式的使用方法</h1> 标签名，.类名，＃ID｛并集选择器｝
标签名.类名｛交集选择器｝
外部标签名 内部标签名｛后代选择器｝
引入CSS样式的方式
行内样式
嵌入样式
<head><style type="test/css"> h1{属性名：属性；}</style></head> 导入样式
<link href="样式文件名" type="text/css链接文件的格式" rel="stylesheet"文档的外部样式表/>
规定当前文档与被链接文档之间的关系，只有stylesheet被所有浏览器所适用
子主题
CSS的属性
类型
字体类型：font-family
字体渲染：text-shadow
字体大小：font-size
字体风格：font-style
oblique微斜
italic倾斜
字体粗细：font-weight
字体大写：font-variant
字体属性：font
font{风格 粗细 大小 类型}
文本修饰样式：text-decoration
下划线：underline
删除线：line-through
颜色：color
背景
背景颜色：background-color
背景图像：background-image
背景图片重复方式：bakground-repeat
背景图片X,Y轴起始位置：background-position
背景关联：background-attachment:fixed（背景不随着文字滚动）
区块
单词间距：word-spacing
字母间距：letter-spacing
垂直与文本对其方式：vertical-align,text-align
首行缩进：text-indent
显示方式：display
行高：line-height
盒子模型
定义宽高：width,height
内边距上下左右：padding-top,right,bottom,left
外边距上下左右：margin-top,right,bottom,left
margin:0px auto;网页居中
边框：border
边框风格：style；边框厚度：width；边框颜色上下左右
border-style:点dotted 实solid 双double 虚dashed;
display控制元素的显示与隐藏
display:block将元素显示为块级元素，前后设置换行
display:inline将元素显示为航迹元素，先后不换行
display:none将元素隐藏
浮动
float
clear清除浮动
both清除左右浮动
overflow盒子溢出处理
visible内容会被裁剪，被裁剪得内容出现在盒子外部
hidden内容会被裁剪，并且其余内容不可见
定位
position
velative相对定位
将出现在它所在的位置上，让这个元素“相对于”它的起点进行移动
absolute绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
z-index设置层次
列表
项目编号类型：list-style-type
项目编号图像：list-style-image
项目标记位置：list-style-position
inside标记显示在里面
onside标记显示在外面
超链接伪类
未单击访问时超链接样式 a:link
单击访问后超链接样式 a:visited
鼠标悬浮其上的超链接样式 a:hover
鼠标单击未释放的超链接样式 a:active
设置鼠标形状：cursor
默认光标：default
超链接的指针：pointer
span{cursor:pointer;}
指示程序正在忙：wait
指示可用的帮助：help
指示文本：text
标签及属性
<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 之间的文本是网页头部可见内容
<title> 与 </title> 之间的文本是网页标题
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 到 </h6> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
<br/> 换行 <hr/> 水平线
<em> 与 </em> <i> 与 </i>之间的文本为斜体
<strong> 与 </strong> 之间的文本被加重
<img/> 与 </img>HTML 图像是通过 <img> 标签进行定义的。
<img src="图片地址" width="宽度" height="长度"alt="用来为图像定义一串预备的可替换的文本"title="鼠标悬停出文字"/>
<a> 与 </a> HTML 链接是通过 <a> 标签进行定义的。
·······
锚链接（跳转到指定标签）：<a href="#name"></a><p name="name"></p>
特殊符号
空格
> 大于号
< 小于号
© 版权符号©
www.w3school.com.cn
<meta> 与 </meta> 定义编码格式
UTF-8，GB2312，GBK
<meta charset="UTF-8"></meta>
<link> 与 </link> 用于引入CSS样式
列表
<ul><li> 与 </li></ul> 无序列表
属性type：disc实心圆，square方块，circle空心圆
<ol><li> 与 </li></ol> 有序列表
属性type：1aAIi
<dl><dt><dd> 与 </dd>备注</dt></dl> 定义列表
<table> 与 </table> 表格标签，里面可以嵌套列表
<th> 与 </th> 定义表头
<tr> 与 </tr> 定义表格的行
<td> 与 </td> 定义表格的单元
<thead> 与 </thead> <tbody> 与 </tbody> <tfoot> 与 </tfoot>。。。
属性（水平对齐align：left左对齐，center居中，right右对齐；absmiddle图片居中对齐
垂直对齐valign：top顶端对齐，middle居中对齐，bottom底端对齐，baseline基线对齐）
垂直对齐valign：top顶端对齐，middle居中对齐，bottom底端对齐，baseline基线对齐）
<table border="1" cellspadding="单元格与内容的间距" cellspacing="单元格与单元格直接的间距‘’"></table>
水平合并colspan，列表合并rowspan
<frameset> 与 </frameset>(写在body外面)
属性（定义框架横向排序cols="200px,*,100px"纵向排序rows）
<frame src="其他网页地址" name="名字，方便跳转"/>
<iframe> 与 </iframe>
<form> 与 </form> 表单标签，里面可以嵌套表单元素
<form action="提交的网站" method="GET或者POST">
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
<input name="元素名称" type="类型" value="值" size="显示宽度" maxlength="字符长度" checked="是否选中" disabled="disabled禁用" readonly="readonly只读">
<input type="text"> 定义用于文本输入的单行输入字段
<input type="text" name="lastname">
<input type="password"> 定义密码框。
<input type="password" name="lastname">
<input type="radio"> 定义单选按钮。
<input type="radio" name="sex"（相同单选按钮的name要一致） value="female">Female
<input type="checkbox" name="复选框之间的name要一致"> 定义复选框。
<input type="submit"> 定义提交表单的按钮。
<input type="reset"> 定义重置表单的按钮。
<input type="button"> 定义表单的普通按钮。
<button type="button" onclick="alert('Hello World!')">Click Me!</button> <input type="file"> 定义文件选择框。
<input type="hidden">隐藏域
<select> 定义下拉列表<option> 定义待选择的选项</option></select>
<select name="cars" size="每次出现的长度">
<option value="volvo" selected = "selected"（默认选中）>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> 元素定义多行输入字段（文本域）</textarea>
<textarea name="message" rows="10" cols="30">
这是预定义的文本内容
</textarea>
<datalist> 元素规定预定义选项列表。<option value="预定义内容"></datalist>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<fieldset域><legend域标题>语义化表单</legend></fieldset>
0 条评论
下一页
