1.html标签
html为网页标记语言 <标签名>
DTD声名
新版
<!DOCTYPE html>
标题标签 hn
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
n越大,字体越小,自动加粗,换行
color设置字体的颜色
1.HEXColor 六位的十六进制
十六进制范围0-9 a-f
密码:
提交: 性别:男 女 保密
段落标签 p
<p></p>
注意:自动换行
加粗
<b></b>
强调加粗
<strong></strong>
斜体
<i></i>
强调斜体
<em></em>
换行
<br> <br /> <br/>
分割线
<hr>
删除线
<del></del>
注释
<ruby>鼎<rt>ding</rt></ruby>
超链接(超文本传输协议)
<a href="" target="_self">点击的内容</a>
href网页跳转的地址
绝对地址:
域名(网址)
本地的文件目录(不建议使用)
相对地址:
参考物:当前文件路径
./当前路径(当前路径可以省略) …/上一级路径 …/…/上两级
target超链接的跳转方式
_self在本窗口打开(默认)
_blank在新窗口打开(重点)
_top在顶层窗口打开(了解)
_parent在父级窗口打开(了解)
图片标签
<img src="" width="" height="" alt="" title="">
src设置图片的路径(必填)
相对地址
绝对地址
width设置图片的宽度 单位:px 百分比
height设置图片的高度
注意:当单独设置图片的宽度或者高度时,图片会等比例缩放;当你同时设置图片的宽度和高度时,图片会严格按照所给的比例进行缩放。
alt图片失效时显示
title设置图片的描述
列表
无序列表(重点)
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
自定义列表
<dl>
<dd></dd>
<dt></dt>
</dl>
无意义标签
<div></div>块级标签
<span></span>行级标签
块级标签可以直接设置宽高,默认纵向排列
行级标签不能直接设置宽高,默认横向排列
上标
<sup></sup>
下标
<sub></sub>
列表
1、无序列表
<ul>
<li></li>
</ul>
2、有序列表
<ol>
<li></li>
</ol>
3、自定义列表
<dl>
<dd></dd>
<dt></dt>
</dl>
表格
<table border="1">
<caption>GZ20直播</caption>
<tr>
<th></th>
...
</tr>
<tr>
<td></td>
...
</tr>
</table>
表格的属性:
border设置是否有边框 0无边框 1有边框
style设置样式
边距
内边距cellpadding
外边距cellspacing
合并单元格
合并行rowspan=""
合并列colspan=""
注意:合并单元格遵循从左往右合并,从上往下合并
表单form(重点)
<form action="" method="">
...
</form>
action表单提交的地址
绝对地址(网址)
相对地址 后端可以用 php java c语言
method表单提交的方式
get提交 1.php?name=zhangsan&age=18&sex=男
post提交
get提交和post提交的区别:
get提交任务栏可见,post提交任务栏不可见
get提交数据不安全,post提交数据相对安全
get提交数据大小会受任务栏限制,而post不受限制
IE限制2KB 谷歌/火狐 限制8KB
输入框
<input type="" name="" value="">
type输入框的类型
text文本框
password密码框
radio单选框 name的值必须要相同,value必须不同
checkbox复选框 name的值一般为数组 like[],value必须不同
file文件 enctype=“multipart/form-data”
button按钮
image图片提交
submit提交
reset重置按钮
name设置名字
注意:如果你需要将数据提交给后端,那么必须写上name属性
value为提交的值
下拉框
<select name="">
<option value=""></option>
</select>
文本域
<textarea></textarea>
表单的属性:
readonly只读
disabled禁用
readonly和disabled的区别:
readonly代表只读,允许数据提交,但是只能适用于input输入框类型为text、password以及文本域使用
2.与后端联系的form表单
1.先安装WampServer
2.写好表单代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="get.php" method="get">
姓名:<input type="text" /><br>
密码:<input type="password" /><br>
提交:<input type="submit" />
性别:<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" value="2"/>保密
</form>
</body>
</html>
注意:复选框和单选框必须在表单出现,单选框时候,name必须相同,value不相同
3.自定义一个文件为get.php
代码为
<?php
var_dump($_GET)
?>
4.把项目复制到WampServer的www目录下
5.再把www目录下这个(0719导入)hbuilder
注意:不能导入原来的项目
6.运行,在浏览器输入localhost
后端得到值
3.css复习
css 层叠样式表 级联样式表
css中class的命名规范: https://blog.csdn.net/qq_37361815/article/details/86607763
css的引入:
1、行内样式(不推荐使用)
<p style=""></p>
2、内嵌式
<style></style>
3、外部引入式
css的优先级别:
在代码不冲突的情况下,所有的样式都可以正常显示;
若样式出现冲突,css遵循就近原则和遵循写在后者的样式
css的选择符(可以看手册)
元素选择符
通配符 匹配所有的标签
*{sRules}
类型选择符(标签选择符) E element代表标签
E{color:red;}
id选择符(保证其唯一性,留给javascript使用)
<p id="test"></p> <style> #test{ } </style>
class选择符(可以重复使用多次)
<p class="test"></p> <style> .test{ } </style>
关系选择符
包含选择符(空格)
<div>
<p></p>
<ul>
<li><p></p></li>
</ul>
</div>
<p>该标签不会被选择</p>
选择div内所有的p标签
div p{
}
子选择符( > )(重点)
<div>
<p>选择到该元素</p>
<h2>
<!--孙子不能被选择-->
<p>该元素不会被选择</p>
</h2>
</div>
选择div内的子元素p
div>p{
}
相邻选择符(+)
注意:相邻选择符只能向下选择
<p>该元素不会被选择</p>
<div>
<p>该元素不会被选择</p>
</div>
<p>该元素被选择</p>
<p>该元素不会被选择</p>
<p>该元素不会被选择</p>
div+p{
}
兄弟选择符(~)
注意:兄弟选择符只能向下选择
<p>该元素不会被选择</p>
<div>
<p>该元素不会被选择</p>
</div>
<p>该元素被选择</p>
<p>该元素被选择</p>
<p>该元素被选择</p>
div~p{
}
伪类选择符
鼠标悬停 E element(标签)
E:hover{}设置鼠标悬停时样式(重点)
E:link设置超链接未访问前样式
E:visited设置超链接访问后的样式
E:hover设置鼠标悬停时样式
E:active设置超链接点击时样式
口诀:love hate
了解
E:enabled 当元素处于可用状态
E:disabled 当元素处于禁用状态
E:empty 选择指定的空元素
E:target
E:root 相当于html
E:checked 选择input的radio和checkbox默认选中的元素
字体样式font
bold粗体(700) bolder加粗体(800) lighter细体(400)
取值为100|200|300|400|500|600|700|800|900
font-weight:800;加粗 相当于
<b></b> <strong></strong>
em(参考父级元素的字体大小)
rem(参考根元素的字体大小)
注意:一般默认字体大小为16px,最小12px
常规情况下,字体设置为偶数
复合写法:
font:20px 微软雅黑;(必须写font-size和font-family)
font:italic bolder 20px**/30px** 微软雅黑;加粗的为line-height
font:30px/1.5 微软雅黑;
文本样式
text-align文本对齐方式
left左对齐
right右对齐
center文本居中
text-indent:2em;首行缩进
letter-spacing字间距
字体装饰
text-decoration
重点: text-decoration:none;
第一个参数:
none取消装饰线
underline下划线
overline上划线
line-through贯穿线 ~~~~
第二个参数:
solid 实线 dashed虚线 dotted点线状 double双实线 wavy波浪线
第三个参数:color颜色
text-shadow文本阴影
1、水平偏移 正数:右移 负数:左移
2、垂直偏移 正数:下移 负数:上移
3、模糊程度 单位:px
4、阴影颜色
列表
list-style:none;去除列表样式
边框border
border-width边框的宽度
border-style边框的样式
solid实线 dashed虚线 dotted点线状 double双实线 inset
border-color边框的颜色
边框分为四个方向:left right top bottom
复合写法: border:1px solid red;
背景background
background-color设置背景颜色
background-image设置背景图片 url(图片路径)
background-repeat设置背景图片是否重复
repeat重复(默认)
repeat-x X轴重复
repeat-y Y轴重复
no-repeat不重复
background-attachment设置背景图像是否固定
取值为fixed (常用于:微信聊天背景)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100%;
height: auto;
background: url(desk.jpg) no-repeat 0 0/100%;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div