首页 > 代码库 > html
html
html总结：
1、企业应用计算模式主要有：CS模式（客户端/服务器）和BS模式（浏览器/服务器模式）
2、html:超文本标记语言。以标记和子标记描述网页元素。
http：超文本传输协议。
3、网页以*.html作为后缀名。
网页以<html>作为根元素，该元素中包含<head>和<body>两个子元素。
<head>标记一般用于设置网页标题、设置网页编码、书写或导入样式、书写或导入JS等。
<body>标记用于描述网页内容。
4、<meta charset="utf-8">设置网页编码集
5、网页注释：<!-- -->
css注释：/* */
js注释：//单行 /* */多行
6、标题标记：<h1>~<h6>
段落标记<p>
无序列表：
<ul>
<li>第一选项</li>
<li>第二选项</li>
</ul>
有序列表：
<ol>
<li>第一选项</li>
<li>第二选项</li>
</ol>
7、在网页中有些符号必须以特殊的符号代替
空格：
小于：<
大于：>
8、超链接<a href="http://www.mamicode.com/……"></a>
href表示需要跳转的页面路径。相对于本网页而言，如果跳转页面和本网页在同一目录，则直接写文件名；
如果跳转页面在本网页所在目录的子目录下，则书写为html/aa.html。
如果跳转页面在本网页的上级目录，则书写为../aa.html。
9、图片：<img src="" width="" height=""> src属性链接图片路径。规则和超链接链接路径一样
10、表格<table>，<thead>表示表头，<tbody>表示表格内容。
11、框架网页iframe
<iframe src="http://www.mamicode.com/html/aa.html" width="x" height="x" name="main"></iframe> 其中src为框架网页链接路径，name为框架网页名称
<a href="http://www.mamicode.com/html/bb.html" target="main">显示</a> 点击超链接时，改变名称为main的框架网页内容。
12、块级元素和内嵌元素
块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。
常见的块级元素包括：div、blockquote、列表元素（dl、ol、ul）、fieldset、form、h1-h6、hr、p、pre、table等。
内嵌元素包括：span、a、img、label、所有的表单输入元素、iframe、object等。
13、表单<form action="" method="">
action表示表单提交的服务器URL地址
method表示提交方式。常用的是GET和POST。GET方式会在地址栏显示提交的表单数据，POST不会显示相对安全。
14、表单元素
<input type="text" name="userName" value="http://www.mamicode.com/aaa">文本框
<input type="password" name="pwd">密码框
<input type="radio" value="http://www.mamicode.com/1" name="sex">单选框，当name一致时，可以互斥。提交时，会将选中单选框的value值提交给服务器
<input type="checkbox" value="http://www.mamicode.com/1" name="like">复选框，提交时，会将选中单选框的value值提交给服务器。
<input type="hidden" name="id">隐藏表单，页面上不显示，但表单提交时，会将该表单数据提交给服务器。
<input type="file" name="face">文件表单，可以选择本地文件
<select name="edu">
<option value="http://www.mamicode.com/1">高中</option>
<option value="http://www.mamicode.com/2">大专</option>
</select>
下拉框，提交时，会将选中项option的value值提交给服务器
<textarea col="10" row="5"></textarea>多行文本框
<input type="submit"> 提交按钮，可以将表单数据提交给服务器
<input type="rest"> 重置按钮，将表单数据还原成初始值
<input type="image" src=""/>图片按钮，作用类似于submit。但可以将按钮做成图片方式
<input type="button"> 命令按钮，主要书写javascript事件
15、id和name的区别
id表示网页元素在网页中的唯一标识，不能重复，可以用于任何网页元素，它的值不会随表单提交给服务器
name一般用于表单元素，可以重复，它的值会随表单提交给服务器。
16、readonly和disabled的区别
readonly表示只读，只能用于文本框，不能修改内容，它的值可以随表单提交给服务器
disabled表示该元素不可用，不响应事件，不能修改内容。它的值不能随表单提交给服务器。
17、CSS层叠样式表，使用的方式有：
外部样式表：<link rel=“stylesheet” href=http://www.mamicode.com/“” />在 href中导入css文件路径。这种方式重用度好，可以用于多个网页
嵌入式样式表，可以在本网页中使用
<style type=“text/css”>
p{}
</style>
内联样式：<p style=“”></p>只能在当前元素中使用
层次的优先级别从大到小依次为：内联样式 》 嵌入样式表 》 外部样式表
18、CSS选择器规则：
元素选择器： p{} 表示所有的p标签均采用该样式
h1,h2{}表示h1标签和h2标签均采该样式
类选择器： .aa{} 定义类选择器，通过class="aa"将当前元素应用该选择器，可以用于多个元素。
id选择器： #mm{} 定义id选择器，表示id为mm的元素采用该样式，只能用于一个元素
包含选择器： div img{} 表示div元素下面所有的img子元素均采用该样式
通配选择器： #mydiv *{} 表示id为mydiv下面所有的子元素均采用该样式
伪类选择器： #data tr:hover{} 表示id为data的元素下面所有的tr子元素，在鼠标移上去时，采用该样式。
属性选择器： input[type=password]{}表示所有input标签中，type属性的值为password的元素，采用该样式。
优先级：
!important > id > class > element > 伪类 > *
19、在CSS盒模型中，我们可以控制四个不同的分层属性：
内容(content)：元素中的内容
外边距（Margin）：代表元素外边的空间，这个控件将元素相互分开。
边框（Border）：位于元素的边距内和元素的边框距外之间的可配置的线。
内边距（Padding）：元素内容和元素边框之间的空间。
盒模型均可以用“上右下左”方式设置。如果仅给出两个或三个值，那么缺失边的属性值取与对边相同的值
20、margin和padding
margin是和border的距离；padding是内容和border的距离
margin是对外的，padding是对内的
对于margin:
水平盒子的间距为两个盒子间距的和
垂直盒子的间距为两个盒子间距的较大值
21、盒子的浮动，float:left左漂移，将块级元素转化为内嵌元素。clear:left清除左漂移
22、定位属性
static静态定位。表示按照HTML格式规则正常定位：
relative相对定位。相对于元素原始位置进行偏移
absolute绝对定位，是指某元素将定位在已经定位的父元素框架或浏览器窗口本身的左上角绝对位置。
fixed固定定位。类似 absolute，不过其包含块是视窗本身
23、显示属性
在css中，有两个属性可以控制元素的显示和隐藏，即display属性和visibility属性
diplay=‘none‘，元素不会占空间
visibility=‘hidden‘元素会占用空间
html