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

HTML基础标签-S1

时间:2017-05-28 10:55:20      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:重置   list   字体大小   normal   str   cte   默认   color   lis   

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=”路径” target=”窗口位置”></a>

7.1target的值有:self----默认,覆盖;blank----新建窗口;parent---在父窗口显示

8.图片标签-----<img src=”路径” 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(基线)

  1. 列表

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>

  1. 框架

11.1<framset></framset>----使用的时候无<body>

11.2<iframe></iframe>->内置属性

11.2.1 src=”路径”

11.2.2 name=”标识名”

11.2.3 frameborder=”边框”

11.2.4 scorolling=”当溢出时是否有滚轮”---yes/no

11.2.5 width=”宽” height=”高”

  1. 表单

12.1 <form action=”路径+网页名称” method=”提交方式” ></form>

12.1.1 提交方式---get/post/-#---为空

12.2插入表单元素<input type=”表单元素类型” name=”控件名称” value=”值”>

12.2.1 type的值

{

 Radio-----单选按钮:如果有多个单选按钮,但是只选择一个,则name要相同

 CheckBox--复选框  checked=”chencked”  单选按钮/复选框 默认被选中
 Text-----文本框:可以通过Value给初始值  readonly---文本只读

 PassWord----密码框 maxlength:  文本框/密码框 长度

按钮{

  Submit------提交按钮  

  Button-----普通按钮

Reset---重置按钮

Disabled=”disable”  表示按钮可以用

}

 Image--提交图片  src=”图片地址”

}

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 @---------&copy

三、CSS

1.导入CSS样式表

<link href=”路径” 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

标签:重置   list   字体大小   normal   str   cte   默认   color   lis   

原文地址:http://www.cnblogs.com/Sora-L/p/6915090.html

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