***定义字符编码:一般为UTF-8(年国际通用编码)
***响应式界面:可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局,可以兼容多个终端。
在webstorm中给代码加注释:ctrl+shift+/
***img 标签:单标签。
<img src="17.JPG" alt="xiezheng" width="1000px "/>
1.src:图片路径
2.alt:图片名称,描述或摘要。①鼠标放上去有提示②图片未加载出现文字代替
3.width,height:图片大小。①对有形状的图片尽量只给一个尺寸,另一个自动变(防止变形)②可以以百分比来确定
***a标签:超链接-实现一个页面到另一个页面的跳转
<a href="http://www.baidu.com" target="_blank">百度</a>
1.href:跳转的目标地址
2.target:目标窗口(-blank:在新窗口中打开 -parent:在原窗口中打开 不写默认原窗口)
3.标签中间写提示文字
***表单:
<form action="#"method="get" ></form>
1.form中间内容作为一个整体提交
2.action:提交的目标地址
3.method:提交方式(get/post)不写默认get。GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。get仅仅是获取资源信息,就像数据库查询一样,不会修改,增加数据。POST表示可能修改服务器上的资源的请求。GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中。(详解见hyddd博客)
***表单元素:p*6可以出现6个p标签
<form action="">
<p>用户名:<input type="text"/></p> 文本框
<p>密码:<input type="password"/></p> 密码框
<p>性别:<input type="radio" name="sex"/>男 单选框
<input type="radio" name="sex" checked/>女</p> 默认选框
<p>爱好:<input type="checkbox"/>吉他 复选框
<input type="checkbox"/>游泳
<input type="checkbox"/>轮滑</p>
<p> 其他:<textarea name="" id="" cols="30" rows="10"></textarea></p> 多行文本框
<p><input type="submit" value="提交"/> <input type="reset" value="重置"/></p> 按钮
<p>时间:<select name="" id="">
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
</select></p> 下拉选框
</p> 照片:<input type="file"/></p> 文件域
</form>
***换行标签:<br> 分隔线标签:<hr>
***css样式:
<title></title>
<style>
p{color:yellow} ②页面内样式
@import url(css.css); ③导入式
</style>
<link rel="stylesheet" href="css.css"/> ④ 链接式
</head>
<body>
<p style="color:green">cssssss</p>①行内样式:优先级最高
<p>sun</p>
<p>night</p>
***选择器:
<style>
p{color:red} ①标签选择器
.xx{color:green;} ②类选择器
#xxj{color:yellow;} ③ id选择器
</style>
</head>
<body>
<p>ffff</p>
<p class="xx">sun</p>
<p id="xxj">night</p>
④伪类选择器(超链接设置)
<style>
a{color:black} 代表四种状态
/*a:link{color:red}*/ 访问前
a:hover{color:green} 鼠标悬停
a:active{color:yellow} 点击激活
a:visited{color:darkgrey} 访问后
</style>
</head>
<body>
<a href="#">日月星辰</a>
⑤后代选择器:见下文无序列表后
background:url("../image/bg.gif")
***背景:url(地址)
repeat-x: 水平重复 left:水平左对齐
repeat-y: 垂直重复 bottom:垂直下对齐
no_repeat: 不重复
***<1>:倾斜<em>:倾斜 <b>:加粗
***去掉下划线:text-decoration:none
去掉下划线:text-decoration:underline
***三种列表:
<ul type="square"> --无序列表:Type属性值:
<li>sun</li> circle:空心圆 disc: 圆点
<li>sun</li> square: 正方形
<li>sun</li> 默认状态:disc: 圆点
</ul>
<ol type="a" start="3"> --有序列表-->
<li>hello </li> --type="编号样式" start="编号起始值"
<li>hello </li>
<li>hello </li></ol>
Type属性:
1 阿拉伯数字
a 英文小写
A 英文大写
i 罗马小写数字
I 罗马大写数字
<dl> --自定义列表
<dt>毛猪</dt> 一对:作解释
<dd>洋娃娃</dd>
</dl>
后代选择器:
.news li{
line-height: 30px; /*行高*/
list-style: none; /*去除列表默认的点*/
text-indent: 12px; /*首行缩进*/
border-bottom:dashed 1px #aaa;
***同页面跳转:
hello<a name="bottom"></a> 单击返回顶部跳转到hello
<p><a href="#bottom">返回顶部</a></p>
<a href="#di">news</a> 单击news跳转到di所在处
<a name="di"></a>
***表格:
<body>
<table border="2" width="30px" cellspacing="0" cellpadding="50px">
<thead>
<tr>
<th>rr</th>
<th>rr</th> 标题写在thead标签中,标题行用<th>
<th>rr</th></tr></thead>
<tr>
<td colspan="3">rr</td></tr> 合并列
</table>
***div:
div{
width:900px;
height:500px;
background:#E9FBFF url(../images/img1.jpg) no-repeat right bottom;
margin:100px auto; 边距(四边)
border:double 8px red;
color:purple;
padding:10px; 填充(四边)
一个:padding-left
两个:上下 左右
三个:上 左右 下
四个:上 右 下 左
Word-spacing:词与词间距
Letter-spacing:字母或汉字间距
position:absolute:绝对定位:参考点:浏览器左上角
relative:相对定位:参考点:它的父元素(有定位的父元素)
溢出隐藏:overflow:hidden
清空浮动:给空的div调用样式——clear:both