图片
<img src="地址" alt="提示信息">
* src属性主要是添加要展示的图片地址
* alt属性的作用:
* 图片加载失败时, 显示的提示信息
* 搜索引擎在收录图片时, 根据这个属性值来收录图片
* 制作无障碍网页, 方便盲人的读屏软件读取.
---------------------------------------------------------------------------------------
块级元素和内联元素的嵌套规则：
- 最基本：内联不能嵌套块级，块级可以嵌套内联元素
- 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div，就是我犯的错误。
- 特殊的<li>里面可以嵌套div（<li>可以但<p>不行）
- 块级元素与块级元素并列、内联元素与内联元素并列
------------------------------------------------------------------------------------------
### 标签语义化
> 在布局中需要尽量使用带语义的标签, 使用带语义的标签的目的首先是为了让搜索引擎能更好的理解网页的结构,提高网站在搜索中的排名(也叫作SEO), 其次是方便代码的阅读和维护
带语义的标签:
* h1 ---- h6: 表示标题
* p: 表示段落
* img : 表示图片
* a: 表示链接
不带语义 的标签:
* div: 表示一个容器
* span: 表示行内的一块内容
所以我们要根据网页上显示的内容, 使用合适的标签, 可以优化之前的代码.
----------------------------------------------------------------------------------------------
2. CSS引入方法
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.
<div style="width:100px; height:100px; background:red">这是个div标签</div>
2. 嵌入式:
通过 style 标签, 在网页上创建嵌入的样式表.
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
}
</style>
3.外联式:
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">
-------------------------------------------------------------------------------------------------
3. CSS选择器
1.标签选择器
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
通用格式:
标签名 {
属性名: 值;
...
}
例如:
div {
color: red;
}
p {
font-size: 18px;
}
一旦使用标签选择器,则当前页面上的所有该标签全部都--样式. 这一点需要注意
2.类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是css中应用最多的一种选择器
常见格式:
.类名 {
属性名: 值;
...
}
举例:
CSS部分:
<style>
.blue {
color: blue;
}
.header {
font-size: 19px;
}
</style>
HTML部分:
<div class="blue">这是个div标签</div>
<h3 class="blue header">这个是个h3标签</h3>
<p class="header">p标签部分</p>
3.层级选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
例如:
CSS部分:
.con {
width: 100px;
height: 100px;
}
.con span {
color: red;
}
.con .pink {
color: pink;
}
HTML部分:
<div class="con">
<span>这里是span标签的内容</span>
<div class="pink">这里是div中的div标签,我是粉色</div>
</div>
层级选择器: 按照标签的层级来匹配对应的标签
4. id选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
使用格式:
#id名 {
属性名: 值
}
举例：
CSS部分:
#box{
color:red
}
HTML部分:
<p id="box">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
5. 伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
CSS部分:
.box1 {
width:100px;
height:100px;
background:gold;
}
.box1:hover {
width:300px;
}
HTML部分:
<div class="box1">别看村子不咋大呀， 有山有水有树林， 邻里相亲多和睦， 老少爷们也合群</div>.
补充:
#input:focus {
outline: none; 去除边框的默认蓝色
border: 2px solid red;
}
============================================================================
标签的分类
注意: 在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签
标签按照显示的不同, 可以分为两类:
- 块元素 (行元素)
- 内联元素 (行内元素)
块元素的特点:
- 单个块元素在浏览器中默认独占一行
- 两个块元素不能够在一行显示, 他们会自动换成两行显示
- 块元素可以设置宽高等属性.
内联元素:
- 多个内联元素可以在一行显示
- 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
- 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
常用的块元素标签:
1. 标题标签
表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.段落标签:
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
<p>
既然你诚心诚意的问了，
我们就大发慈悲的告诉你！
为了防止世界被破坏，
为了守护世界的和平；
贯彻爱与真实的邪恶，
可爱又迷人的反派角色~~
武藏！
小次郎！
我们是穿梭在银河的火箭队！白洞，白色的明天在等着我们！！
就是这样~喵~~~~
</p>
段落标签中如果想要强制换行,需要使用<br>标签, 这个标签是个单个标签,所以只有一个.
另外在html中, 如果想要写大于号, 小于号, 或者空格等, 需要使用代码来实现, 这样更加优雅~
代码实现大于号: >
代码实现小于号: <
代码实现空格:
3. 通用块容器标签 div
表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式
<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
<h3>自我介绍</h3>
<p>
姑娘貌美一枝花，才学素养人品佳。
活泼开朗不八卦，头脑敏锐有想法。
踏实奋进不做假，乐于求知肯深挖。
舞文弄墨擅策划，慧心妙舌喜表达。
交友广泛爱分享，微博日日落不下。
四年深造象牙塔，学习实践两手抓。
只待应届招聘季，我花开后百花杀。
</p>
</div>
常用内联元素标签
1.超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">默认链接</a>
<a href="http://www.itcast.cn">原来的窗口打开界面</a>
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>
说明:
- a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
- 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
- 如果想要跳转到当前页面的最上方时, 可以使用 #
- a 标签有 target 属性
- 如果不设置该属性, 在当前页面打开新页面
- 如果设置该属性, 则会在新窗口中打开新页面
2.通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式
我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:
例如: 这是一段文字,其中
梅总
需要强调,所以我们可以使用span来完成强调的操作.
<p>这是一个段落文字, 段落文字中有<span>特殊标志或者样式<span>的文字</p>
3. 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
<img src="images/pic.png" alt="图片">
说明:
- src属性主要是添加要展示的图片地址
- alt属性的作用:
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.
特殊的一些标签:
空格: 在html中, 空格一般会用:
表示
回车: 在html中回车换行一般用
<br>
表示
小于号( < ): 在html中一般用
<
表示
大于号( > ): 在html中一般用
>
表示
删除标签: del 或者 ( s )
倾斜标签: em 或者 ( i )
下划线标签: ins 或者 ( u )