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

html基础

时间:2016-11-07 22:13:30      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:letter   添加   action   组合   作用   body   margin   self   name   

<标记 属性="属性值" 属性 = "属性值"> 内容 </标记>
开始标签(开放标签) 元素内容 结束标签(闭合标签)
空标记: <标记 属性 = "属性值" /> 最后要以"/"结束
标签可以拥有属性为元素提供更多的信息
属性以键值对的形式出现
通用属性: class 规定元素的类名,id规定元素的唯一id,style规定元素的样式, title规定元素的额外信息
target = "_self / _blank"
文本标题 (共分六级标题)
<h1>一级标题</h1> <h2>二级标题</h2> ...<h3>三级标题</h3>
段落 <p>段落文本内容</p>
空格 &nbsp; 最后需要";"
加粗 <b> </b> / <strong> </strong>(加重语气)
强制换行(空标记) <br />
倾斜 <i> </i> / <em> </em>(着重文字)
大号字 <big> </big> 小号字 <small> </small>
上标字 <sup> </sup> 下标字 <sub> </sub>
插入字 <ins> </ins> 删除字<del> </del>
标签:<style>:样式定义 <link>:资源引用
属性 rel="stylesheet" :外部样式表
type="text/css":引入文档类型
margin-left:边距
列表 :
无序列表 <ul type ="disc/circle/square"> <li> 列表项内容</li> <li> 列表项内容 </li>... </ul>
属性:disc 、 circle 、square 列表前标志
有序列表 <ol> <li> 列表项内容</li> <li> 列表项内容 </li>... </ol>
属性: A 、a 、I 、i 、start
自定义列表 <dl> <dt>名词<dt> <dd>名词解释</dd> <dt>名词<dt> <dd>名词解释</dd> ... </dl>
超链接 <a href = "目标文件的路径及全称"> 名称 </a>
文档内的链接
<a name="top">内容</a>
<a href="#top">链接</a> 当点击链接时,会跳转至name属性的内容页面显示区域
图片 <img src = "目标文件的路径及全称" />
weight,height,(当图片不能显示时,会将属性值的文本内容显示)
点击图片完成超链接 <a href = "目标路径的路径及全称"> <img src = "目标文件的路径及全称"></a>
水平线 <hr />
div元素也被称为块元素,主要是组合HTML元素的容器
<div id="" / class="" > </div>
文档区域,文档布局对象
span元素是内联元素,可作为文本的容器
<span> </span>
文本节点(某一小段文本或某一个字)
表格
<table weight = "#" height = "#" border = "#" align = "left/center/right" cellspacing = "单元格间距" bgcolor="背景颜色" background="背景图片" cellpadding="单元格边距" >
<caption>标题</caption>
<tr>
<th>表头</th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>

</table>
合并单元格属性
colspan="所要合并的单元格的列数..合并列";
rowspan="所要合并的单元格的行数..合并行";
表单:用来收集用户信息
<form name="表单名称" method="post/get" action="" >
<input type="text" value="默认值" />
<input type="password" />
<input type="button" value="按钮内容" />
<input type="submit" value="按钮内容">
<input type="checkbox">(复选框)
<input type="radio" name="sex">
<input type-"radio" name="sex"> (单选框,必须增加name属性且name属性值一致才能保证单选框的实现)
<select>
<option>下拉选内容</option>
<option>下拉选内容</option>
<option>下拉选内容</option>
</select>
</form>
<textarea rosl="3" cols="3"> 文本域提示内容</textarea>
、 <lable> 控制标签、 <filedset>定义域
<legend>域的标题 、 <select>选择列表、 <optgroup>选项组
<option>下拉列表的选项、 <button> 按钮

表单框form作为整体框架,其他的框架作为子框架必须嵌套在表单框内

块元素:块元素在显示时,通常会以新行开始 eg:<h1> <p> <ul>
内联元素:内联元素通常不会以新行开始 eg:<b> <a> <img>
布局:div布局、table布局
HTML框架标签(frame):框架对于页面的设计有着很大的作用
由于现在frame和frameset已被div+css取代,已过时
但是iframe标签仍然经常被使用
实体:HTML中预留字符串必须被替换成字符实体


CSS 汉译层叠样式表
样式表创建: 内部样式表
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
</style>
外部样式表
<link rel="stylesheet" type="text/css" href = "mystyle.css">
行内样式表(内联样式表)
<p style = "color:red">
创建内部样式表语法:
<style type = "text/css">
/*CSS语句*/
<style>
说明:用style元素来创建样式表时,必须将改标记写在文件头部<head></head>之间
CSS由选择器(选择符)和声明(属性和属性值)两部分组成
CSS语法: 选择符{属性 : 属性值;}
说明:属性和属性值之间用":"分隔,声明必须放在花括号内
一个选择符可以有多个属性,属性和属性之间用分号隔开
一个属性可以有多个属性值,属性值和属性值之间用空格分开
选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或制定名称的元素。
css中也可以继承:嵌套内层的标签如果没有定义自己的样式,则使用外层的样式,若是定义了自己的样式则使用自己定义的样式

常用选择符有:
类型选择符:语法:元素名称1,元素名称2{属性:属性值 ;属性:属性值}
ID选择符:
语法: #id名{属性 : 属性值;}
<div id = "top"> <p></p> <h1><h1> </div>
#top{weight:100px ; height:50px ...}
如果只想改变p标签的css样式,不改变h1标签,则可以在id后面空格+标签名
#top p{weight:100px ; height:50px ...}
id不能是关键字,一个id名称只能对应文档中一个具体的元素对象
最大用处:创建网页的外围结构
常和派生选择器组合使用
<p id="pid"> <strong>p标签</strong></p>
<h1> <strong>h1标签</strong></h1>
若是想为p标签内的strong标签增加样式:
#pid strong{
color:red;
}
class选择符:
语法:.class名{属性 : 属性值;}
<div class ="top"> </div>
.top{weight:1010px; height:200px ...}
用法:class选择符更适合定义一类样式
通配符:
群组选择符:
语法: 选择符1,选择符2,选择符3...{属性 :属性值}
包含选择符:
伪类选择符:
伪对象选择符
派生选择器:主要用于嵌套的标签内具体定义某一个标签的具体样式效果
<p> <strong>p标签</strong></p>
<h1> <strong>h1标签</strong></h1>
若是想为h1标签内的strong标签增加样式:
h1 strong{
color:red;
}
若是单独为strong标签增加效果
strong{color:blue} 但是增加此选择器不会更改h1内的strong的效果样式,只会更改p内strong的效果,因为h1内的strong标签已经单独实现样式效果们不会被覆盖
属性选择器/属性和值选择器
内部样式定义:
<style type="text/css">{
[title]{
color:red;
}
[title="ti"]{
color:bule;
}
}
<p title="ss">属性选择器</p>
<p title="ti">属性和值选择器</p>
css中若是为title指定具体的值那么只有当title的值相同时才能实现样式效果
css背景:css允许应用纯色作为背景,也允许使用背景图片作为背景。
background-attachment :背景图像是否固定或者随着页面的其他部分滚动
background-color :设置元素的背景颜色
background-image:url("图片名称 a.jpg") :设置图片为背景
background-position :设置背景图片的起始位置
background-repeat :设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
css文本:css文本属性可定义文本的外观,通过文本属性可改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进等
color:文本颜色 direction: 文本方向 line-height:行高
letter-spacing:字符间距 text-align:对齐元素中的文本
text-decoration:向文本添加修饰
css字体:css字体属性定义文本的字体系列、大小、加粗、风格和变形等
font-family:字体系列 font-size:字体尺寸 font-style:字体风格
font-variant:以小型大写字体或正常文本字体显示文本 font-weight:字体粗细
css链接的四种状态:
a:link: 普通的、未被访问的链接
a:visited: 用户已访问的链接
a:hover: 鼠标指针位于链接的上方
a:active: 链接被点击的时刻
<a href="链接地址">链接名</a>
更改状态 :a:link{color:颜色;} a:visited{color:颜色;}...分别改变不同状态时的颜色
text-decoration属性大多用于去掉链接的下划线

 

 

 

 

 

 



html基础

标签:letter   添加   action   组合   作用   body   margin   self   name   

原文地址:http://www.cnblogs.com/nordon-wang/p/6040766.html

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