HTML+CSS
HTML
1、图像标签
<img src="resourse/picture/1.png" alt="笑脸" title="邪魅一笑" width="100" height="175"></a>
title
-
悬停文字
2、超链接标签
<a href="https://www.baidu.com/" target="_blank">点击我到百度</a>
target="_blank"
-
在新页面中打开
2.1、锚链接
<a href="#要到达的链接名称">回到连接</a>
2.2、邮件链接
<a href="mailto:1340508016@qq.com">点击联系我</a>
3、字体标签
粗体
<strong>
斜体
<em>
4、列表
<!-- 有序列表--> <ol> <li>床前明月光</li> <li>疑似地上霜</li> <li>举头望明月</li> <li>低头思故乡</li> </ol> <!-- 无序列表--> <ul> <li>床前明月光</li> <li>疑似地上霜</li> <li>举头望明月</li> <li>低头思故乡</li> </ul> <!-- 自定义列表--> <dl> <dt>11111</dt> <dd>22222</dd> <dd>33333</dd> <dd>44444</dd> </dl>
5、表格
<table></table>
行
<tr></tr>
列
<td></td>
例子
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr><td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr><td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
表格
border：设置边框的宽度。单位px
在 td 里修饰
-
colspan：跨列。
-
rowspan：跨行。
6、视频和音频
6.1、视频
<video src=""></video>
controls：设置播放键。
autoplay：自动播放。
6.2、音频
<audio src=""></audio>
controls：设置播放键。
autoplay：自动播放。
7、页面结构分析
<body> <header><h2>网页头部</h2></header> <section><h2>网页主体</h2></section> <footer><h2>网页脚部</h2></footer> </body>
导航辅助
nav
8、iframe内联框架
<iframe src="" name="hello" frameborder="0" width="1000px" height="1500px"></iframe> <a href="https://www.bilibili.com/" target="hello">点我</a>
-
name：框架标识名
-
width：框架宽度
-
height：框架高度
9、表单
form
<body>
<form action="HTest1.html" method="post">
<h2>注册</h2>
<p>名字：<input type="text" name="usersname"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
action
-
表单提交的地址，可以是网站，可以是一个请求处理的地址
method
-
提交方法
-
post 比较安全
-
get 不安全，高效
-
type
-
text 文本输入
-
password 密码输入
-
submit 提交
-
reset 重置
-
value 文本框默认值
-
maxlength 文本框最大长度
-
size 文本框长度
-
radio 单选框
-
多个单选框要选择一个的话，name要一样，value值修饰内容
-
-
checkbox 多选框
-
用name来修饰同一个组
-
-
button 按钮
-
value设置初始值
-
-
file 上传文件
-
number 数字框
-
max 设置最大值
-
min 设置最小值
-
step 设置一次变动的值
-
-
range 滑块
-
max 设置最大值
-
min 设置最小值
-
step 设置一次变动的值
-
-
search 搜索框
-
placeholder 在文本框中的提示信息
-
required 非空判断，里面必须有值
-
pattern 正则表达式，只有符合规则才能提交成功
正则表达式查询表：https://www.jb51.net/tools/regexsc.htm
select 多选框
<p>
<select name="country" >
<option value="China">中国</option>
<option value="usa">美国</option>
<option value="bth">瑞士</option>
<option value="india">法国</option>
</select>
</p>
testare 文本域
<p>
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
-
cols：行的宽度
-
row：列的宽度
表单的应用：
隐藏域
hidden
只读
readonly
禁用
disabled
9.1、增强鼠标可用性
通过点文字锁定到框
<label for="mark">你点我啊</label> <input type="text" id="mark">
CSS
style可以编写css的代码
<style>
h1{
color:pink;
}
</style>
如何引用外部的css
<link rel="stylesheet" href="css的文档位置">
行内元素
<h1 style="color:red">
我是标题
</h1>
优先级：就近原则，离得越近就是哪个。
1、选择器
作用：选择页面上的某一个或者某一类元素。
1.2、基本选择器
1、标签选择器
2、类选择器 class
格式： .类名{ }
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.www{
color: paleturquoise;
}
.iii{
color: red;
}
</style>
</head>
<body>
<h2 class="www">学Java</h2>
<h2 class="iii">学Java</h2>
</body>
3、id 选择器
格式：#id名称{}
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#nnn{
color: aqua;
}
</style>
</head>
<body>
<p id="nnn">看B站</p>
</body>
优先级：id > class > 标签
1.2、层次选择器
1、后代选择器：在某个元素的后面
/*后代选择器*/
body p{
background:red;
}
2、子选择器
/*子选择器*/
body > p{
background:green;
}
3、相邻兄弟选择器。对下不对上
/*兄弟选择器 */
.类名 + p{
color: blueviolet;
}
4、通用兄弟选择器。选中元素下的所有标签
.ccc~p{
color: cyan;
}
1.3、结构 伪类选择器
/*ul表下的第一个li*/
ul li:first-child{
color: brown;
}
/*ul表下的最后一个li*/
ul li:last-child{
color: blue;
}
/*选中body下的第一个p元素，定位他的父元素
并且第一个是当前元素 很少用
*/
p:nth-child(1){
color: chartreuse;
}
/*选中父元素下的p元素的第二个，是按照类型选择的*/
p:nth-of-type(2){
color: crimson;
}
1.4、属性选择器（重要）
/*以这个开头*/
a[href^=http]{
background-color: brown;
}
/*以这个结尾*/
a[href=com]{
color: darkblue;
}
/*选择id全等于*/
a[id=name]{
color: chartreuse;
}
/*包含这个元素*/
a[href*=www]{
color: crimson;
}
2、美化网页元素
2.1、美化字段
span
<p>
学习<span id="111" style="font-size: 50px;color: red">Java</span>
</p>
2.2、字体样式
/*
font-family:字体
font-size: 字体大小
font-weight:字体粗细
color: 字体颜色
*/
.cls1{
font:oblique bolder 16px 楷体;
}
p{
font-size: 12px;
font-family: 华文琥珀;
}
h2{
font-weight: lighter;
color: blue;
}
2.3、文本样式
1、颜色 color rgb rgba--->a表示透明度0~1
2、文本对齐的方式 text-align=center
3、首行缩进 text-indent : 2em
4、行高 line-height 单行文字上下居中！line-height=height
5、修饰 text-decoration：
6、文本图片水平对齐：vertical-align：middle
2.4、超链接伪类
/*
鼠标悬停的状态
重点
*/
a:hover{
color: blue;
}
/*鼠标按住未释放的状态*/
a:active{
color: blueviolet;
}
2.5、背景
background-image: url("../rescourses/pic/img.png");
2.6、边框
border：粗细 样式 颜色
2.7、内外边框
以元素本身为参超物
padding:上 下 左 右
2.8、圆角边框及阴影
让50*50的图片变圆
border-radius：25px
2.9、盒子阴影
第一个是xy值，然后是模糊半径，颜色
box-shadow：10px 10px 100px yellow
3、浮动
3.1、标准文档流
块级元素：独占一行
h1~h2 p div 列表...
行内元素：不独占一行
span a img strong...
行内元素 可以被包含在 块级元素中，反之不可以
display
-
block：块元素
-
inline：行内元素
-
inline-block：是块元素，但是可以内联在一行
4、定位
4.1、相对定位
position：relative
相对于原来的位置，进行指定偏移
top:-20px left:20px //相对原来向左 bottom:-10px right:20px
4.2、绝对定位
position：absolute
定位：基于xxx定位，上左下右~
1、没有父级元素的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对与父级元素进行偏移~
3、在父级元素范围内移动
相对于父级或浏览器位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留
4.3、固定定位（导航栏）
position：fixed
4.4、z-index
z-index类似于图层，数值更高的显示
可以搭配背景透明度。
opacity：0~1
2003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
