HTML
一、分为两大类 块级元素 与 行级元素
注释：
回车和空格相当于网页上一个空格
块级元素：（独占一行,自动换行）
<h1-6></h1-6>标题，加粗 <p></p>段落，不加粗
<div></div>给网页分块
<ul> 列表元素，ul、li在一起用
<li></li>
<li></li>
</ul>
<ol type="I">
<li>sdfa</li>
<li>sdfa</li>
<li>sdf</li>
</ol>
<hr color="red" >
<!--空心圆-->
<ul type="circle">
<li>sdfa</li>
<li>daffa</li>
<li>dfafa</li>
<li>adfae</li>
</ul>
<form> 独有的标签（<input>输入框 属性 type
换行标签）
单选按钮 type=”radio” name=“”“…” 只能选一 可用行级元素label括起来
多选type=”checkbox” name=”…”
<input type=”text”>文本框 placeholder占位符
<input type=”password”>密码框
<select> <option>1997</option> </select>下拉菜单
<form>
<input type="text"><br>
<input type="password"><br>
<!--radio单选-->
性别<input type="radio" name="a">A <input type="radio" name="a">B<br>
<!--checkbox-->多选框
<input type="checkbox" name="1">打<br>
<input type="checkbox" name="1">跳<br>
<input type="checkbox" name="1">蹦<br>
请选择文件<input type="file"><br>
<!--下拉选择框-->
生日<select>
<option value="请选择">请选择</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<!--重置按钮->
<input type="reset" value="重置按钮">
</form>
<textarea>文本域</textarea>属性rows行 cols列
<hidden>隐藏项
<input type="button" value="普通按钮"> title 化到input时给出提示
<input type="submit" value="提交按钮">与<button>相似可以跳转
<input type="reset" value="重置按钮">
</form>表单，属性：action 提交数据的地址 method 方法（get/post）
action 提交到地址，默认当前的页面 mothod 表单的提交方式，常用的两种get和post
行级元素：（不会单独占一行）
<span></span>文字标签，一行显示
<a href=” ” title=” ” target=”_blank”></a>超链接标签,href属性链接地址
<i> </i> 斜体字 <label></label>行级
<img src=” ” width=“” height=””>图片标签 source源头
<strong>101100</strong> 字体加粗标签
<a href="http://baidu.com" target="_blank">百度一下</a>
<a href="#">哈哈哈哈</a>
<a href="#Top">回到顶部</a>
<br>
<img src="img/2.png" width="200px" height="200px" />
<br>
<pre>
public void main(String[] args){
system.out.println();
}
</pre>
头标签
<title>标题标签
<base > 超链接设置标签
<link> 引入文件
层叠样式表简称CSS
三种：行类样式、内部样式、外部样式
关键字style
选择器：id选择器 类选择器 元素选择器 组合选择器
类选择器：可以使用多个类选择器 靠后的起作用
组合选择器：div p{ }; 空格代表子选择器 两两组合
p.c 类为c的p元素
width: 50% 父元素宽的百分之五十 宽高对行级元素不起作用
背景
背景色background-color:
三种方式red; #RRGGBB; rgb(255,0,0);
透明rgba(255,0,0,0.2) 取值0—1
背景图background-image: url(2.png);
不重复background-repeat: no-repeat;
背景图片的位置background-position: right top;右上; center中间；bottom下
background-position: 10px 10px;用数值偏移 左右 上下； 百分号也可以
rgba a-透明度background: rgba(255, 0, 0, 0.7) url(2018.jpeg) no-repeat 0 0;
边框
边框 border 实线solid 虚线 dashed
下边框bored-bottom
border: 2px red dashed;
圆角矩形 border-radius: 400px ;
字体
字体颜色 color: red;
字体大小 font-size: 20px;
字体font-family: 微软雅黑;
粗体 font-weight: bold;
文字的对齐text-align: right;
文字装饰text-decoration: underline(下划线) line-through(穿透线)
文字缩进text-indent: 20px;
字与字的间距 letter-spacing: 2px;
行高 line-height:
盒子模型： margin 元素与元素之间的距离
上、右、下、左（两个数值时为上下、左右）margin: 20px 10px 30px 40px;
margin auto；自动调整 居中的元素必须要有一个固定的宽度
padding-left: 20px; 任何元素的内容与边框的间距 会引起元素的撑大
清除HTML所有元素自带的属性
*{
<--清除HTML所有元素自带的属性-->
margin: 0;
padding: 0;
}
定位：
position：absolute；绝对定位，摆脱文档流的控制(行级、块级都适用)
left：0； top：0；左上角
right: 50%;
bottom: 0;
margin-right: -200px;
z-index: (-999—999)； 控制飘的高度
position: relative; 相对定位，不摆脱文档流的控制
position: fixed 窗口定位，脱离文档流
让子元素在父元素内部：子元素绝对定位，父元素相对定位
浮动：float 脱离文档流
当浮动元素碰到其他元素停下来，碰到父元素停下来
消除 clear: both; 加一个空元素，消除上一个浮动float的影响
把行变成块级元素去展示：display: block; 展示出来
使元素消失：display：none；
把块级元素变成行，保留宽高：inline-block;
display: table; 与margin: 0 auto; 连用始终让ul居中
鼠标的展示：cursor: pointer; 变成小手 progress 进度 crosshair 十字
wait加载
溢出：overflow:hidden；超出的部分隐藏起来
透明：opacity:0—1；取值0-1
原始状态
a:link { }
鼠标移动上后的变化：
background-color: blueviolet;
cursor: pointer;
}
点击状态
a:active{ }
点击后的状态
a:visited{ }
去掉ul的小圆点
ul{
list-style: none;
}
使那个框框看着立体 box-shadow:2px 2px 2px black;
去掉图片的底边3像素：
img{
vertical-align: middle;
}
强制最高优先级： !important
background: greenyellow !important;
顺序选择器：
选择第几个 li: nth-child(1)
li:nth-child(1){
background: red;
}
属性选择器： form input[type=”text”] form input[type=”password”]
网友评论