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; }
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
