记录笔记，自己参考~~
常见的标签
- 标题：h1,h2,h3,h4...
- 段落：p
- 换行: br
- 容器：div, span(用来容纳其他标签)
- 表格: table, tr, td
- 列表: ul, ol, li
- 图片: img
- 表单 : input
- 链接 ： a
代理示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见的Html标签</title>
</head>
<body>
<!--标题标签-->
<h1> 我是h1标签</h1>
<h2> 我是h2标签</h2>
<!--表单标签-->
<input placeholder="我是占位文字">
<input value="我是默认文字">
<input type="date">
<input type="color">
<!--段落标签-->
<p> 我是段落标签我是段落标签我是段落标签我是段落标签</p><br>
<p> 我是段落标签我是段落标签我是段落标签我是段落标签</p><br>
<!--图像标签-->
<img src="baidu.jpg" alt="这是一个图片"><br>
<!--
相对路径和绝对路径;
相对路径: 资源在当前的项目中 ./ ../ ././
绝对路径: 资源不在当前的项目中, 网络上 或者 本地 http:// https://
-->
<img src="https://www.baidu.com/img/bd_logo1.png?qua=high" alt="这是一个图片" width="50%">
<img src="./imgSources/22.jpg" alt="这是一个图片" width="150">
<!--换行标签-->
<br>
<!--列表标签-->
<ul>
<li> 我是无序列表</li>
<li> 我是无序列表</li>
<li> 我是无序列表</li>
<li> 我是无序列表</li>
</ul>
<!--有序列表-->
<ol type="1">
<li> 我是有序列表</li>
<li> 我是有序列表</li>
<li> 我是有序列表</li>
<li> 我是有序列表</li>
</ol>
<!--超链接-->
<a href="#">我是超链接</a>
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
<!--div标签 相当于OC中的UIView 所见即是所得-->
<div>我是div标签 我是div标签</div>
<div>我是div标签 我是div标签</div>
<div>我是div标签 我是div标签</div>
<div>
<div>
<p> 我是段落 </p>
</div>
</div>
<!--
article 文章主题内容
header 标记头部区域
-->
</body>
</html>
image.png
新增标签
image.png
image.png
image.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<meter value="30" max="100" min="0">浏览器兼容 </meter>
<progress value="40" max="100"> </progress>
<!--<!–音频- controls就是播放器->-->
<audio src="./imgSources/sources/music.m4a" controls="controls"></audio>
<video src="./imgSources/sources/BigBuck.m4v" controls="controls"> </video>
</body>
</html>
image.png
进度条，以及声音都是可以控制的，视频也可以播放
CSS
- CSS 全称是Cascading Style Sheets, 层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如
color : red;
background-color : blue
CSS的3种书写样式
- 行内样式：直接在标签的style属性中书写
<body style="color: red;">
- 页内样式： 在本网页的style标签中书写
<style>
body {
color : red;
}
</style>
- 外部样式 在单独的CSS文件中写，然后再网页中用link标签引用
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的页内样式</title>
<!--
css的规律:
1.就近原则 先使用离内容近的
2. 叠加原则 .会把不同样式都用上
-->
<link rel="stylesheet" href="css/index.css">
<!--拿到所有的div进行设置样式 -solid 虚线-->
<style>
div{
color: red;
font-size: 15px ;
border: 4px solid red;
}
p{
color: blue;
font-size: 20px ;
border: 4px solid green;
}
</style>
</head>
<body>
<!--所有的div都有一个统一的样式
所有的p都有一个统一的样式
网站 = N个网页 +服务器+数据库
进行封装:
link标签
-->
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>
image.png
+++++++++
CSS的两大重点
- 属性
通过属性的复杂叠加才能做出好的网页 - 选择器
通过选择器找到对应的标签设置样式
CSS选择器 - 标签选择器
-
选择器的作用
选择对应的标签，为之添加样式 -
标签选择器
根据标签名找到标签
image.png
CSS选择器 - 类选择器
image.png
CSS选择器 - id选择器
image.png
CSS选择器 - 并列选择器
image.png
CSS选择器 - 符合选择器
image.png
CSS选择器 - 后代选择器
image.png
CSS选择器 - 后代直接选择器
image.png
CSS选择器 - 属性选择器
image.png
image.png
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的常见选择器</title>
<style>
/* 标签选择器 */
div{
color: red;
}
p{
color: blue;
}
/* 类选择器 */
.test1{
color: green;
}
/*id选择器 是一个唯一的,写过的id,之后不能再写 */
#main{
font-size: 30px;
}
/*并列选择器, 就是有多个条件的*/
#main, .test1{
border: 1px solid darkgreen;
}
/*复合选择器,开头必须是标签,且类是test1*/
p.test1{
background-color: yellow;
}
/* 后代选择器 */
div a{
color: red;
}
/*直接后代选择器 */
div.test1>a{
color: purple;
}
</style>
</head>
<body>
<div id="main">我是div标签</div>
<div>我是div标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<div class="test1">我是div标签</div>
<p class="test1">我是段落标签</p>
/*后代选择器*/
<div class="test1">
我是div标签
<a href="#">我是超链接</a>
<div>
<a href="#">我是二级链接</a>
</div>
</div>
</body>
</html>
image.png
CSS选择器 - 选择器优先级
image.png
- 优先级排序
important > 内联 > id > 类 > 标签 |伪类| 属性选择 >伪元素> 统配符 > 继承
HTML标签类型
HTML有N多个标签， 根据显示的类型， 主要可分为3大类
-
块级标签
独占一行的标签
能随时设置宽度和高度(比如div，p,h1,h2,ul,li) -
行内标签(内联标签)
多个行内标签能同时显示在一行
能随时设置高度和宽度(比如input,button)
修改标签的显示类型
CSS中有个display属性， 能修改标签的显示类型
none： 隐藏标签
block : 让标签变为块级标签
inline: 让标签变为行内标签
CSS属性
image.png
image.png
image.png
网友评论