HTML笔记
2016-12-05 20:59
183 查看
建议:(xhtml)
1.编写html代码的时候所有的标签都小写.
2.标签有开始,就必须有结束标签.除非该标签是自关闭的标签.
3.所有的标签,如果有属性,那么属性的值一定要是用双引号引起来.
<!--
我是注释你懂吗?!
使用html标签的时候要因为想改变外观而使用html标签(改变外观使用css),而要根据语义来使用对应的html标签.
-->
特殊字符:<!---------------------------------------------------------------------------------------------------->
<(less than) : <
>(greater than) : >
© : ©
® : ®
空格 :
转义 : &
段落与文字标签:<!---------------------------------------------------------------------------------------------------->
<br/>换行
<hr/>水平线
<h1>标题</h1>
<h6>标题</h6>
<p>自然段上下空行</p>
<b>加粗</b>
<u>下划线</u>
<i>斜体</i>
<strong>强调加粗</strong>
<em>强调斜体</em>
<cite>强调斜体</cite>
<q>双引号</q>
<pre>预格式话 保留源代码空格</pre>
<center>显示居中</center>
<font color="red" size="7" face="楷体">字体标签</font>
上标:10<sup>2</sup>
下标:H<sub>2</sub>O
<marquee>环绕
<direction>滚动方向
<div></div>块元素
<span></span>行内元素
超链接标签: <!---------------------------------------------------------------------------------------------------->
URL:表示资源在网络中的地址(资源定位符)
URI:概念比URL大(源标识符)
相对路径: 谓相对路径，就是相对于自己的目标文件位置
绝对路径: 文件的完整路径。
<a href="链接地址" title="鼠标停在这里就会显示我" target="_self"></a>
target属性:
_blank:在新窗口中打开
_self:在自己的窗口中打开
<a href="测试连接1.htm">点击跳转测试连接1</a> "mailto:邮件地址"
<a href="../父目录测试连接1.htm">点击跳转父目录测试连接1</a>
<a href="../../../../父目录测试连接1.htm">点击跳转父目录测试连接1</a>
<a href="http://www.firefox.com.cn/"><img src="火狐官网.png"></a>
锚点链接:<!---------------------------------------------------------------------------------------------------->
设置描点:<a name="zt"></a>
点击锚点:<a href="#zt">回到描点zt的位子</a>
图像标签:<!---------------------------------------------------------------------------------------------------->
<img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
<img src = "QQ秀.jpg" alt="破图时显示的文字" title="鼠标停留显示文字">
设置图片大小(没有意思,因为即便是图片小了,但是实际图片大小没有变)
如果需要小图片可以通过--编辑--重新调整大小
修改图片格式不能直接修改后缀名,要另存为--修改图片格式
<img width="200" height="200" src = "QQ秀.jpg" alt="破图时显示的文字" title="鼠标停留显示文字">
px:和分辨率有关
em:相对长度单位.相对于当前对象内文本的字体尺寸.height:10em代表高是字体大小的10倍
<div style="border:1px solid red; height:10em">你好,我是em</div>
三种列表:<!---------------------------------------------------------------------------------------------------->
无序列表
<ul>
<li>春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
有序列表
<ol>
<li>听到闹钟</li>
<li>真开眼睛</li>
<li>再睡一会</li>
<li>等待闹钟</li>
<li>睁开眼睛</li>
</ol>
表格:<!---------------------------------------------------------------------------------------------------->
<!--
<table>属性:
cellspacing:单元格间距
cellpadding:单元格边距
-->
<!--
<tr>和<td>属性:
水平对齐方式: align:left,right,center
垂直对齐方式: valign:top,bottom,middle
-->
<!--
<td>属性:
rowspan:跨行
colspan:跨列
-->
<table border="1" height="300" width="350" cellspacing="20" cellpadding="50" align=center>
<tr>
<td colspan="2" align = center>头像</td>
<td rowspan="2" valign = top>网名</td>
<td rowspan="2" valign = top>蓝莲花</td>
</tr>
<tr>
<td>昵称</td>
<td>签名</td>
</tr>
</table>
表单:<!---------------------------------------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--
name="keywords" content="网站关键词,有利于搜索引擎搜索"
name="description" content="关于网页的基本描述信息"
http-equiv="Content-Type" content="text/html指定网页编码
http-equiv="Refresh" content="3;url=http://www.baidu.com" 3秒钟后重定向到新网页
-->
<title>表单</title>
</head>
<body>
<!--
--id属性的目的主要是为了在客户端,可以通过javascript语言来操作某个元素.
所有元素都可以有id,并且每个元素的id不可以重复.
只有表单元素可以有name,并且name是可以重复的.
--name属性的目的是为了可以将数据提交到服务器.
只有表单元素才可以有那么,并且那么是可以重复的.
表单提交其实就是提交的表单元素,value中的内容
get方式提交:是把数据封装成了通过&连接起来的键值对的方式,通过浏览器地址栏,提交到服务器的.
因为请求的地址的长度是有限的,所以不能通过get方式上传文件.
因为get提交的数据会直接显示在url地址栏中,所以相对不安全.
post方式提交:
默认情况下post提交方式也是使用&把键值对连接起来.同时提交的内容没有在url中显示,相对安全.post可以上传文件.
-->
<form name="usertable" action="server.htm" method="get">
<!--
name=表单名称
action=提交地址
method=提交方式(get|post)
-->
<input name="user_id" type="hidden" value="1001"/>
<!--
影藏域:type="hidden"
value=默认值(提交数据,与name组成键值对)
-->
<table border="1">
<tr>
<td>姓名:</td>
<td><input maxlength="5" name="txtNmame" type="text" value="张三"/></td>
<!--
文本输入框:type="text"
-->
</tr>
<tr>
<td>邮箱:</td>
<td><input disabled="disabled" name="txtEmail" type="text" value="84000508@qq.com"/></td>
<!--
禁止输入:disabled="disabled"
-->
</tr>
<tr>
<td>密码:</td>
<td><input name="txtPassword" type="password"/></td>
<!--
密码输入框:type="password"
-->
</tr>
<tr>
<td>确认密码:</td>
<td><input name="txtConfirmPassword" type="password"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input id="rdoMale" name="gender" type="radio" value="male"><label for="rdoMale">男
<input id="rdoFemale" checked="checked" name="gender" type="radio" value="female"><label for="rdoFemale">女</td>
<!--
单选:type="radio"
区域点击:label for=name值
默认选中:checked="checked"
-->
</tr>
4000
<tr>
<td>兴趣爱好:</td>
<td>
<input checked="checked" name="hobby" type="checkbox" value="1">篮球
<input checked="checked" name="hobby" type="checkbox" value="2">足球
<input name="hobby" type="checkbox" value="3">网球
<input name="hobby" type="checkbox" value="4">吃
<input name="hobby" type="checkbox" value="5">睡
<!--
复选框:type="checkbox"
-->
</td>
</tr>
<tr>
<td>所在地区:</td>
<td>
省:
<select name="province" multiple="multiple" size="8">
<option selected="selected" value="11">黑龙江</option>
<option selected="selected"value="12">吉林</option>
<option value="13">辽宁</option>
<option value="14">河北</option>
</select>
<!--
下拉菜单:<select>
<option>内容1</option>
<option>内容2</option>
</select>
默认选中:selected="selected"
设置下拉菜单显示5条:multiple="multiple" size="5"
-->
市:
<select>
<optgroup label="湖北省">
<option value="101">襄阳</option>
<option value="102">武汉</option>
</optgroup>
<optgroup label="吉林">
<option value="103">长春</option>
</optgroup>
<optgroup label="辽宁">
<option value="104">大连</option>
</optgroup>
<optgroup checked="checked" label="河北">
<option value="105">石家庄</option>
<option value="106">保定</option>
</optgroup>
</select>
<!--
下拉菜单分组:<select>
<optgroup label="黑龙江">
<option>襄阳</option>
<option>武汉</option>
</optgroup>
</select>
-->
</td>
</tr>
<tr>
<td colspan="2" style="height:100px">
<fieldset>
<legend>请选择你感兴趣的内容:<legend>
<input name=hobby type=checkbox value="1"/>操作系统
<input name=hobby type=checkbox value="2"/>网络
<input name=hobby type=checkbox value="3"/>数据库
<input name=hobby type=checkbox value="4"/>web开发
<input name=hobby type=checkbox value="1"/>移动开发
</fieldset>
<!-- 字段集(打包圈起来)
<fieldset>
<legend>标题<legend>
<input type=checkbox />操作系统
<input type=checkbox />网络
<input type=checkbox />数据库
<input type=checkbox />web开发
<input type=checkbox />移动开发
...需要圈起来的内容
</fieldset>
-->
</td>
</tr>
<tr>
<td colspan="2">
<legend>请仔细阅读协议:</legend>
<textarea cols="30" rows="10" readonly="readonly">
1.接受条约欢迎光临中国雅虎。中国雅虎根据一下服务条约为您提供服务......
</textarea>
<!--
<textarea cols="30" rows="10" readonly="readonly"></textarea>
多行文本输入框
-->
</td>
</tr>
<tr>
<td>请选择头像</td>
<td>
<input type="file"/>
<!--
文件域:type="file"
-->
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册"/>
<!--
提交按钮:type="submit"
-->
<input type="reset" value="重置"/>
<!--
重置按钮:type="reset"
-->
<input type="button" value="这是我的一个按钮"/>
<!--
普通按钮:type="button"
-->
<input type="image" src="按钮.gif"/>
<!--
图片按钮:type="image"
-->
</td>
</tr>
</table>
<image src="QQ秀.jpg">
<embed src="杨坤-空城.mp3" width="300" height="40"/>
<!--
<embed src="杨坤-空城.mp3" width="300" height="40"/>
音乐播放器,需要设置长宽
-->
</form>
</body>
</html>
div:块级元素,独占一行,放什么都可以,
span:内联元素inLine,把一段内容定义成一个整体进行操作,但不音响布局,显示两端没有换行,
<!----------------------------------------------------------------------------------------------------------------------------->
CSS(层叠演示表,Cascading Style Sheets):
HTML、CSS和JavaScript的关系: <"HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为">
1.内嵌样式表(通常定义在<head></head>标签之间):
<style type="text/css">
选择器 {
属性: 值;
}
</style>
2.行内样式表(一般不建议使用,破坏了页面内容与表现分离原则): <p style="属性: 值;">内容</p>
<h1 style="color:red; font-size: 12px;">传智播客-前端与移动的开发学院的CSS基础视频教程</h1>
3.外部样式表(建议使用满足了页面与表现分离原则): <link rel="stylesheet" type="text/css" href="css.css" />
href="css.css"指css的相对路径
1.标签选择器: p{} 当页面中某种标签都具有相同的样式时就使用标签选择器
2.通用选择器: *{} 所有标签元素,优先级高于继承的样式,会覆盖继承的样式.通常使用通配符选择器定义css样式,清楚html标记的默认边距
* {
margin:0;
padding:0;
}
3.ID选择器: #demo_1{} ID选择器是可以帮助我们选择当前页面中唯一id值的标签,也就是根据标签的id属性进行选取设置样式.ID选择器的符号是#号.
ID选择器命名规范
1:只允许出现字母(大小写严格区分),下划线,数字
2:不允许出现标签名(硬性规定)
4.类选择器: .demo{} 当页面中部分标签具有相同的样式时
ID选择机与Class选择器的区别
1.相同的Class属性值,可以在HTML中出现多次.ID属性值在页面中只能出现依次.
2.一个Class的属性可以多个值,也就是说一个标签可以有多个类
<!--
建议尽量使用类选择器.使用ID时候情况:当确定唯一确定当前页面中标签只能出现一次,这个时候可以使用ID选择器.
如果不能保证相同的作用的标签在页面中只能出现一次,那么这时候就选择使用类选择器.
-->
复合选择器:
5.后代选择器: E1 E2{} 选择所有被E1包含的E2(包含儿子孙子)
6.子选择器: E1>E2{} 选择所有作为E1亲儿子对象的E2(只包含儿子)
7.组合选择器: E1,E2...{} 包含E1,E2...用逗号隔开
8.伪类选择器(控制状态):
a:link{} 没有被访问a标签样式属性
a:hover{} 当鼠标悬停时a标签样式属性
a:visited{} 被访问过的a标签样式属性
a:active{} 被点击时的a标签样式属性
a:focus{} 获得焦点时a标签样式属性
9.伪元素(控制内容):
.text:first-line 只能用于块级标签
.text:first-letter 只能用于块级标签
span:first-child 选择属于第一个子元素的所有算盘标签
.text:before {content:"-----"} 设置元素之前的内容
.text:after {content:"-----"} 设置元素之后的内容
.text:after {content:"-----";dispaly: block} 设置元素之后的内容,并且此内容转换成块级元素
<!----------------------------------------------------------------------------------------------------------------------------->
优先级:
行内样式 > 内嵌样式 > 外部样式
行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > body继承 > 默认
<!----------------------------------------------------------------------------------------------------------------------------->
Dispaly改变标签显示模式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dispaly改变标签显示模式</title>
<style type="text/css">
div {
background-color: silver;
display: inline;/*可以让元素变成行内模式的标签*/
}
strong {
background-color: red;
display: block;/*可以让元素变成块级标签*/
}
s {
background-color: yellow;
display: none;/*直接把当前标签从页面中直接移除了,不影响页面的布局*/
visibility: hidden;/*这个只是不显示,但还是占用页面的空间*/
}
</style>
</head>
<body>
<!-- 行内标签 -->
<span>我是span</span>
<!-- 行内标签 -->
<s>我是s标签</s>
<!-- 块级标签 -->
<div>我是div</div>
<!-- 行内标签 -->
<strong>我是strong标签</strong>
</body>
</html>
宽高 边距 独占行
行内元素: 没有 左右边距 不独占
块级元素: 有 上下左右 独占
行内块元素: 有 左右 不独占
注意:行内元素不能设置宽高,只能通过他的内容来撑开他的宽度和高度.如果你设置了宽高是不会影响行内元素的显示的.
<!----------------------------------------------------------------------------------------------------------------------------->
CSS书写顺序: <"1.布局定位属性 2.自身属性 3.文本属性 4.其他属性">
长度单位: 相对单位: px, em font-size:12px;
字体属性(多个字体用逗号隔开): font-family:"微软雅黑";
字体系列(非衬线体,放在字体最后): font-family:"微软雅黑,sans-serif";
字体粗细(设置字体不需要单位100~900,100的整数倍): font-weight:700;
字体风格: font-style:italic;(使用文字本身的斜体样式显示)
font-style:oblique;(让文字进行倾斜显示)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
p {
font-size: 20px;
font-weight: 700;
font-style: oblique;
font-family: "微软雅黑";
}
/*font字体的合写*/
p {
/*font: 字体样式 字体是否加粗 字体大小 字体类型;*/
/*如果不需要设置的属性可以省略(默认去默认值),但是必须保留font-size和font-family,否则font属性将不起作用*/
/*淘宝的字体设置:font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;*/
font: oblique 700 20px "微软雅黑";
}
</style>
</head>
<body>
<p>
前面的字体都查找失败后,在系统中找一冲sans-serif字体作为默认字体.
注意顺序,如果把sans-serif放前面去,后面的都失效了.
</p>
<ul>
<li>设置字体的大小:20px</li>
<li>设置字体的加粗</li>
<li>设置字体倾斜显示</li>
<li>设置肢体累心是 微软雅黑</li>
</ul>
</body>
</html>
<!-- 行高概念 -->
字符间距: letter-spacing:10px;(字符与字符之间离10px距离)
单词间距: letter-spacing:20px;(单词与单词之间离20px距离,只对英文单词有影响,对中文字与字之间的距离没有影响,如果中文字之间有空格的话,会把空格设置成20px距离)
行距: 上行文本的底线到下行文本的顶线距离
行高: 文本顶部 + 文本底部 + 一倍行距
行高: SCC的定义,两行文本之间的基线的距离,就是行高.
两条基线的距离: 一倍的行距 + 文本顶部到文本基线 + 文本基线到文本的底部
font: 16px/1.5em "宋体"; 行高设置方式1(1.5em,分配方式16px+4px+4px):
line-height: 20px; 行高设置方式2
文本装饰:
text-decoration:underline; 下划线
text-decoration:line-through; 删除线
text-decoration:overline; 顶线
text-decoration:none 没有线
水平对齐:
text-align:left
text-align:right
text-align:center
首行缩进(只能设置块级元素):
p {
text-indent:2em;(段落空2个字符位子)
}
h1 {
text-indent:-9999;(移除标题,添加logo)
}
空白符处理:
white-space:normal; 正常显示,如果宽度不够进行折行显示.
white-space:nowrap; 即使超过盒子的宽度,文本也不进行换行显示
white-space:pre; 写html代码的时候是什么样式的,显示就显示成什么样式的
自动换行:
word-break:normal 使用浏览器默认的换行规则
word-break:break 允许在单词内换行
word-break:keep-all 只能在空格或连字符处换行
鼠标样式:
cursor:pointer;(手) wait;(等待)
<背景属性>: (background)
重复: background-repeat: no-repeat; 滚动: background-attachment:scroll;(滚动) fixed;(固定)
位置: background-position:left;(水平)top;(垂直); 简写方法: background:#000 url(..) repeat fixed left top;
<定位属性>: (Position)
定位: position: absolute; fixed;(固定定位) relative;(相对定位,可以做父元素的参照定位)
内容溢出: overflow:auto;(自动) hidden;(隐藏) visible;(可见) scroll;(显示滚动条) 浮动: float:left;
<区块属性>: (Block) normal;(正常)
缩进: text-indent: 2em; 字间距: letter-spacing:1em; 词间距: word-spacing:10px;
水平对齐: text-align:center; 垂直对齐: vertical-align:middle; 元素空格: white-space:pre;(保留)
水平居中: span{width:100px; margin:auto;} 垂直居中: span{display:table-cell; height:100px; vertical-align:middle;}
属性切换: display:block;(块状) inline;(行级) none;(隐藏标签元素) z-index:1;(覆盖顺序)
<方框属性>: (Box)
width:10px; height:10px; float:left; clear:both; margin:10px;(外边距) padding:10px;(内边距) 顺序: 上右下左
<边框属性>: (Border) none;(无)
border-style:solid;(实线) dashed;(虚线) 边框合并: border-collapse: collapse; 边框间距: border-spacing:5px;
<列表属性>: (List-style) none;(无)
类型: list-style-type:decimal;(1. 2.) disc;(● ●) circle;(○○) square;(■ ■) lower-roman;(i. ii.) upper-alph;(A. B.)
位置: list-style-position: outside;(外) inside; 列表图像list-style-image: url(..);
<!----------------------------------------------------------------------------------------------------------------------------->
盒子模型: 从第一层到第五层依次为：border、content+padding、background-image、background-color、margin
盒子之间的关系:
1:水平盒子:当两个盒子同行显示时,其距离为BOX1的margin-right和BOX2的margin-left之和
2:垂直盒子:当两个盒子在垂直显示时,其距离为BOX1的margin-bottom和BOX2的margin-top中较大者,而不是两者之和
3:重叠盒子:盒子重叠时,可以将其中的margin属性值设置为负数.
IE6盒模型BUG:
1:背景色不能穿透边框
2:盒子大小不一样
内边距padding:出现在内容区域的周围,当给元素添加背景色或者背景图片时,该元素的背景色或者图片也将出现在内边距中
边框border:
边框属性:
border-top-style 上边框样式 none(默认),solid单实线,dashed虚线,dotted点线,double双实线
border-top-width 上边框宽度
border-top-color 上边框颜色
border-left 左边框
border-right 右边框
border-bottom 洗边框
样式综合设置: border-style(上边 右边 下边 左边);
宽度综合设置: border-width(上边 右边 下边 左边);
颜色综合设置: border-color(上边 右边 下边 左边);
边框综合设置: border(宽度 样式 颜色);
去掉边框写法: border: 0 none;(兼容性最好)
.box{
/*四周内边距*/
/*padding: 20px;*
9c73
/
/*内边距分开写*/
/*padding-top: 20px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;*/
/*上 右 下 左*/
padding: 20px 5px 10px 5px;
border: 1px solid #09c;
width: 100px;
height: 100px;
/*内边距享有背景颜色*/
background-color: green;
}
/*三角形*/
.triangle {
width: 0px;
height: 0px;
border: 100px solid #FFFFFF;
border-top-color: green;
}
外边距margin:是该元素与相邻元素之间的距离
框架布局: <frameset cols="182,*"> <frame src="" id="" /> <frame src="" id="" /> </frameset>
清除浮动: 对于父元素的影响清除就是：width:100%;overflow:hidden; 对于自己临近的清除就是：clear：both;
DIV布局:
body{ margin:0; padding:0; font-family:"Microsoft YaHei",Arial, Helvetica, sans-serif;
font-size:14px; color:#666;background: #f5f4f9;}
ul,li,div,p,dl,dt,dd,img,h1,h2,h3,h4,h5,h6,form{ margin:0; padding:0;}
img{margin:0; padding:0; border:0; }
a{ color:#666; text-decoration:none;}
a:hover{ text-decoration:none; color:#ea2425;}
li{ list-style:none;}
.cl{overflow:hidden;zoom:1;}
ul{ list-style-type:none;}
input,select{ margin:0; padding:0; font-size:14px;font-family:"Microsoft YaHei",Arial, Helvetica, sans-serif;}
input{padding:0;margin:0;background:none;}
.fl{ float:left;}
.fr{ float:right;}
table th{ font-weight:normal;}
.tc{ text-align:center;}
.tr{ text-align:right;}
.main{ padding:30px 0 0; overflow:hidden;zoom:1;}
.clear{ clear:both; height:0; font-size:0; overflow:hidden;zoom:1;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 