HTML知识汇总-CSDN博客

本文链接：https://blog.csdn.net/cyh518598/article/details/38277753
<html>
<head>
<title>笔记</title>
</head>
<body>
第二章：
<body>
作用：HTML主体定义
常用属性：bgcolor 背景色；background 背景图；link 链接颜色；text 文本颜色；vilink 已经链接颜色；alink 活动链接颜色；
leftmargin 左边距；topmargin 上边距。

<font>
作用：格式文本
常用属性：
face 字体；size 大小；color 颜色。

<h1><h2><h3><h4><h5><h6>
作用：标题字体
常用属性：
color 颜色；aline 水平对齐 （left，center，right）

<p>
作用：定义段落
常用属性：align对齐方式 ；class 类选择器（将一段样式定义成一个类，可多次重复调用，名称前用小圆点表示）；id ID选择器（用来识别网页的特殊部分，横幅、导航栏、版权等。名称前用#表示）；style 类型风格

<br />
作用：换行
常用属性：无

<hr />
作用：定义水平线
常用属性：
width 宽度；color 颜色；aline 对齐方式（左中右）；size 高度；noshade 水平线去掉阴影	

<pre>
作用：预格式
常用属性：无

<b>粗体 ；<i>斜体 ；<u>下划线 ；<sup>上标 ；<sub>下标 ；<tt>用等宽字体显示文本 ；<s>删除线。
<hr/>
第三章：
<img>
作用：插入图像标签
常用属性：src 指定图像具体位置；border 给图片加个边框；width 图像宽度；height 图像高度；aline 图像对齐方式（top顶、right右、bottom底、
left左、middle中间）；alt 提示文字属性；hspace 水平边距；vspace 垂直边距
<hr/>
第四章：
<a>
作用：定义超级链接和锚点
常用属性：
<a href=""></a> 文字链接；<a href=""><img src=""/><a/> 图像链接；<a name="1">1</a>  <a href="#1">1</a> 定义和锚点；
target 目标（blank 新窗口打开、parent 父窗口打开、_self 当前窗口打开、_top 顶端窗口打开）
<hr/>
第五章：
<ul>
作用：没有序号的符号来标志每个列表项
常用属性：
type 设置类型（disc ●、circle ○、square □）

<li>
作用：在三种列表内部的项目名称
常用属性：无

<ol>
作用：按数字或字母等顺序来排列列表项目
常用属性：
type 设置类型（1 数字、a 小写字母、A 大写字母、i 小写罗马数字、I 大写罗马数字）

<dl>
作用：两层次列表，用于解释名词定义，名词第一层，解释第二层，不含项目符号
常用属性：
<dt>名词一 ； <dd> 解释一
<hr/>
第六章：
<table>
作用：插入表格
常用属性：
width 表格边框宽度；height 表格边框高度；border 边框粗细宽度（bordercolor 边框颜色；bordercolorlight 亮边框颜色；bordercolordark 暗边框颜色）；aline 控制单元格文本方式对齐（left、center、right）；bagcolor 背景色；
background 背景图；cellspacing 单元格边距；cellpadding 单元格间距

<tr>
作用：表示行 
常用属性：align 表格行标签所包含文字内容的水平对齐方式（左中右）；
valign 表格行标签所包含文字内容的垂直对齐方式（top顶、middle居中、bottom底、baseline基线）

<td>表示列
<th>
作用：标签定义表格表头
<td>和<th>常用属性：colspan 列方向合并；rowspan 行方向合并；align 表格行标签所包含文字内容的水平对齐方式（左中右）；
valign 表格行标签所包含文字内容的垂直对齐方式（top顶、middle居中、bottom底、baseline基线）


<capion>定义表格标题（放在<table>和<tr>之间）
<hr/>
第七章：
<form>
作用：插入表单
常用属性：
id 表单的名称；name 表单的名称；method 定义表单结果从浏览器传送到服务器的方法（get（不安全）和post（比较安全）两种方法）；
action 定义表单处理程序（ASP、JSP、PHP等程序）；enctype 在发送到服务器之前应如何对表单数据进行编码；
target 设置表单显示目标

<input>
作用：文本域输入内容的表单对象
常用属性：
type 表单标签类型（值为text、password、checkbox、radio、submit、reset、button、file、hidden、image十大类）
name 文本域的名称；size 文本域宽度；maxlength 文本域能接受的最多输入字符数；value 设置初始默认值；id 文本域的id；checked="checked"默认勾选；

<select>
作用：下拉列表
常用属性：
size 定义下拉选择框行数；name 定义下拉选择框名称；multiple 默认一次只能选择一个选项，要允许多个就加上multiple属性；
option 定义下拉列表中的选项显示标签所包含的内容；value 定义选择项的值；selected 默认已选择本选项
<hr/>
第八章：
<frameset>
作用：定义一组框架的布局和属性
常用属性：
rows 绝对或相对宽度；cols 绝对或相对高度；border 边框粗细；bordercolor 边框颜色

<frame>
作用：框架属性
常用属性：
src 指定路径

<iframe>
作用：内联框架
常用属性：
src 当前框架所链接的页面地址；name 给框架命名，使用命名为链接中的target属性提供参数； width 框架宽度，单位像素；
height 框架高度，；align 水平对齐 ；frameborder 框架边框大小；marginwidth 框架边框与插入页面间左右边距；
marginheight 框架边框与插入页面间上下边距； scrolling 滚动条；noresize 框架大小不可变；bordercolor 边框颜色
<hr/>
第十章：
CSS样式由两个元素组成：选择器和声明块

CSS样式语法：
       选择器 ｛属性：取值；属性：取值；属性：取值，，，｝
CSS样式表：
      由多个css样式组成了样式表，分内部样式表和外部样式表：
内部样式表：
     放在<head></head>标签之间，用<style>标签包含
外部样式表：
用两种方式来链接外部样式表：
1.<link rel ="stylesheet" type="text/css" href=""/>
2.@import url(main.css);
<hr/>
第十一章：
CSS选择器：
1，标签选择器 例如 p{color：red；}
2，类选择器   例如 .red{color：red；}
3，ID选择器   例如 #red{color：red；}
4，群选择器  例如 p，.red，#red{color：red；}
5，通配符选择器 例如 *{color：red；}
6，派生选择器   例如 p a{color：red；}
7，选择器的继承：被包含在内部标签将拥有外部标签的样式
8，选择器的层叠：多个样式应用于一个网页对象时，该对象叠加了包含该网页对象元素的所有形式。
9，选择器的优先级：各种选择器都有一个权重值，根据该权重值的大小决定样式优先级
10，伪类： a：link 未访问链接 a:visited已访问链接 a:hover 鼠标滑过 a:active 鼠标点击时
<hr/>
第十二章：
font-family：设置字体集 ；取值 （系统字体color：文字颜色；取值：十六进制值，rgb值，颜色关键字）
font-size：修改字号；取值（数字固定单位 px等，字号关键字 x-large等，比例参数 %或em）
font-style：字体样式 ：取值（normal 正常，italic 斜体，oblique 倾斜体）
font-weight：字体粗细 ：取值（normal正常，bold粗体，bolder加粗体，lighter细体，数字）
<hr/>
第十三章：
background-color：背景颜色

background-image：背景图片

background-repeat：背景图片重复方式
1.no-repeat：只显示图片一次，不平铺或重复
2.repeat-x：水平方向平铺图片
3.repeat-y：垂直方向平铺图片
4.repeat：将背景图片从左到右、从上到下平铺，直到整个空间都被图片填满为止。

background-position：背景图片位置
1.top left 0% 0%  顶部左边位置
2.top center 50% 0%   顶部居中位置
3.top right 100% 0%   顶部右边位置
4.left center 0% 50%  左说边居中位置
5.center center 50% 50%   正中位置
6.right center 100% 50%   右边居中位置
7.bottom left  0% 100%    底部左边位置
8.bottom center 50% 100%  底部居中位置
9.bottom right  100% 100% 底部右边位置

background-attachment：背景附件
属性：scroll：背景图片会随着滚动条移动而移动
fixed：把图片固定在网页背景中的某个位置，不随滚动条移动而移动
<hr/>
第十四章：
word-spacing：调整单词间距

letter-spacing：调整字符间距

vertical-align：设置元素的内联标签垂直属性
1.baseline 将对象的内容与基线对齐
2.super 垂直对齐的上标
3.sub 下标
4.text-top 文本行顶端
5.text-bottom 文本行底端
6.top 将对象的内容与对象顶端对齐
7.bottom 底端
8.middle 垂直对齐属性居中对齐

text-align：文本的对齐方式（left、center、right、justify两端对齐）
<hr/>
第十五章：
border-style
常用属性：none 没有边框；dotted 点线式边框；dashed 破折线式边框；solid 直线式边框；double 双线式边框；groove 槽线式边框；ridge 脊线式边框；inset 内嵌效果的边框；outset 突起效果的边框
作用：设置边框样式

border-width
常用属性：thin 细边框；thick 粗边框；medium 中等边框，默认值
作用：设置边框宽度

border-color
常用属性：好多颜色属性
作用：设置边框颜色
<hr/>
第十六章：
内敛标签：
<ul>
<li>a 链接</li>
<li>br 换行</li>
<li>em 强调</li>
<li>font 字体</li>
<li>i 斜体</li>
<li>img 图片</li>
<li>input 输入框</li>
<li>lable 表格标签</li>
<li>select 项目选择</li>
<li>span 常用内敛容器</li>
<li>strong 粗体</li>
<li>sub 下标</li>
<li>sup 上标</li>
<li>textarea 文本区域</li>
<li>u 下划线</li>
<li>button 按钮</li>
<li>iframe 内敛框架</li>
</ul>
<hr/>

第十七章：
list-style-type
常用属性：disc 实心圆形点；circle 空心圆圈；spuare 正方形；decimal 十进制数字
作用：设置列表样式

第十八章：
position
常用属性：absolute 绝对定位，位置不会随网页大小而改变 fixed 按照浏览器的窗口而定 relative 相对定位，位置会随网页的大小改变而改变
          static 无定位，默认设置
作用：定位方式

overflow
常用属性：visible：增加层的大小，从而将层的所有内容显示出来 hidden：保持层的大小不变，将超出层的内容剪裁掉 scroll：总是显示滚动条 auto：只有在内容超出层的边界时才显示
滚动条
作用：层的溢出

第十九章：无
</body>
</html>