html&css基础知识
***定义字符编码：一般为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
最新文章
- NodeJs之调试
- js--内容判断（依赖于jq）
- [未完成]plugin.xml文件
- 深入剖析Classloader(二)--根类加载器，扩展类加载器与系统类加载器
- jinja2 宏的简单使用总结(macro)
- jQuery 表单验证插件——Validation(基础)
- 一些iOS笔试题目
- 数据库元数据分析Demo
- linux java 和jmeter 环境变量配置文件笔记（原）
- npm run build 打包后，如何运行在本地查看效果（Nginx服务）
- Confluence 6 数据库 JDBC 驱动
- ext 的loadmask 与ajax的同步请求水火不容
- Objects源码解析
- Oracle 增加、修改、删除字段
- InstallShield卸载不彻底，残留大量dll文件
- Mac 配置多jdk 随意切换
- 解决 ArchLinux 下中文 Chinese 不能输入 couldnt input 的问题
- 数据库-mysql中文显示问题
- flask学习(四)：debug模式
- Java 构造器或构造方法