首页 > 代码库 > html基础
html基础
<标记 属性="属性值" 属性 = "属性值"> 内容 </标记>
开始标签（开放标签） 元素内容 结束标签（闭合标签）
空标记： <标记 属性 = "属性值" /> 最后要以"/"结束
标签可以拥有属性为元素提供更多的信息
属性以键值对的形式出现
通用属性： class 规定元素的类名，id规定元素的唯一id，style规定元素的样式， title规定元素的额外信息
target = "_self / _blank"
文本标题 （共分六级标题）
<h1>一级标题</h1> <h2>二级标题</h2> ...<h3>三级标题</h3>
段落 <p>段落文本内容</p>
空格 最后需要";"
加粗 <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 = "http://www.mamicode.com/目标文件的路径及全称"> 名称 </a>
文档内的链接
<a name="top">内容</a>
<a href="http://www.mamicode.com/#top">链接</a> 当点击链接时，会跳转至name属性的内容页面显示区域
图片 <img src = "http://www.mamicode.com/目标文件的路径及全称" />
weight,height,(当图片不能显示时，会将属性值的文本内容显示)
点击图片完成超链接 <a href = "http://www.mamicode.com/目标路径的路径及全称"> <img src = "http://www.mamicode.com/目标文件的路径及全称"></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="http://www.mamicode.com/默认值" />
<input type="password" />
<input type="button" value="http://www.mamicode.com/按钮内容" />
<input type="submit" value="http://www.mamicode.com/按钮内容">
<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 = "http://www.mamicode.com/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="http://www.mamicode.com/链接地址">链接名</a>
更改状态 ：a:link{color:颜色;} a:visited{color:颜色;}...分别改变不同状态时的颜色
text-decoration属性大多用于去掉链接的下划线
html基础