HTML 入门

html

Hypertext Markup Language 超文本标记语言 是网页的标签

F5:刷新界面 F12:浏览界面 ctrl+s:保存 tab:缩进（尽量不要用空格键） ctrl+z：撤销/后退 shift+enter：
ctrl+r ：ps 调出标尺 f8：调出信息版面（尺寸） 空格+点击图：手行移动图 ctrl+D 取消选区

网页的基本结构：

网页标题 主体 ## HTML 标签

段落标签:

属性：【align】对齐方式 属性值：left/center/right 默认居左
标题标签： h1-h6 h1文字最大 h6文字最小 n可取最大值是6
属性：【align】对齐方式 默认居左 属性值：left/center/right
无序列表标签：

属性：type 设置项目符号类型 属性值：circle/disc/square
默认是 disc【实心圆】 ul
一层嵌套的ul项目符号是 circle【空心圆】
二层嵌套的ul项目符号是square【方块】
列表项标签：

基本格式:

• 列表项

有序列表标签：

属性：type 设置排序的方式 属性值：1/A/a/I/i start设置起始值 一定数字
默认：Type=“ 1” start=“1”
列表项标签：

基本格式:

1. 列表项

定义列表标签：

列表项标签：

基本格式:

列表项

描述项

超链接标签:
文字有默认的颜色，所以需单独设置其颜色，其他不设置的时候，就跟父级元素设置一样。
属性：href 设置链接路径/目标地址 href=“login.html”
属性：target 设置打开新界面的方式
target属性值是：_self [在当前界面中打开，原来的界面不存在了] 默认设置
_blank [在新的界面中打开，原来的界面还存在]
_top
_parent
表格标签:
属性：
Width: 设置表格的宽度
Height:设置表格的高度
cellpadding：设置文字距离单元格的距离
cellspacing：设置单元格与单元格之间的距离
background：设置table的背景图片
bordercolor：设置table边框颜色
bgcolor： 设置table的背景颜色
border： 设置table的边框的宽度
align： 设置table水平对齐方式
行标签:
属性：
align: 设置水平对齐方式 属性值：left/right/center
Valign：设置垂直对齐方式
属性值：top【上】/ bottom【下】/middle【垂直居中】
Bordercolor：设置行的边框颜色
Bgcolor： 设置行背景颜色
Height 设置行高
单元格标签:
属性：
background 设置单元格的背景图片
Bordercolor 设置单元格边框颜色
Bgcolor 设置单元格背景颜色
Align 设置单元格水平对齐方式
Valign 设置单元格垂直对齐方式
Height 设置单元格的高度
Width 设置单元格的宽度
Rowspan 合并单元格垂直跨度 合并行
Colspan 合并单元格水平跨度 合并列
表格头部标签:
图标标签:
属性：src=”图片的链接路径”
alt=”图片的替代文字”
border:图片的边框
width：图片的宽度
height：图片的高度
align: 设置图片对齐方式
属性值：middle设置居中，但是不起作用 left/middle/right
，page 页面
Homepage 主页
Website 网站
表单标签：
属性：action： 提交路径/位置
method 设置提交的方式 其属性有：get[获取数据]/post[传送数据]

1, text 文本框
Value 设置默认文本
2，password 密码输入框 Value 设置默认密码
3,radio 单选按钮 8
name 必须有的 分组
checked=“checked” 设置默认被选中
4, checkbox 复选框
name 可有可无 分组
checked=“checked” 设置默认被选中
5，file 文件域
6，submit 提交按钮 Value 设置按钮文字
7，reset 重置按钮 Value 设置按钮文字 默认的不能被清空
8，button 普通按钮 Value 设置按钮文字
9，image 图片域 src 设置图片域的图片路径
10 hidden 隐藏域 内容不显示
14，下拉菜单标签：
菜单项标签： selected=” selected” 设置默认值
15，文本域标签：
属性：cols 列（每行字数） rows 行
16,  空格 Enter+shift

17,水平线标签：

---

属性：color 设置水平线的颜色
Size 设置水平线的高度
Width 设置水平线的宽度
Align 设置水平线的对齐方式
18,1选择需要连接的文字或者图片
2，在属性栏里点击刷新按钮
3，在超连接的位置输入shift+3即可输入“#
4，点击代码页

html文档的注释方式
Css文档的注释方式 /--------注释内容-------/
四种选择器：
1>标签选择器
2>类别选择器 声明：.class_name 调用：
3>id选择器 声明：#id_name 调用：

伪类选择器 针对超级链接标签：
a:link 未访问状态(正常)
a:visited 访问过后
a:hover 鼠标滑过（鼠标经过）
a:active 点击的瞬间（鼠标按下去）
四种样式
1>行内样式：

文字内容

2>内部样式：

正文部分

3>外部样式

正文部分

4>导入样式 ## 样式的优先级 行内样式> 内嵌样式>外部样式>导入样式 ## 选择器的优先级 Id选择器>类别选择器>标签/标记选择器、伪类选择器 ## 文字属性 属性： 1>Color 文字颜色 #ff0000 红 #00ff00 绿色 #0000ff 蓝色 #000000 黑色 #ffffff 白色 #666666 灰色 2>Font-size 文字大小 3>Font-family 文字字体 4>Font-weight 文字粗细 num(100-900)/bold/bolder/lighter/normal（正常字体） 5>Font-style 文字样式 italic(斜)/normal(正常)/oblique(偏斜:居于斜和正常之间 的微斜) ## 段落属性 属性： 1> text-decoration 文字的修饰 属性值：none(无线)/over-line(上)/line-through(删除线)/ under-line(下划线) 2>text-indent 文字首行缩进 属性值：2em(首行缩进2个字符) 、20px 3>line-height 文字行高 属性值：150%、 30px; 4>text-align 文字的对齐方式 属性值：left/center/right/justify（两端对齐） 5>letter-spacing 文字间距 属性值：10px； ## 背景属性 属性： 1.Background-color 背景颜色 #ff0000红色 #0000ff 蓝色 #00ff00 绿色 #666666 灰色 #000000 黑色 #ffffff 白色 2.Background-image 背景图片 url("图片链接路径")； 3.Background-repeat 背景重复 属性值:repeat(默认) repeat-x水平方向平铺 repeat-y 垂直平铺 no-repeat 不平铺 4.Background-position 背景位置 1>文字设置 水平：left center right 垂直：top center bottom 2>数字+单位 水平：250px 垂直：250px 5.background-attachment 背景是否滚动 属性值：scroll（默认）滚动 fixed 固定 6.复合属性：background 复合以上5种属性 Background: red url("girl.jpg") no-repeat center top fixed 颜色 背景图片 重复 背景图片位置 是否滚动 ## 盒子模型

属性： Margin 外边距 Padding 内边距/内填充 Border 边框 Content 内容 盒模型中的宽和高：width height 1>margin:10px; 上下左右外边距都是10px Margin:10px 20px; 上下 左右 Margin：10px 20px 30px； 上 左右 下 Margin: 10px 20px 30px 40px; 上 右 下 左 Margin-top 上外边距 margin-left 左外边距 margin-bottom下外边距 margin-right 右外边距 2> Padding:10px; 上下左右内边距都是10px Padding:10px 20px; 上下 左右 Padding：10px 20px 30px； 上 左右 下 Padding: 10px 20px 30px 40px; 上 右 下 左 Padding-top 上内边距 Padding-left 左内边距 Padding-bottom下内边距 Padding-right 右内边距 3> Border 复合属性 （border-width border-color border-style）无顺序 Border-left-color 左边框颜色 Border-left-style 左边框样式 solid(实线)/dashed(虚线)/double(双实线) Border-left-width 左边框宽度 Border-left：2px solid #ff0000； Border-left-width Border-left-style Border-left-color Border-top 上边框 的复合属性 Border-bottom 下边框复合属性 Border-right 右边框复合属性 29,行内元素/行内标签 、 、 、、 、、 默认：display:inline; 特点：1，没有双边距 2，没有固定的宽高 3，能够在一行排列 4，行内元素可以嵌套行内元素，但是不能嵌套块级元素 块级元素

、、

---

、
、

、

、

、

、

、 、 、

、

、 **特点**：1,有双边距 2,有固定的宽、高。 3,不能和其他块级或者行内元素同住一行 4,能嵌套行内元素和块级元素 默认：display:block； ## 浮动属性 Float 属性值：left(向左浮动)/right(向右浮动)/none(默认) ## 清除浮动属性 **clear 属性值**：left(清除左浮动)/right(清除右浮动)/both(左右都清除浮动)/none(默认) overflow 设置内容溢出 属性值： 1>auto 自动(内容的高于容器的高度，会出现滚动条，反之，则正常显示，没有滚动条) 2>visible 显示（内容的高于容器的高度，不会出现滚动条，但是内容会正常显示出来） 3>hidden 隐藏(内容的高于容器的高度，多余的文本不会显示，直接隐藏) 4>scroll 滚动(内容的高于容器的高度,则会出现滚动条，不高于时，也出现滚动条，只是没有滑块。) **,框架集标签：** cols="value,value,......." 从左到右的框架集 Rows="value,value,......." 从上到下的框架集 **框架标签**： 属性：src 找对应框架显示的网页路径 **css的嵌套写法**：.main p a{ css结构体} **Css的集群写法**：.main,.left,.center,.right{ height:156px;} ,**css样式的优先级** 1>行内样式大于所有外部和内部样式 （相同属性的设置） 2>关于内部样式和外部样式：谁离标签近用谁的样式（相同属性的设置） 3>用同一种样式（行内、外部、内部）：谁离标签近，用谁的样式 例如：p{ color:red; color:green;}此时p标签的文字为绿色； 4>控制同一种样式：谁的范围详细，就用谁的样式 例如：

文字

div p{color:red; } div{color:green;} 此时p标签的文字颜色为：红色 **同一个标签同时调用2个类的格式为**：

文字

.aa{} .bb{}为声明的2个类的样式