Web开发的前期学习HTML和CSS的标签总结

来源：互联网发布：淘宝返利是怎么回事编辑：程序博客网时间：2024/05/21 04:24

一、HTML文档主体结构

1. 文档声明标签

<!Doctype html>

2. 网页开始结束标签：

<html></html>

3. 网页头部标签:<head></head>

1) 网页标题标签：<title></title>

2) 网页汉字编码标签：<mate name=”UTF-8”>

3) 设置网页title图标标签：<link rel=”shortcut icon” href=”favicon.ico”/>

4) 将文档超链接设置为从新页面打开标签：<link target=”_blank’ />

5) 网页引入外部CSS样式标签（如：test.css）：<link rel=”stylesheet” type=”text/css”href=”” >

6) 网页引入外部JS文件标签（如： test.js）：<script src=”” type=”text/javascript”></script>

4. 网页主体标签：<body></body>

二、文本标签

1. 标题标签:<h1...6></h1...6>

2. 段落标签:<p></p>

3. 换行标签:<br/>

4. 预格式化标签:<pre></pre>

5. 水平线标签:<hr/>

6. 上标标签:<sup></sup>

7. 下标标签:<sub></sub>

8. 空格实体字符: 

9. 小于号实体字符:<

10. 大于号实体字符:&gt

11. &符号实体字符:&

12. 乘号实体字符:×

13. 除号实体字符:&dibide;

三、超链接标签

1. 普通超链接（写出链接属性、描述属性）:<a href=””></a>

2. 锚点超链接（写出实现步骤）创建锚点：<a name=”锚点名称”></a>链接锚点：<a href=”#锚点名称”></a>

不同页面的：<a href=”目标路径></a>”

四、图片标签(写出图片地址属性、图像替代文本属性)

五、列表标签

1. 有序列表标签

<ol>

</ol>

2. 无序列表标签

<ul>

</ul>

3. 自定义列表标签

<dl>

</dl>

六、表格标签

1. 表格标签（写出单元格间距属性、单元格边距属性）

2. 表格标题标签

3. 表格行标签

4. 表格单元格标签（写出行合并属性、列合并属性）

七、表单标签

1. 表单定义标签（写出表单提交地址属性、表单提交方式属性）

<formaction=”PHP路径” method=”get/post”enctype=”application/x-www-form-urlencoded(默认)”或multipart/form-data 上传图片用这个大文件></form>

2. 单行文本框

<input type=”text”name=”” size=”” maxlength=”控制输入字数” value=”值” placeholder=”提示语”

3. 密码框

4. 多行文本框

<textarea cols=”宽度” rows=”高度”> <label for=”名称”>可以跟文本框链接</label>

5. 单选框

6. 复选框

7. 下拉菜单

</select>

8. 浏览框

9. 隐藏域

10. 提交按钮

<button></button>(默认提交submit)

11. 重置按钮

12. 普通按钮

八、框架标签

1. 框架集标签（写出分行分列属性、框架边框属性）

</frameset>

<body></body><frameset></frameset>不能嵌套使用

2. 框架标签（写出框架名称属性、框架地址属性、大小调整属性、滚动条属性）

<a href=”...” target=”_self”></a>在当前页面打开

<a href=”” target=”_blank”></a>在新页面打开

<a href=”” target=”_top”></a>在整个页面打开

3. 内联框架标签（写出框架名称属性、框架地址属性、大小调整属性、滚动条属性、宽高属性）

CSS

一、字体属性

1. 字体设置 font

2. 字体大小 font-size

3. 字体风格 font-family

4. 字体加粗 font-weight

5. 字体简写属性font: stylesize/line-weight family

二、文本属性

1. 字符间距

letter-spacing

2. 单词间距

word-spacing

3. 文本修饰符

text-decoration:underline(下划线) overline(上划线)line-through(删除线)默认是：none

4. 文本水对齐方式

text-align:left/right/center

5. 文本行高

line-weight

6. 文本缩进

text-indent

7. 文本颜色

color

8.行标签转块

display=”inline-block”

三、背景属性

1. 背景颜色

background-color

2. 背景图片

background-image:url(路径)

3. 背景图片重复

background-repent:repent(重复),no-repent（不重复），

4. 背景图片位置

background-position：left/center/right 纵向：top/center/bottom；百分比/px

5. 背景图片固定

background-attachment:scroll(滚动)，fixed(固定)

6. 背景简写属性

background:颜色 url:（路径） no-repent

四、列表属性

1. 列表项目符号类型

list-style-type:none/disc(默认)/circle(圆)/square(正)/decimal()/lower-romun(罗马数)

2. 使用图片作列表项目符号

list-style-image

3. 列表项目符号位置

list-style-position:outside(外)/inside(内)

4. 列表项目符号简写属性

list-style：none inside

五、光标属性

cursor:crosshair(十字形)/pointer(小手形)/text(文本I形)/wait（等待)/default(默认指针)/help(帮助？形)/auto（自动形，按默认状态根据页面元素，自行改变样式）

六、边框属性

1. 边框样式

border-style:solid

2. 边框宽度

border-width

3. 边框颜色

border-color

4. 边框简写属性

border:width solid #000

七、内填充属性

1. 上下左右填充均为25px

padding:25px 25px

2. 上下填充为25px,左右填充为50px

padding:25px 50

3. 上填充为25px,左右填充为30px,下填充为50px

padding:25px 30px 50px

4. 上下左右填充分别为10px 20px 30px 40px

Padding: 10px 20px 30px 40px

八、外边距属性

1. 上下左右边距均为25px

margin:20px

2. 上下边距为25px,左右边距为50px

margin:25px 50px

3. 上边距为25px,左右边距填充为30px,下边距为50px

margin:25px 30px 50px

4. 上下左右边距分别为10px 20px 30px 40px

margin:10px 20px 30px 40px

九、定位属性（需举例说明四种定位的用法）

position:relative(相对定位)：相对于原位置定位，通过移动left/top进行移动支持负值，原来位置还保存

position:fixed（固定定位）:相对于文档的左上角（left/top）或者右下角来进行定位(right/bottom)

position:absolute(绝对定位)：相对于最近的那个脱离了标准流的父元素来定位，如果没有父元素就会根据当前视角左上角来定位，让出原空间位置，可以用top/left来定位

十、浮动属性（需举例说明浮动的特点）

float:none/left/right

浮动的框可以向左或者向右移动，直到它的边框碰到包含框或另一个浮动框的边框为止

无论是行内元素还是块元素只要设置了float属性，就可以用width,height设置宽高

十一、清除属性

clear:none/left/right/both（左右都清除浮动）

十二、堆叠属性

z-index:数字越大，离浏览者越近，只针对于脱离文档流元素

十三、可见性属性

visibility:hidden（隐藏某个元素）

十四、显示属性

display:none;可以隐藏某元素，而且隐藏的元素不会占任何空间

十五、溢出属性

overflow:visible(溢出默认)/hidden(隐藏)/scroll(出现滚动条)/auto(自动)

阅读全文

0 1