HTML
文章目录
HTML——超文本标记语言
-
超文本:不仅用于显示文本
-
标记语言:标签标记
简单练习
<!--able to directly show content-->
baidu
<!--thicken content-->
<b> baidu </b>
<!--click to jump corresponding website-->
<a href = "http://www.baidu.com">baidu</a>
<!--not only thicken content but also able to click to jump-->
<a href = "http://www.baidu.com"><b>baidu</b></a>
效果图(下划线内容点击可跳转):
一对标签包括其中间的内容称为 HTML元素
HTML 格式
<!-- HTML 标准格式-->
<!DOCTYPE html><!-html 的声明->
<html>
<head>
<meta charset = "utf-8"/><!--元标签,定义编码格式-->
<title>title</title><!--浏览器上方标题-->
</head>
<body><!-- 身体标签,写在 body 中的内容,在浏览器中显示 -->
body
</body>
</html>
<!-- HTML 简写模式-->
<html>
<head>
<title>title</title>
</head>
<body>
body
</body>
</html>
HTML 浏览器的解析方向
从上到下,从左到右
表格
表格的表示
<table>
<tr><!-- tr表示行-->
<th>列1</th><!--th表示表头-->
<th>列2</th><!--th表示的内容会自动加粗并居中>
</tr>
<tr>
<td>xxx</td><!--td表示每列内容-->
<td>xxx</td>
</tr>
</table>
效果图:
可以发现表头内容加粗居中(居中不明显可看下图)
标签说明
标签名 | 含义 | 位置关系 | |
---|---|---|---|
| 表格 | 每个表格对应一个标签
| |
行 | 的子标签,代表一行。
| ||
表头单元格 | 需要表头时可以使用。是 | ||
单元格 | |||
父子关系图
表格样式
包括 border ,width,height,align,cellspacing,cellpadding,bgcolor大概七种
属性名 | 属性含义 | 可取值 |
---|---|---|
border(table专有) | 最外围边框大小(用在table标签中) | 数字。单位像素。 |
width | 宽度(用在table(表格的宽度), td中(该列的宽度)) | 数字。单位像素。 |
height | 高度(用在table(表格的高度), tr中(该行的高度)) | 数字。单位像素。 |
align | table中使用, 表格显示位置。tr, 该行内容对齐方式。td, 该单元格对其方式 | left: 左侧。center:中间。right:右侧 |
bgcolor | 背景颜色 | # RGB 色彩模式 | 英文颜色 |
cellpadding(table专有) | 内边距(用在table标签中) | 数字。单位像素。 |
cellspacing(table专有) | 外边距(用在table标签中) | 数字。单位像素。 |
属于 table:
- border(table 专享)
- cellpadding(table 专享):表格中内容到单元格边框的距离
- cellspading (table 专享):表格内边框到外边框的距离
- width:表格宽度
- height:表格高度
- bgcolor:整个表格背景颜色
- align:整个表格的位置
属于 tr:
- height:更改整行高度
- bgcolor:整行背景颜色
- align:整行内容的对齐方式
属于 td|th:
- width:更改整列的宽度
- bgcolor:更改整列背景颜色
- align:更改整列的内容对齐方式
实现练习如图(数据为虚拟数据):
<table width="900" border="1" cellspacing="0" bgcolor="coral" align="center">
<tr bgcolor="green" align="center">
<th width="80">姓名</th>
<th width="220">公司</th>
<th width="110">年薪</th>
<th width="110">地点</th>
<th width="80">学历</th>
</tr>
<tr align="center">
<td>zs</td>
<td>京</td>
<td>210000</td>
<td>北京</td>
<td>本科</td>
</tr>
<tr align="center">
<td>ls</td>
<td>尚</td>
<td>190000</td>
<td>北京</td>
<td>本科</td>
</tr>
<tr align="center">
<td>ww</td>
<td>天</td>
<td>126000</td>
<td>北京</td>
<td>本科</td>
</tr>
<tr align="center">
<td>zl</td>
<td>字</td>
<td>600000</td>
<td>北京</td>
<td>硕士</td>
</tr>
<tr align="center">
<td>zl1</td>
<td>顶</td>
<td>154000</td>
<td>北京</td>
<td>本科</td>
</tr>
<tr align="center">
<td>zl2</td>
<td>阿</td>
<td>108000</td>
<td>杭州</td>
<td>专科</td>
</tr>
</table>
单元格的合并
分为:行合并(rowspan)与列合并(colspan)
区分:跨行就是行合并,跨列就是列合并
行合并:
<table border="1" height="100" width="200" cellspacing="0">
<!-- first row-->
<tr>
<td></td>
<td rowspan="2"></td><!-- span two colspan -->
</tr>
<!-- second row-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
列合并:
<table border="1" height="100" width="200" cellspacing="0">
<!--the first row-->
<tr>
<td></td>
<td colspan="2"></td><!--span two column-->
</tr>
<!--the second row-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
练习:
<table border="1" cellspacing="0" width="400" height="400" align="center">
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<table border="1" cellspacing="0" width=600 height=1000 align="center">
<tr>
<th span="4">个人简历</th>
</tr>
<tr>
<td width="140">姓名:</td>
<td width="240" align="center">北京尚学堂</td>
<td width="140">年龄:</td>
<td width="80" align="center">20</td>
</tr>
<tr>
<td colspan="4">个人技能:</td>
</tr>
<tr>
<td align="right">框架:</td>
<td align="center" colspan="3">Mybatis,Spring,SpringBoot</td>
</tr>
<tr>
<td align="right">高并发:</td>
<td align="center" colspan="3">熟练掌握高并发的处理</td>
</tr>
<tr>
<td colspan="4">项目经验</td>
</tr>
<tr>
<td align="right">项目一:</td>
<td align="center" colspan="3">云医疗</td>
</tr>
<tr>
<td colspan="4">个人介绍</td>
</tr>
<tr>
<td colspan="4" align="center">本人吃苦耐劳,勤奋努力,踏实努力,有求学精神</td>
</tr>
</table>
行级标签&块级标签
-
块级标签——独占一行,前后内容不会出现在同一行,默认宽度为父标签的宽度,默认没有高度
-
行级标签——可以与其他内容(非块级标签内容)显示在同一行,默认宽度为内容的宽度
相对路径
从一个资源所在文件夹出发到另一个资源经历的过程
-
./ 表示本文件所在文件夹(可以省略)
-
…/ 表示本文件所在文件夹的上一个文件夹
换行标签
<br/>
1、HTML中多空格会视为是一个空格
2、HTML中换行会视为是一个空格
实体
类似于ASCII码,当你想输出比如尖括号<>时,这可能会被视为一个标签,重要的实体  
target
target 一般跟标签a连用,表示跳转是要在新的标签页还是在原页面,还是在原页面刷新一部分内容而不刷新整个内容
<a href="xxx" target="blank_">aaa</a><!--表示在新的标签页打开该链接-->
iframe
内联框架,在一个页面中内联其他页面,常与 a 标签连用
属性
- src——要显示的内容的路径
- width——
- height——
- frameboder——该框架的边框
- name——框架名字,好在a标签中被引用
<a href="xxx" target="a">xxx</a>
<iframe scr="xxx" name="a"></iframe>
段落与标题标签
都是块级标签
标题标签,类似于几级标题,会加粗字体并自带边距
<h1></h1>
... ...
<h6></h6>
段落标签,独占一行,自带边距
<p>
</p>
例:
<h1>这是一个段落。</h1>
这是一个段落。<br/>
这是一个段落。
<p>这是一个段落。</p>
这是一个段落。<br/>
这是一个段落。
图片
图片一样可以通过 border 添加 边框
img 是行级标签,用于显示图片,同时 img 是单标签,所以在开始标签中直接 /> 结束
音频
audio 标签用来表示音频标签
属性
- controls——显示音频控制面板
- loop——单曲循环
- muted——默认静音
- autoplay——默认自动播放(部分浏览器不支持)
注意以上属性,属性与属性名相同,可以只写属性名
- src——音频路径
另外由于部分浏览器不支持audio标签,会在audio中加上提示,只有不支持时才会看到提示内容
<audio src="xxx" controls >您的浏览器不支持播放音频</audio>
列表标签
无序列表
ul(unordered list),块级标签,列表中每一行称为列表项
- ,
- 也是块级标签
-
ul 默认具有外边框与内边框
<ul> <li>x</li> <li>xx</li> <li>xxx</li> </ul>
效果:
- x
- xx
- xxx
属性
- disc 实心圆(默认)
- circle 空心圆
- square 方框
- none 什么也没
可用 type 属性更改,HTML5后不推荐
有序列表
ol(ordered lists),显示有序列表
<ol> <li>x</li> <li>xx</li> <li>xxx</li> </ol>
效果:
- x
- xx
- xxx
定义列表
dl(definition list)定义列表。
<dl>
下可以包含多个<dt>
(definition term)定义项标签,每个定义项标签后面紧跟多个- (definition description)定义描述标签
样式说明:
<dt>
是没有缩进的。
<dd>
有缩进。视频标签
video
属性
- controls
- loop
- muted
- autoplay
以上属性与属性值相同
- src
- poster:视频封面
- width
- height
<video src="xxx" controls poster="xxx" > 您的浏览器不支持播放视频 </video>
QQ空间BETA版本练习
目录结构:
完成效果:主页
日志:
跳转页面:
相册:
说说:
音乐:
其余页面没有过多内容,故不展示,所有页面都只是前端实现
index代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body align="center"> <table width="900" height="40" bgcolor="aquamarine" align="center"> <tr> <td align="center"><a href="index.html">主页</a> </td> <td align="center"><a href="pages/log.html" target="aa">日志</a> </td> <td align="center"><a href="pages/picture.html" target="aa">相册</a> </td> <td align="center"><a href="pages/leave-word.html" target="aa">留言板</a> </td> <td align="center"><a href="pages/talk.html" target="aa">说说</a> </td> <td align="center"><a href="pages/selfzone.html" target="aa">个人档</a> </td> <td align="center"><a href="pages/music.html" target="aa">音乐</a> </td> <td align="center"><a href="pages/more.html" target="aa">更多</a></td> </tr> </table> <br /> <h1 align="center">我是主页</h1> <iframe src="pages/log.html" width="1200" height="600" name="aa" align="center"></iframe> </body> </html>
log.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align="center"> <h3>日志的页面</h3> <hr /> <table width="600" align="center"> <tr> <td><a href="sublog/first.html">Hello</a></td> <td align="right" width="300">2021-09-06</td> <td>(0/0)</td> <td>编辑</td> </tr> <tr> <td><a href="sublog/second.html">你最近过的还好吗?</a></td> <td align="right">2021-09-06</td> <td>(0/0)</td> <td>编辑</td> </tr> </table> </body> </html>
leave-word.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 我是留言板 </body> </html>
more.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 我是更多 </body> </html>
music.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align="center"> <p> <b> 音乐 </b> </p> <audio src="../audio/MoreanP - 暮秋沉眠.mp3" controls></audio> </body> </html>
pitcure.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 align="center">相册</h3> <hr /> <!--pictures and command don't together--> <!--<table align="center"> <tr> <td align="center"><img border="1" src="../img/a.jpg" alt="图片加载失败!!!" width="380" height="210" title="沙发少女"/></td> <td align="center"><img src="../img/b.jpg" alt="图片加载失败!!!" width="380" height="210" title="划水少女"/></td> </tr> <tr> <td align="center">沙发少女</td> <td align="center">划水少女</td> </tr> <tr> <td align="center"><img src="../img/c.jpg" alt="图片加载失败!!!" width="380" height="210" title="干饭少女"/></td> <td align="center"><img src="../img/d.jpg" alt="图片加载失败!!!" width="380" height="210" title="飞天少女"/></td> </tr> <tr> <td align="center">干饭少女</td> <td align="center">飞天少女</td> </tr> <tr> <td align="center"><img src="../img/e.jpg" alt="图片加载失败!!!" width="380" height="210" title="打盹少女"/></td> <td align="center"></td> </tr> <tr> <td align="center">打盹少女</td> <td align="center"></td> </tr> </table>--> <table align="center"> <tr> <td> <a href="../img/a.jpg"> <img src="../img/a.jpg" border="1" alt="加载错误" width="380" height="210" title="沙发少女"/> </a> <p align="center"> 沙发少女 </p> </td> <td> <img src="../img/b.jpg" border="1" alt="加载错误" width="380" height="210" title="划水少女"/> <p align="center"> 划水少女 </p> </td> </tr> <tr> <td> <img src="../img/c.jpg" border="1" alt="加载错误" width="380" height="210" title="干饭少女"/> <p align="center"> 干饭少女 </p> </td> <td> <img src="../img/d.jpg" border="1" alt="加载错误" width="380" height="210" title="飞天少女"/> <p align="center"> 飞天少女 </p> </td> </tr> <tr> <td> <img src="../img/e.jpg" border="1" alt="加载错误" width="380" height="210" title="打盹少女"/> <p align="center"> 打盹少女 </p> </td> <td></td> </tr> </table> </body> </html>
selfzone.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 我是个人档 </body> </html>
talk.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>说说</p> <hr /> <table> <tr> <td width="160" height="350" valign="top"> <img src="../img/head.jpg" width="75" height="75" alt="图片加载失败/(ㄒoㄒ)/~~" / title="head"> </td> <td width="400" valign="middle"> <p >好耶ヽ(✿゚▽゚)ノ</p> <video src="../video/01_city_c2s_fcw_10s.mp4" width="200" height="400" poster="../img/vlign.jpg" controls> 视频无法正常播放!!!/(ㄒoㄒ)/~~ </video> <p align="center"> 来自小米11青春版 2022/7/12 18:35 <hr /> </p> </td> </tr> <tr> <td valign="top"> <img src="../img/head.jpg" width="75" height="75" alt="图片加载失败/(ㄒoㄒ)/~~" / title="head"> </td> <td> <p>乌拉q(≧▽≦q)q(≧▽≦q)!!!!</p> <video src="../video/Loading_01.mp4" width="350" height="200" poster="../img/a.jpg" controls></video> <p align="center"> 来自小米11青春版 2022/7/12 18:35 <hr /> </p> </td> </tr> </table> </body> </html>
sublog/first.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 align="center">Hello</h3> <hr /> <p> Goodbye! <br /> ByeBye! </p> </body> </html>
sublog/second
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 align="center">How are you?</h3> <hr /> <p> I am fine,thank you! </p> </body> </html>
form 表单
表单标签及其子标签
“”——表单标签
表单元素主要使用的三个标签
- “”
- “”
其中 的 type 属性取值有二十三种(并非所有浏览器都支持)
以下列举常用的几个:
- text——文本输入框,获取输入的内容
- password——密码输入框,获取密码,数据变成黑点
- button——按钮, value=”xx“->给按钮添加文字
- checkbox——选择框,想添加文字解释可以直接写后面
- radio——单选框
- file——文件上传
- image——自定义图片
- submit——提交表单按钮
- reset——重置按钮,删除已写内容
<form>
常用属性- action——把填写的数据交到指定地址,(网站需要加 http://前缀)
- method——请求方式,默认为 get
<input/>
标签<input/>
是单标签,行级标签,其中主要包括三个属性<input type="指定文本框等形式" name="指定传到后台时该值的名称,没有name数据不会传到后台(form action指定的地址 数据传输格式:name值="xx"&xx=xx)" value="并非所有都适用,一般命名按钮中的文字" placehoder="文本框中提示信息,不用删除,密码也适用"/>
type
- text——文本输入框(注意需要name,无name不数据)
- password——不支持中文,且输入内容会变成黑点
- button——无提交功能的按钮,后期配合Ajax使用
- submit——可以提交(开始没有字体)
- reset——重置表单的功能(开始没有字体)
radio单选按钮
性别:<input type="radio" name="sex" value="0" checked/>男 <input type="radio" name="sex" value="1" />女
name——分组实现单选与传递数据,分组后才能实现单选
value——传到后台的值
checked——默认选择
form 表单中可存在多组 radio
checkbox选择框
<p>爱好</p> <input type="checkbox" name="hobby" id="" value="篮球"/>篮球 <input type="checkbox" name="hobby" id="" value="足球"/>足球 <input type="checkbox" name="hobby" id="" value="羽毛球"/>羽毛球
select下拉列表
学历:<select> <option value="">---请选择---</option> <option value="大专">大专</option> <option value="大学及以上">大学及以上</option> </select>
与 input 同级,一个select标签可以包括多个option子标签,其中value表示传到后台的值
多行文本框
自我介绍:<textarea></textarea>
可用rows与cols属性分别设定长和宽
css
可继承父标签样式,在HTML标签中可直接添加 style 属性进行设置
<a href="http://www.baidu.com" style="font-size:50px;font-style:italic;">百度</a>
css涉及到的单位必须添加像素
格式:属性名:+属性值(多个属性用分号分隔)
bold可用于加粗v
div 与 span 标签
- div——是一种块级标签,无任何自带样式,宽度默认是父标签的宽度,默认无高度或是内容的高度,可以自己设置宽和高
- span——是一种行标签,无任何自带样式,宽度与高度都默认为0或者内容的宽度高度,无法设置宽和高
css 中常用属性
width——取值为px或%,当设置%时,父标签必须明确了宽度
height
background-color——常用取值为颜色单词或RGB
display属性
none——隐藏标签及标签中的内容
block——将行级标签变成块级标签,改完后无法改变宽和高
inline——与block类似,改完后可以改变宽和高
inline-block——可以用在行级或块级标签上,将其同化为高与宽可以自由更改的行级标签
<a style="display:none">a</a>
HTML中使用css的三种方式
1、行内式
行内式通过在HTML标签中添加style属性来设置
行内式的特点:
- 该方式css优先级最高
- 太乱,并且重复性太高
2、内部式
内部式通过在HTML中添加
<style></style>
标签来设置,一般写在
<head>
中写又由于 style 单独写在了自己的标签中,为了与html对应标签内容有关联,
需要用到 选择器
3、外部式
把内部式中的style代码提取出来,单独放到 .css 文件,
然后在HTML的head中声明,
<link rel="一般自动会生成" href="需要自己写,指定的css文件路径"/> 注意是单标签!!!
内部式与外部式由于声明都是在 head ,两者有限度是相同的,具体谁的优先度高,要看先声明的是谁
.css 实例
#aa{ height:100px; width:100px; background-color:red; }
今日练习:
<form align="center"> <h3 align="center"> 注册 </h3> 账号:<input type="text" name="useraccount"/> <br/> 密码:<input type="password" name="password"/> <br/> 性别:<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 <input type="radio" name="sex" value="保密"/>保密 <br/> 爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name = "hobby" value="足球"/>足球 <input type="checkbox" name = "hobby" value="羽毛球">羽毛球 <input type="checkbox" name = "agreemet" value="1">勾选协议 <br/> 学历:<select name="study"> <option value="">---请选择---</option> <option value="大学及以上">大学及以上</option> <option value="大专及以下">大专及以下</option> </select> <br/> 自我介绍:<textarea name="self"></textarea> <br/> <input type="submit" name="submit" value="regist"/> <input type="reset" name="reset" value="reset"/> </form>
<form action=""> <table align="center" width="300"> <tr > <td width="80" align="center">账号:</td> <td width="220"><input type="text" name="useraccount" /></td> </tr> <tr> <td width="80" align="center">密码:</td> <td width="220"><input type="password" name="password" /></td> </tr> <tr> <td colspan="2"><input type="image" src="img/Snipaste_2022-07-13_11-01-14.png" name="login" width="80" height="20"/></td> <td></td> </tr> </table> </form>
<!-- radio——单选框,name可以实现分组并传递数据给后台 checkbox——选择框,可以实现多选,name一样可以实现分组并传递数据给后台,形状为方形 value属性——指定单选框与选择框传到后台的具体值 checked属性——指定默认勾选 --> <form action="http://www.baidu.com" align="center"> <p>性别:</p> <input type="radio" name="sex" id="" value="男" />男 <input type="radio" name="sex" id="" value="女" />女 <br /> <p>爱好</p> <input type="checkbox" name="hobby" id="" value="篮球"/>篮球 <input type="checkbox" name="hobby" id="" value="足球"/>足球 <input type="checkbox" name="hobby" id="" value="羽毛球"/>羽毛球 <br /> <input type="file" name="file" value="请点击上传" /> <br /> <input type="submit" name="" id="" value="submit" /> </form>
<form action="http://www.baidu.com" method="post"> <table border="1" cellspacing="0" cellpadding="" align="center" width="350" height="300"> <tr> <td>用户名</td> <td> <input type="text" name="username" id="" value="" placeholder="请输入用户名"/> </td> </tr> <tr> <td>照片</td> <td> <input type="file" name="pictures" id="pictures" value="选择文件" /> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" id="password" value="" placeholder="请输入密码" /> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="cirpassword" id="cirpassword" value="" placeholder="请确认密码" /> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" id="" value="男" />男 <input type="radio" name="sex" id="" value="女" />女 </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" id="" value="音乐" />音乐 <input type="checkbox" name="hobby" id="" value="跑步" />跑步 <input type="checkbox" name="hobby" value="骑行"/>骑行 </td> </tr> <tr> <td>学历</td> <td> <select name="school"> <option value="">请选择学历</option> <option value="博士">博士</option> <option value="硕士">硕士</option> <option value="本科及以下">本科及以下</option> </select> </td> </tr> <tr> <td>手机号码</td> <td> <input type="text" name="telnum" id="telnum" value="" /> </td> </tr> <tr> <td>自我介绍</td> <td> <!--textarea 想让其在初始文本框内有内容在两个textarea标签中间写--> <textarea name="self" rows="" cols="">自我介绍</textarea> </td> </tr> <tr> <td colspan="2"> <input type="submit" name="regist" id="regist" value="注册" /> <input type="reset" name="reset" id="reset" value="重置" /> </td> </tr> </table> </form>
基本选择器
- ID 选择器
- 类选择器
- 标签选择器
ID选择器
css 通过 #id属性名 与 HTML 中 id=“属性名” 的属性名对应
一个HTML页面中所有 id 的 id 属性名唯一
该选择器优先度最高
类选择器
通过给HTML标签设置class值,与 style标签中 .class 值对应 ,类选择器有限度低于id选择器
标签选择器
通过直接style标签中直接写类似 div span 这样的属性,对body中所有该属性的标签起作用
标签选择器的优先度低于类选择器
复合选择器
- 后代选择器
- 子选择器
- 并列选择器
后代选择器
获取所有符合条件的子标签,通过指定的 父标签名+空格+子标签名 的形式获取对应的子标签(包括孙子标签)
把多个基本选择器用空格隔开合成的一个选择器。空格前是父元素的选择器,空格后是子元素的选择器
<head> <meta charset="utf-8"> <title></title> <style> div .aa{ background-color: cadetblue; } </style> </head> <body> <div id=""> <span class="aa">span1</span> <p> <span class="aa">span2</span> </p> </div> </body>
子选择器
获取指定父标签下的一代子标签
语法:父标签名>子标签名 例:div>.aa
<head> <meta charset="utf-8"> <title></title> <style> div>.aa{ background-color: cadetblue; } </style> </head> <body> <div id=""> <span class="aa">span1</span> <p> <span class="aa">span2</span> </p> </div> </body>
并列选择器
获取所有符合条件的标签,将所有按逗号隔开的标签取得联系
语法:标签名+逗号+标签名+逗号+标签名 例:aa,#bb
<head> <meta charset="utf-8"> <title></title> <style> .aa,#bb{ background-color: cadetblue; } </style> </head> <body> <div id=""> <span class="aa">span1</span> <p> <span class="aa">span2</span> </p> </div> <div id="bb">div</div> </body>
浮动
float 把块级标签显示在一行的最左边或是最右边,
浮动与不浮动
浮动后的元素不占空间,
所以如果不想让后面的元素抢占空间,
可以给浮动标签套上一层 div 标签
浮动与文字
浮动与文字可以在同一行显示,因为浮动不占空间嘛
嘿嘿 <div style="float: left;background-color: red;width: 100px;height: 100px;"> 哈哈 </div> 嘻嘻
盒子模型
css中最重要的一个概念就是盒子模型,类似于一个地皮可以有围墙,过道,然后再是居住区,
所以一个元素总的长就是margin-left+border-left+padding-left+content+padding-right+border-right+margin-right,宽类似
在css中,规定每个元素都可以有
- 外边距——margin
- 边框——border
- 内边距——padding
- 内容——content
每个边距都有四个方向,可以一块设置四个方向,也可以一个方向,一个方向设置
margin外边框
指的是在边框外裹一层空白,占空间保持距离,后跟像素值
可以 margin-left:xxx;margin-right:xxxx;…
也可以直接margin:xxx,这时,如果后面跟两个值,则分别是上下和左右,
若是四个值,则是顺时针,从上开始 上+空格+右+空格+下+空格+左
若是一个值,则是上下左右
特殊用法:
想实现元素的水平居中时,可以使用:margin:0,auto(auto代表水平方向左右各一半)
border边框
就是设置边框,主要有三个属性值
- style——样式效果(一般都用solid)
- width——边框宽度
- color——边框颜色
可以每个方向都设置 例如 border-top-style:
也可以省写 border-top:width style color
也可以 border:width style color
圆角
就是让边框四周的棱角有圆的弧度
语法:border-radius:像素值,(该像素值不建议超过长或宽的一半)
padding内边距
语法:padding:上像素值+空格+右像素值+空格+下像素值+空格+左像素值+空格
padding元素不是改变内容距离边框,而是直接把边框撑大,所以当设置padding后,注意时候要改变总的长宽值
字体
- text-align——元素内的内容居中 一般用于 font 外套着的标签上,而隔壁margin是整个元素居中
- line-height——行高 当行高与内容容器的高度相同时,会产生垂直居中的效果
- text-decoration——常用于取消下划线
- font-weight——加粗字体
- font-size——字体大小
练习
<head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 280px; height: 50px; margin:0 auto; margin-bottom: 20px; } #a1{ border: 2px solid black; } #a2{ border: 2px solid gray; border-bottom: 4px solid red; border-radius: 20px; } #a3{ border: 2px solid gray; border-radius: 20px; } #a4{ border-left: blue 4px solid; border-top-right-radius:20px ; border-bottom-right-radius: 20px; background: aqua; } </style> </head> <body> <div id="a1"> </div> <div id="a2"></div> <div id="a3"></div> <div id="a4"></div> </body>
百度案例:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/db.css"/> </head> <body> <div id="head" > <div id="headleft"> </div> <div id="headright"> </div> </div> <div id="body"> <div id="pictures"> <img src="img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="310px" height="185px"/> </div> <div id="search"> <form action="http://www.baidu.com/s" method="get"> <div id="body-left"> <input type="text" name="wd" id="sirch" value="" /> </div> <div id="body-right"> <input type="submit" name="submit" id="submit" value="百度一下" /> </div> </form> </div> </div> <div id="foot"> </div> </body> </html>
db.css
body,html{ width: 100%; height: 100%; margin: 0; } #head{ width: ; height: 8%; min-height: 60px; min-width: 1250px; background-color: red; } #headleft{ width: 442px; height: 60px; background-color: aliceblue; float: left; } #headright{ width: 354px; height: 60px; background-color: aliceblue; float: right; } #body{ width:658px ; height: 80%; min-height:44px ; min-width: 658px; background-color: yellow; margin: 0 auto; } #pictures{ height: 158.4px; width: 654px; min-height: 185px; max-height: 310px; background-color: aqua; position: relative; text-align: center; } #search{ width: 658px; height: 44px; background-color: chartreuse; } #body-left{ width: 550px; height: 44px; float: left; } #sirch{ width: 443px; height: 16px; padding: 12px 87px 12px 16px; border: 2px solid gray; border-radius: 10px 0 0 10px; border-right-color:#4e6ef2 ; font-size: 16px; color: black; outline: 0; } #body-right{ width: 108px; height: 44px; float: right; } #submit{ width: 108px; height: 44px; background-color: #4e6ef2; border: 0; border-radius: 0 10px 10px 0; color: #fff; font-size: 17px; font-weight: 400px; } #foot{ width: ; height: 10%; min-height: 40px; min-width: ; background-color: blue; }