首页 > 代码库 > HTML基础标签-S1
HTML基础标签-S1
S1----HTML
注释：<!-- sadfsfdg-->
大体结构:<html >
<head></head>
<body></body>
</html>
一、标签
1.标题标签-----<title></title>
2.段落标签-----</p></p>
3.标签等级-----<h1~6></h1~6>
4.换行--------<br/>
5.水平线标签------<hr/>
6.字体:
6.1加粗----<strong></strong>
6.2斜体-------<em></em>
6.3文本------<span></span>
7 .超链接-------<a href=http://www.mamicode.com/”路径” target=”窗口位置”></a>
7.1target的值有:self----默认，覆盖;blank----新建窗口;parent---在父窗口显示
8.图片标签-----<img src=http://www.mamicode.com/”路径” alt=”替代文本” title=”鼠标悬浮文本” width=”宽度” height=”高度”>
9.表格----<table></table>
9.1行标签----<tr></tr>
9.2列标签-----<td></td>
* 表头列----<th></th>
9.3 合并: 合并列：colspan 合并行:rowspan
9.4 边框:border
9.5 单元格对齐方式:
9.5.1水平对齐：align ----left/center/right
9.5.2 垂直对齐：valign---top/middle/botton/baseline(基线)
- 列表
10.1无序列表 <ul type=””><li></li></ul>
10.1.1 属性type: 为图形属性 disc--实心圆(默认) circle---空心圆 square--正方形
10.2 无序列表 <ol type=””><li></li></ol>
10.2.1 属性type: 1----1/2/3 A/a-------A/B/C/a/b/c I/i(罗马数字)--V/vii
10.3 自定义列表 <dl><dt>大标题<dd>内容</dd></dt></dl>
- 框架
11.1<framset></framset>----使用的时候无<body>
11.2<iframe></iframe>->内置属性
11.2.1 src=http://www.mamicode.com/”路径”
11.2.2 name=”标识名”
11.2.3 frameborder=”边框”
11.2.4 scorolling=”当溢出时是否有滚轮”---yes/no
11.2.5 width=”宽” height=”高”
- 表单
12.1 <form action=”路径+网页名称” method=”提交方式” ></form>
12.1.1 提交方式---get/post/-#---为空
12.2插入表单元素<input type=”表单元素类型” name=”控件名称” value=http://www.mamicode.com/”值”>
12.2.1 type的值
{
Radio-----单选按钮：如果有多个单选按钮，但是只选择一个，则name要相同
CheckBox--复选框 checked=”chencked” 单选按钮/复选框 默认被选中
Text-----文本框:可以通过Value给初始值 readonly---文本只读
PassWord----密码框 maxlength: 文本框/密码框 长度
按钮{
Submit------提交按钮
Button-----普通按钮
Reset---重置按钮
Disabled=”disable” 表示按钮可以用
}
Image--提交图片 src=http://www.mamicode.com/”图片地址”
}
12.3 特殊:
12.3.1下拉列表
<select>
<option selected=”selected”(默认选项)>列表选项</option>
<select>
12.3.2 文本域
<textarea name=”名称” rows=”行” cols=”每列字数”></textarea>
12.3.3 表单注释,点击“男/女”文字的时候 对焦按钮
id要和Label 中的for 一致 相当于绑定
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
二、特殊符号
2.1空格------
2.2 >---------->
2.3 <----------?
2.4 ’ ’----------&quet
2.5 @---------©
三、CSS
1.导入CSS样式表
<link href=http://www.mamicode.com/”路径” rel=”stylesheet” type=”text/css” />
2.普通选择器
2.1 标签选择器：标签名{xxx} --使用之后 所有的该标签都是这个样式
2.2类选择器：.类名 {xxx} --使用方法-> <span class=”类名”> 可多次调用
2.3 ID选择器: #id名{xxx} --使用方法-> <span id=”id名”> 只能使用一次
3.复合选择器
3.1后代选择器: 选择器1 选择器2 选择器3{xxx}
按照:选择器1>选择器2>选择器3 选择器3 才能使用
3.2交集选择器 同一范围内的同一个标签设置不同的样式
3.3并集选择器 多个不同的标签有相同的样式
选择器1，选择器2，选择器3{xxx}
四、CSS基本属性
4.1字体样式 font: style weight size family
4.1.1 字体类型:font-family 中文字体:”宋体”/英文:Arial
4.1.2 字体大小:font-size 单位:px
4.1.3 字体风格:font-style italic(斜体)/normal(正常)
4.1.4 字体粗细:font-weight bold(加粗)
4.2 text文本
4.2.1 颜色:color：#000FFF
4.2.2 水平对齐:text-align left/center/right
4.2.3 垂直对齐:vertical-align
4.2.4 首行缩进:text-indent 1px/1em(一个字符)
4.2.5 下划线:text-decoration over...(上划线)/under...(下划线)/line-through(删除线)
4.3 超链接伪类（a）
4.3.1 未点击前: a:link{xxx}
4.3.2 鼠标悬浮时: a:hover{xxx}
4.3.3 单击未释放: a:active{xxx}
4.3.4 单击后: a:visited{xxx}
4.4鼠标形状(cursor)
4.4.1手指:pointer
4.4.2 沙漏:wait
4.4.3 “?” :help
4.4.4 “I” : text
4.4.5 “+”:crosshair
4.5 边框(border)
4.5.1 粗细:border-width: 1px
4.5.2样式:border-style: solid-实线
4.5.3颜色:border-color:
五、盒子模型(div)
六、边距
6.1外边距--margin
6.2内边距--padding,改变盒子的大小
七、浮动 float -- 值为 left 和right 清除浮动为 clear:left/right/both
八、溢出处理:当在一个固定宽度和高度的盒子中，有内容超出，
8.1 overflow:-visable 溢出的内容会显示在盒子外面
-hidden 溢出的内容会隐藏
-scroll 会被修剪，但是有滚动条可以看到
-auto
九、网页定位（position）
9.1相对定位(relative)
9.2绝对定位(absolute)
十、单词
|
页面整体 |
html |
网页 |
|
head |
头部 |
|
|
title |
标题 |
|
|
body |
主体 |
|
|
块级标签 |
p |
段落 |
|
h1 |
标题文本 |
|
|
hr |
水平线 |
|
|
ul |
无序列表 |
|
|
ol |
有序列表 |
|
|
dl |
定义列表 |
|
|
div |
层 |
|
|
form |
表单 |
|
|
table |
表格 |
|
|
行级标签 |
a |
链接 |
|
img |
图像 |
|
|
span |
范围 |
|
|
strong |
加粗 |
|
|
input |
表单元素 |
|
|
button |
按钮 |
|
|
select |
下拉选择 |
|
|
textarea |
多行文本 |
|
|
背景 |
background-color |
背景色 |
|
background-image |
背景图 |
|
|
background-position |
背景偏移 |
|
|
background-repeat |
背景重复 |
|
|
文本 |
text-decoration |
文本修饰 |
|
color |
颜色 |
|
|
line-height |
行高 |
|
|
text-align |
水平对齐 |
|
|
字体 |
font-size |
字体大小 |
|
font-weight |
字体粗细 |
|
|
font-style |
字体风格 |
|
|
font-family |
字体类型 |
|
|
布局 |
margin |
外边距 |
|
padding |
内边距 |
|
|
border |
边框 |
|
|
width |
宽度 |
|
|
height |
高度 |
|
|
浮动 |
float |
浮动 |
|
clear |
清除 |
|
|
定位 |
position |
定位方式 |
|
absolute |
绝对定位 |
|
|
z-index |
顺序 |
|
|
top |
上 |
|
|
left |
左 |
|
|
right |
右 |
|
|
bottom |
下 |
|
|
overflow |
溢出 |
|
|
vertical-align |
垂直对齐 |
|
|
visibility |
可见度 |
|
|
display |
显示 |
|
|
表格 |
colspan |
跨列 |
|
rowspan |
跨行 |
|
|
列表 |
list-style |
列表样式 |
|
伪类样式 |
a:link |
未单击访问 |
|
a:visited |
单击访问后 |
|
|
a:hover |
鼠标悬停 |
|
|
a:active |
鼠标单击未释放 |
HTML基础标签-S1