Html+CSS
一、Html
1.什么是HTML
HTML 是用来描述网页的一种语言。
· HTML 指的是超文本标记语言 (Hyper Text Markup Language)
· HTML 不是一种编程语言，而是一种标记语言 (markup language)
· 标记语言是一套标记标签 (markup tag)
· HTML 使用标记标签来描述网页
2.HTML基本结构
1.html指的是超级文本标记语言
2.学习不同作用标记 标签 作用 特点 属性 不同的属性值得作用
3.属性：帮助我们完善的展示标签
标签中添加属性，属性前添加空格
属性名=“属性值” 属性值前后添加引号 '|" 保持一致
4.单标签|自闭和标签：标签对中不需要内容
5.<！DOCTYPE html> 定义在html页面的首行，告诉浏览器html文档的版本声明方式，html5的声明方式
6. 告诉浏览器，用什么的字符编码格式解析html页面中定义的内容
如果想要保证不乱码，一定要定义charset
7.head标签对中定义的内容给浏览器看的设置
title 标签 head 中唯一一个能被用户看到的内容，定义页面的标题
8.body中定义的内容是给用户看的
重点关注body标签对中定义的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> hello world!!!!!! </body> </html>
3.常用标签
1）分类
块元素 : 前后换行,独占一行
可以设置宽高
可以嵌套其他块元素,行内元素,普通文本
所有的块元素都有一个属性,align 对其方式
left right center
行内元素 : 可以和其他元素一行显示
不可以设置宽高,默认由自己内容撑起
只能嵌套其他行内元素或者文本…2)标签
a 超链接标签
属性:
href: 定义链接地址
绝对地址
相对地址
没有地址,每点击以此刷新以此
target 打开方式
_blank 新页面打开
_self 本页面打开
title 属性
鼠标悬停在内容上时候,显示的提示字
特点:
自带下划线
链接未访问:字体蓝色
链接已访问:字体紫色
锚链接
a标签的href属性的值为: #+定点id属性的值p标签
上下会有一段留白
块元素
内容正常显示
div 块
是块元素
span 便于为元素提供样式
h 1~6* 标题标签
根据权重的不同,字体大小以此减小
加粗br 换行
hr 水平线
img 图像标签
src 图像地址 必填属性
相对地址
绝对地址
路径:
进入某个路径内部 /
返回上一层路径 …/
width : 宽度 —属性是属于标签的,标签是html语言的
height : 高度
以px像素为单位
border : 变框
title: 当鼠标悬停在内容上时候,显示的提示字列表标签:
无序列表
ul 定义无序列表
type属性更换列表项标记
li 定义列表项
有序列表
ol 定义有序列表
type属性更换列表项标记<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用标签</title> <style type="text/css"> div{ width: 100px; height: 100px; background:blue; } span{ color: aqua; } </style> </head> <body> <!-- 锚点--> <a href="#bottom">去底部</a> <!-- 没有地址--> <a href="">我是第一次使用</a> <!-- 绝对地址--> <a href="http://www.baidu.com" target="_blank">去百度</a> <!-- 相对地址--> <a href="01htmlStart.html" title="hello word" target="_self">去01htmlStart</a> <!-- 不刷新回到首页顶部--> <br> <br> <br> <p>哈哈哈哈哈哈哈哈哈</p> <p align="center">中间center</p> <a href="#">不刷新回到<span>首页</span>顶部</a> <div id="bottom">底部</div> <h1>标题第一</h1> <h2>标题第二</h2> <h3>标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用标签</title> <style type="text/css"> .img1{ border: 8px dashed darkgray; } </style> </head> <body> 星空凛 两节课 <br> 离开家分店 <br> <hr > 哈哈哈哈 <!-- 绝对地址--> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=508477980,1677162921&fm=26&gp=0.jpghttps://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=508477980,1677162921&fm=26&gp=0.jpg" width="200px" height="200px" class="img1"> <!-- 相对路径 --> <img src="img/timg.jpg" alt="网络不好" width="200px" height="200px" border="8px" title="程序员"> <!-- 无序列表--> <h3>我喜欢的水果</h3> <ul type="square"> <li>苹果</li> <li>香蕉</li> <li>梨</li> </ul> <h2>喜欢的明星</h2> <!-- 有序列表--> <ol type="A"> <li>肖战</li> <li>杨洋</li> <li>迪丽热巴</li> <li>杨紫</li> <h3>我最喜欢的明星</h3> <ul> <li>郑爽</li> <li>杨洋</li> </ul> </ol> </body> </html>
4.表格标签
表格标签：
table 定义表格
tr 定义行
th 定义表格头单元格
td 定义表格体单元格
常用属性:
border 变框
bordercolor 变框颜色
bgcolor 背景颜色
align 对其方式
width 宽度
height 高度
style=“border-collapse: collapse;” 双线变成单线
colspan 跨列
rowspan 跨行<!-- 课程表--> <table border="1px" align="center" style="border-collapse: collapse;" bgcolor="aliceblue" width="500px" height="500px"> <tr> <th colspan="6">课程表</th> </tr> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr align="center"> <td rowspan="3">上午</td> <td>体育课</td> <td>语文课</td> <td>英语课</td> <td>物理课</td> <td>物理课</td> </tr> <tr align="center"> <td>体育课</td> <td>语文课</td> <td>英语课</td> <td>物理课</td> <td>物理课</td> </tr> <tr align="center"> <td>体育课</td> <td>语文课</td> <td>英语课</td> <td>物理课</td> <td></td> </tr> <tr align="center"> <td rowspan="2">下午</td> <td>体育课</td> <td>语文课</td> <td></td> <td>物理课</td> <td>物理课</td> </tr> <tr align="center"> <td>体育课</td> <td></td> <td>英语课</td> <td>物理课</td> <td>物理课</td> </tr> <tr align="center"> <td colspan="6">晚自习</td> </tr> </table>
5.form表单
form 标签
作用: 收集用户信息
属性:
name 定义表单的名字
action 定义表单中数据的提交位置
method :提交方式
get 数据拼接在地址后面 默认
post 数据在请求头中
get和post之间的区别???
enctype 如果存在文件上传,表单的enctype属性值修改为multipart/form-data
表单元素: 定义在form标签中的元素
大部分的表单元素使用input进行定义 type属性不同的值代表不同的表单标签
text 普通文本框 name
password 密码框 加密 name
radio 单选框 name value
一组的内容,之能选择一个,单选,name的值相同为一组
checkbox 多选框
file 上传文件 修改enctype的值multipart/form-data
hidden 隐藏框
submit 提交
button 按钮 常常结合js一起使用
reset 重置
button type属性 sumbit button reset
textarea 多行文本域
select 下拉列表框
option 定义下拉列表选项
想要有提交数据能力的表单元素必须定义name属性 ,是后台区分前台的唯一
fieldSet 文本域
label
常用属性:
checked 默认选中单选,多选框
selected 默认选中下拉列表选项
autofocus 自动聚焦
placeholder 提示字
required 必填属性
readonly 只读 不能修改能提交
disabled 禁用 不能修改不能提交
multiple:信息有下拉列表<!-- fieldSet 文本域--> <fieldset id=""> <legend><h1>相亲信息表</h1></legend> <form action="" name="myForm" enctype="multipart/form-data"> <p> 姓名：<input type="text" name="username" autofocus="autofocus" placeholder="张三"/> </p> <p> 密码：<input type="password" name="pwd" disabled="disabled"/> </p> <p> 性别：<input type="radio" name="gender" value="man" checked="checked" id="man"><label for="man">男</label> <input type="radio" name="gender" value="woman" />女 </p> <p> 兴趣爱好： <input type="checkbox" name="hobby" value="run">跑步 <input type="checkbox" name="hobby" value="study" />学习 <input type="checkbox" name="hobby" value="eat" />吃 </p> <fieldset id=""> <legend>隐私信息</legend> 身高: <input type="text" name="height"><br> 体重: <input type="text" name="weight"/> </fieldset> <p> 生活照： <input type="file" name="photo" /> </p> <p> 空闲时候喜欢做什么？ <select name="do" multiple="multiple"> <option value="1">看书</option> <option value="2">看电视剧</option> <option value="3">打游戏</option> <option value="4">唱歌</option> <option value="5">看电影</option> <option value="6">聊天</option> </select> </p> <p> <!-- 文本框--> 交友宣言： <textarea rows="10" cols="30" name="words"> 我是。。。。。。。。。。。。 </textarea> </p> <p> 隐藏框：<input type="hidden" name="隐藏框" values="我男"/> </p> <input type="submit" value="提交" /> <input type="button" value="hhhhh" onclick="alert('哈哈哈哈')"/> <!-- reset 重置--> <button type="button">按钮</button> <button type="reset">重置</button> </form> </fieldset>
二、CSS
1.什么是CSS?
css层叠样式表
作用:CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能 。
使用语法:
1.选择器: 选中一个|一些元素
基础选择器:
元素选择器: 根据元素的标签名选中一个或一组元素
属性选择器:
伪类选择器:
伪元素选择器…
2.css使用语法
选择器{
样式1;
样式2;
//样式: 样式名:样式值;
} 3.使用方式
1.行内样式表:
在行的内部使用,定义一个style属性,属性中定义样式,只作用于当前这个元素
2.内部样式表
在html文档head中定义style标签对,标签对中定义样式
3.外部样式表 --推荐 在外部单独定义一个css文件,文件中蒂尼样式,哪一个html需要使用,就引入link
优先级: 谁离元素更近,优先显示谁
2.基本选择器
基础选择器:
元素选择器: 根据元素的标签名选中一个或一组元素
.类选择器: 根据元素的class属性的值,选中一个或一组元素
一个html页面中class属性的值可重复,可以有多个
#id选择器: 页面中id属性值不能重复,定义唯一的一个
*通配符 : 选中页面中所有的元素
基础选择器优先级: id>class>元素选择器>通配符
后代选择器: 父级选择器 子集选择器{样式…}
某个元素的某些子元素
群组选择器: 通过,连接多个选择器,选中他们能够匹配到的所有元素<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 元素 */ span{ color: red; } /* 类 . class */ .blue{ background: #A9A9A9; } /* id # */ #div1{ width: 200px; height: 400px; background: #00FFFF; } /* * 通配符 */ *{ padding: 0; margin: 0; } /* 后代 */ ul li{ color: red; } .b{ background: gold; } /* 群组 */ div,p,span{ font-size: 40px; } </style> </head> <body> <div id="div1"> 我是div1 </div> <div class="blue"> 我是div2 </div> <p class="blue b">我是p1</p> <span>我是span1</span> <ul type="circle"> <li>苹果</li> </ul> <ol type="I"> <li>梨</li> <li>香蕉</li> </ol> </body> </html>
3.常用样式
常用样式:
背景:
背景颜色 background-color
背景图片 background-image
背景是否重复 background-repeat
默认平铺
背景图片的大小 background-size
背景图片的位置
background-position
复合属性: background:颜色 图片 重复 位置;
个数,顺序可以随意改变
尺寸:
width
height
单位都是像素值
颜色:
背景颜色
字体颜色
颜色的英文单词 :red…
颜色十六进制
颜色三原色 rgb
rgba a->透明度 0完全透明 1完全不透明 opacity :元素的透明度
元素还是占文档流中的位置 字体：
字体大小： font-size
字体样式： font-family
文本水平：text-align
字体加粗：font-weight
行高：line-height
首行缩进：text-indent
下划线：text-decoration
去除列表项标记：list-style
展示：display
居中问题：
text-align:在行内元素不能使用
left
right
center
line-height 行高
默认一行中的内容在这一行中是垂直居中的
保证块元素中的内容的行高与块的元素的高度相同，就能达到垂直居中的效果
vertical-align:块元素无效
给同行的行内元素设置属性控制其垂直方向的对某垂直方向对其
top bottom middle
块元素中多行文本垂直居中
父元素：display:table
子元素：
display：table-cell;
vertical-align:middle;
display:
inline:行内元素
block：块元素
inline-block:块元素和行内元素的特点<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 背景颜色 */ #box{ background: greenyellow; border: 3px solid #0000FF; width: 400px; height: 400px; color: rgb(21,255,32); color:rgba(21,155,32,0.5); /* color:rgba(21,155,32,0); */ /* 透明度 */ /* opacity: 0.5; */ /* 背景图片 */ background-image: url(img/timg.jpg); background-repeat: no-repeat; background-size: 100%; background-position: bottom; background-position: 10px,50px; /*background: url(img/timg.jpg) no-repeat left top rgba(21,234,56,0);*/ } </style> </head> <body> <div id="box"> 我是div </div> <span>我是sapn</span> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 300px; height: 100px; border: 2px solid paleturquoise; /* 字体 */ color: #0000FF; font-size: 20px; font-family: "宋体"; text-align: center; font-weight: bolder; font-style: initial; line-height:20px; } p{ border: 2px solid red; text-indent: 2em; font-size: 50px; } a{ /*下划线 */ text-decoration: none; } ul{ /*去除列表项标记 */ list-style: none; display: table; padding: 0; } li{ display: inline-block; width: 38%; font-size: 30px; background: pink; font-family: "宋体"; text-align: center; line-height: 40px; display: table-cell; vertical-align: middle; padding-left: 0px; } li:hover{ background: gold; transition: 2s ease; } </style> </head> <body> <div id="box"> 还是看的是客服那开发商来看反馈了懒得看福建师范肯德基付款方式评价接口连接卡了 </div> <p>喝咖啡都是浪费了</p> <a href="">哈哈哈哈</a><br> <ul> <li>周人</li> <li>周作</li> <li>卢顺</li> </ul> </body> </html>
4.盒子模型
盒子模型**
内容+内边距+ 变框外边距
能看到的元素的大小:内容+内边距+ 变框
内容:
宽高都是内容的大小
内边距:
背景的样式会默认延伸到内边距上
设置值(内边距+外边距的方式)
一个值: 四边都是
两个值: 上下 左右
三个值: 上 右 下 左边与右边一致
四个值: 上 右 下 左
padding-left|padding-right|padding-top|padding-bottom
变框:
变框三要素: 宽度 样式 颜色;
元素四边相同的样式: border: 10px solid firebrick;
元素四边不同的样式: border-left:10px solid firebrick;
外边距:
元素距离周围其他元素的之间的距离
设置值的方式与内边距一样
块元素上下的外边距会合并
盒子模型的使用:根据具体的需求分析:变框 宽高 变框和内容之间(内边距) 变框和其他元素之间的距离(外边距) 元素和元素之间的距离没有变框|背景的情况(内外边距都可以)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 200px; height: 200px; border: 2px solid #0000FF; border-left: 3px dashed #00FFFF; border-right: 2px double #ADFF2F; border-color: #FF0000; border-style: double; border-width: 4px; /* 内边距 */ padding: 50px; padding:30px 100px; padding: 10px 100px 20px; padding:10px 40px 20px 30px; /* 外边距 */ margin: 100px; } p{ border: 2px dashed palegreen; margin-top: 100px; } </style> </head> <body> <div id="box"> </div> <p>哈哈哈哈哈哈</p> </body> </html>