- html结构
基本结构：
<html>
<head>
<title>一个标题</title>
</head>
<body>
</body>
</html>
1.<html>标签：是HTML文档的根标签，页面中的所有内容都必须包含在<html>与</html>之间。
2.<head>标签：一个网页文档从总体上可以分为头和主体两部分。<head>和</head>定义HTML文档的头部部分，它包含标题，文件MIME类型，样式表，脚本等。
3.<title>标签：用于设置HTML标题。当使用浏览器查看页面时，在浏览器的标题栏中将显示<title>标签中的内容。
4.<body>标签：<body>与</body>标签定义了文档的主体部分，用于设置页面实际需要呈现给用户的内容，如文字，图片，视频等。
- Html常用标签
常⽤文本标签：
<hn>...</hn>标题标签，其中n为1–6的值。
<i>...</i>斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引⽤用）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线
常⻅见格式化标签如下：
<br/>换⾏行行
<p>...</p> 换段
<hr />⽔水平分割线
<ul>...</ul> ⽆无序列表
<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
<li>...</li>列表项
<dl>...</dl>自定义列表
<dt>...</dt>自定义列表头
<dd>...</dd> 自定义列表内容
<div>...</div> 常⽤用于组合块级元素，以便便通过 CSS 来对这些元素进⾏行行格式化
<span>...</span> 常⽤用于包含的⽂文本，您可以使⽤用 CSS 对它定义样式，或者使⽤JavaScript 对它进行操作。
HTML图像标签：
在HTML网页中插入一张图片，使用img标签，他是一个单标签：
其中img标签中常用属性如下：
- src： 图⽚名及url地址
- alt: 图⽚加载失败时的提示信息
- title：文字提示属性
- width：图片宽度
- height：图片⾼高度
- border：边框线粗细
HTML超链接标签：
超级链接标签a：
格式：<a href="链接⽬标url地址">显示⽂字</a>
a标签的属性：
href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）
锚点链接：
定义⼀个锚点：<a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
使⽤锚点：<a href="#a1">跳到a1处</a>
HTML表单标签：
<form>...</form> 表单标签
form标签常⽤属性：
action属性:提交的⽬标地址(URL)
method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。 <input>
表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。具体在下⾯有详解：
<input type="text" name="username">
type属性:表示表单项的类型：
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
email ⽤于应该包含 e-mail 地址的输⼊域
url ⽤于应该包含 URL 地址的输⼊域
number ⽤于应该包含数值的输⼊域。
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
⽇期选择器 Date pickers
date - 选取⽇、⽉、年
month - 选取⽉、年
week - 选取周和年
time - 选取时间（⼩时和分钟）
datetime - 选取时间、⽇、⽉、年（UTC 时间）
datetime-local - 选取时间、⽇、⽉、年（本地时间）
search ⽤于搜索域，⽐如站点搜索或 Google 搜索
color 颜⾊选择
name属性: 表单项名,⽤于存储内容值的
value属性: 输⼊的值(默认指定值)
placeholder: 预期值的简短的提示信息
size属性: 输⼊框的宽度值
maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
readonly属性: 对输⼊框只读属性
disabled属性: 禁⽤属性
checked属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)
src和alt是为图⽚按钮设置的
注意：
reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空。
image图⽚按钮，默认具有提交表单功能。
<select>...</select>
创建下拉列表。
name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选
<option>... </option>下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
value属性:下拉项的值
selected属性:默认下拉指定项.
<textarea>...</textarea>
多⾏的⽂本输⼊区域，有以下常用指令
name :定义名称,⽤于存储⽂本区域中的值。
cols ：规定⽂本区内可⻅的列数。
rows ：规定⽂本区内可⻅的⾏数。
disabled： 是否禁⽤
readonly： 只读
默认值是在两个标签之间
<button>...</button>
标签定义按钮。
您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
<fieldset>
fifieldset 元素可将表单内的相关元素分组。
disabled属性：定义 fieldset是否可⻅。
form属性： 定义该 fieldset 所属的⼀个或多个表单。
<legend></legend>标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。
<optgroup>
html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项。
全局属性：
accesskey属性规定激活元素的快捷键。accesskey="accesskey",
使用ALT+accesskey(shinft+alt+accesskey)来访问带有指定快捷键的元素。
2、id、class属性分别是为元素命名唯一id和类名。
3、tabindex属性
tabindex属性规定tab键控制次序(tab键用于导航时)，当按tab键时，元素聚焦的次序。tabindex="number"，"number"代表聚焦的次序。
4、hidden属性
hidden属性规定元素为隐藏，表示该元素不相关，为布尔值。
5、contenteditable属性
contenteditable属性规定元素内容是否可编辑的，"true"表示可编辑，"false"表示不能编辑。
Css的引入方法：
一、行内样式
别名：行间样式、内联样式
写法：在网页元素上通过style=""属性
二、内部样式表
写法：在网页创建嵌入的样式表，写在里面
三、链入外部样式表
写法：网页引入外部样式表，外部创建一个css文件，在html中通过连接这个css文件，一般写在css前面
四、导入外部样式表
写法：通过@import 引入，不建议开发使用
Css选择器：
1.元素选择器
语法 : 标签名{}
作用 : 选中对应标签中的内容
2.类选择器(class选择器)
语法 : .class属性值{}
作用 : 选中对应class属性值的元素
注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
3.id选择器
语法 : #id属性值{}
作用 : 选中对应id属性值的元素
注意 : id的属性值只能给1个,可以重复利用,不能以数字开头
4.通配符选择器
语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
5.群组选择器
语法 : 选择器1,选择器2,选择器3...{}
作用 : 同时选中对应选择器的元素
6.属性选择器：
属性选择器一共有7种写法
- 某某[属性]
- 某某[属性=属性值]
- 某某[属性^=属性值]
- 某某[属性$=属性值]
- 某某[属性*=属性值]
- 某某[属性~=属性值]
- 某某[属性|=属性值]
伪类选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
关于:nth-child()的特殊值(括号内的内容可以填写以下几种)
n 第n个 n的范围0到正无穷（全选）
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
以child结尾的是在所有元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 选中第n个元素
以type结尾的是在相同元素中选择
CSS的四种定位方式：
1.静态定位：
设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。
2.相对定位：
设置方式为position: relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后，相对定位的盒子是相对自己在标准流中的位置进行偏移，但是盒子在页面中占据的位置是不会改变的。
两个相对定位的盒子，默认的情况下第二个盒子层级比第一个盒子层级高，即第二个盒子可以覆盖第一个盒子，如果想让第一个盒子覆盖第二个盒子，可以通过设置z-index属性实现。
3.绝对定位：
设置方式为position: absolute;绝对定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后，绝对定位的盒子是相对设置了定位属性（静态定位不算）的最近的父级盒子的位置进行偏移，如果没有设置了定位的父级盒子，则是相对于body标签进行偏移。
绝对定位的盒子可以通过设置z-index属性改变层级。
4.固定定位：
设置方式为position: fixed;固定定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后，固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动，固定定位的盒子永远显示在浏览器窗口，不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。
固定定位的盒子可以通过设置z-index属性改变层级。
固定定位的盒子默认的宽高由其内容决定。
Css简单样式
字体属性：(font)
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
背景属性： (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/
区块属性： (Block) /*这个属性第一次认识，要多多研究*/
字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用，多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进 {text-indent: 数值px;}
垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/
盒子属性： (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color; /*简写*/
列表属性： (List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
