1.标签分类
块元素 (行元素)
内联元素 (行内元素)
块元素的特点:
单个块元素在浏览器中默认独占一行
两个块元素不能够在一行显示, 他们会自动换成两行显示
块元素可以设置宽高等属性.
内联元素:
多个内联元素可以在一行显示
内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
2.常用块元素标签
1. 标题标签
表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
2.段落标签:
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
<p></p>
3. 通用块容器标签 div
表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式
<div></div>
3.常用内联元素标签
1.超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
跳转地址
说明:
a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
text-decoration:none; (取消下划线)
不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
如果想要跳转到当前页面的最上方时, 可以使用 #
a 标签有 target 属性
如果不设置该属性, 在当前页面打开新页面
如果设置该属性, 则会在新窗口中打开新页面
2.通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式
我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:
例如: 这是一段文字,其中李总需要强调,所以我们可以使用span来完成强调的操作.
<p>这是一个段落文字, 段落文字中有<span>特殊标志或者样式<span>的文字</p>
3. 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
<img src="images/pic.png" alt="图片">
说明:
src属性主要是添加要展示的图片地址
alt属性的作用:
图片加载失败时, 显示的提示信息
搜索引擎在收录图片时, 根据这个属性值来收录图片
制作无障碍网页, 方便盲人的读屏软件读取.
4.特殊标签
空格: 在html中, 空格一般会用: 表示
回车: 在html中回车换行一般用<br>表示
小于号( < ): 在html中一般用<表示
大于号( > ): 在html中一般用>表示
删除标签: del 或者 ( s )
倾斜标签: em 或者 ( i )
下划线标签: ins 或者 ( u )
5.总结:
HTML 整体是由标签组成的, 各个标签的功能很多都是重复的
同学们学习标签用法的时候多多练习即可
标签整体分为: 块级标签 和 行内标签
块级标签可以设置宽高值, 独占一行
行内标签自动设置宽高值, 一行内可以有多个
一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.
特殊情况, 需要记住: p 标签不能嵌套 div
a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]
标题标签用于设置标题, 共有6级
div就是一个无色透明的容器,看不见,摸不到
img标签主要用于设置图片
p 标签就是paragraph(段落) 通常用于包裹段落
span是一个行内元素通常用于p标签内部,个别文字设置时使用.
6.标签语义化
带语义的标签:
h1 ---- h6: 表示标题
p: 表示段落
img : 表示图片
a: 表示链接
不带语义 的标签:
div: 表示一个容器
span: 表示行内的一块内容
2.CSS基本用法
1.CSS引入方法
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">
2.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; }
a:link {color: red} /* 未访问时的状态 */ a:visited {color: orange} /* 已访问过的状态 */ a:hover {color: pink} /* 鼠标移动到链接上时的状态 */ a:active {color: yellow} /* 鼠标按下去时的状态 */
6.总结:
CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.
CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.
标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.
class 类选择器是经常使用的选择器. 可以多多练习
层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素
id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.
伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可
4. CSS属性入门
布局常用属性样式:
| 属性 | 作用 | 举例 |
|---|---|---|
| width | 设置元素(标签)的宽度 | width: 200px; |
| height | 设置元素(标签)的高度 | height: 200px; |
| background | 设置元素背景色或者背景图片(详看下面) | background: pink; |
| border | 设置元素四周的边框 | border: 1px solid pink; |
| border-top | 设置元素顶部边框 | border-top: 1px solid pink; |
| border-left | 设置元素左边边框 | border-left: 1px solid pink; |
| border-right | 设置元素右边边框 | border-right: 1px solid pink; |
| border-bottom | 设置元素底部边框 | border-bottom: 1px solid pink; |
| padding | 设置内边距(同时设置四个边,也可以分开设置) | padding: 20px; |
| margin | 设置外边距(同时设置四个边,也可以分开设置) | margin: 20px; |
| float | 设置元素浮动,浮动可以让块元素在一行排列 | float:left(左浮动) float: right(右浮动) |
补充说明:
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
我们可以对上面的代码进行合并书写:
background: url(bgimg.gif) no-repeat 5px 5px;
补充:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css 浮动:
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
文本常用样式属性:
| color | 设置文字的颜色 | color: red; |
| font-size | 设置文字的大小 | font-size: 12px; |
| font-family | 设置文字的字体 | font-family: 'Microsoft Yahei'; (微软雅黑) |
| font-weight | 设置文字是否加粗 | font-weight: bold; (bold:加粗 normal: 正常) |
| line-height | 设置文字的行高 | line-height: 24px; (文字高度加上文字上下间距共计24px) |
| text-decoration | 设置文字的下划线 | text-decoration:none; (取消下划线) |
提示:样式中的注释
/* 设置头部的样式 */ .header{ width:960px; height:80px; background:gold; }
5.盒子模型
设置宽高 width height
保持宽高不变:box-sizing:border-box
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框border
border:10px solid red;宽度为10px红色边框
border:10px dashed red ;宽度为10px红色虚线
border-top/bottom/left/right
设置内间距 padding
设置盒子四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /* 设置左边内间距30px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */上面的设置可以简写如下：
/* 四个值按照顺时针方向，分别设置的是 上 右 下 左 四个方向的内边距值。 */ padding：20px 40px 50px 30px;padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */
设置外间距margin
和padding用法相同
外间距居中技巧
margin: 0px auto;
盒子的真实尺寸 盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
6.列表标签
1.无序列表
使用方式: ul>li{列表标题}*3 <ul> <li>列表标题</li> <li>列表标题</li> <li>列表标题</li> </ul>
列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：
ul>(li>a[href=#]{列表标题 $})*3 <ul> <li><a href="#">列表标题 1</a></li> <li><a href="#">列表标题 2</a></li> <li><a href="#">列表标题 3</a></li> </ul>
显示效果:
显示效果:
2.有序列表
使用方式: ol>li{列表标题}*3 <ol> <li>列表标题</li> <li>列表标题</li> <li>列表标题</li> </ol>
显示效果:
总结:
我们在写页面的时候经常会使用列表标签
写列表标签的时候, 我们可以去掉前面的点或者是序号:
<style> li { list-style:none; /* 取消列表前面的序号或者是点 */ } </style>
写所有 html 页面的时候, 都可以使用 emmet 语法
text-decoration:none; (取消下划线)
7.表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
使用方式: <form action="" method=""> </form>
2、<label>标签 为表单元素定义文字标注
label 的 for 属性值可以和 input 的 id 名书写一致, 使 label 的点击也能够触发 input 的聚焦
label的使用方式: <label for="">Male</label> <label for="">Female</label> label的for属性设置: <label for="male">用户名: <input type="text" id="male">
3、<input>标签 定义通用的表单元素
type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
使用方法: <input type="text" name="username" placeholder="请您输入姓名"> <input type="password" name="password"> <input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" value="0"> 女 <input type="checkbox" name="hobby" value="1"> 唱歌 <input type="file" name="file"> <input type="submit"> <input type="reset"> <input type="button" value="按钮1">
4、<textarea>标签 定义多行文本输入框
使用方法: <textarea name="" placeholder="提示信息..." id="" cols="30" rows="10"> textarea的使用 </textarea>
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
使用方法: 创建带有 4 个选项的选择列表： <select name="province" id=""> <option value="1">北京</option> <option value="2">河北</option> <option value="3">河南</option> <option value="4">湖北</option> </select>
单行文本框文字提示
placeholder 设置input输入框的默认提示文字。
总结:
在前端页面中, 我们往往用表单来制作用户的注册, 登录等功能.
表单包含很多内容, 例如:
单选: radio
多选: checkbox
密码: password
文本: text
按钮: reset, submit, file
多行文本输入: textarea
下拉菜单: select option
表单( form )可以直接提交: 提交方法包含 get post
action: 提交的服务器地址
method: 提交的方法
8. 表格元素及相关样式
1、<table>标签
声明一个表格
2、<tr>标签
定义表格中的行
3、<td>和<th>标签
定义列以及列中的标题
td代表列，th表示列中的标题部分(加粗)
它们的常用属性如下：
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
表格相关样式属性
border-collapse 设置表格的边线合并，如：border-collapse:collapse;
border='1' 可以设置table的边框大小
text-align 可以设置对齐方式: left right center
总结:
在网页中, 表格用一般用 table 标签来做
表格中分为 行 和 列
表格中的行为 tr 标签
表格中的列为 td 标签
其中每一列都可以有一个标题, 我们可以使用 th 标签
<table> <tr> <th>标题一</th> <th>标题二</th> <th>标题三</th> <th>标题四</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
显示效果:
9. CSS属性进阶
1.文本常用样式属性进阶：
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:32px; 设置文字首行缩进32px
2. display属性
作用: 第一个决定了当前元素是否应该显示, 第二个决定了当前元素应该以什么类型显示
display 属性规定元素应该生成的框的类型。
display 的默认属性值是 inline, 此元素会被显示为内联元素
display属性是用来设置元素的类型及隐藏的，常用的属性有：
none 元素隐藏且不占位置
block 此元素会被显示为块元素
inline 此元素会被显示为内联元素
3.css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
10.定位
1. 定位分类:
我们可以使用 CSS 的 position 属性来设置元素的定位类型，position 的设置项如下：
static 默认值. 没有定位: 元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)
relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
absolute: 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
position:fixed;
left:30px;
3.层级
z-index:10;
<!-- .z-index后数字越大,层级越靠上 -->
11.页面嵌套
在一个页面中可以开一个局部的窗口，嵌入另外一个页面
制作这样的功能我们一般使用: iframe 标签来实现
使用方法: <iframe src="" frameborder=""> </iframe>
src: 设置另一个网页的地址
frameborder: 设置这个局部窗口边框的粗细
提升:
iframe 可以和 a 标签搭配使用, 呈现切换的效果:
我们知道
a标签有 target 属性:target="_blank" : 新开一个浏览器窗口显示链接的页面
如果 target 的值和 iframe 的 name 值保持相同, 则 a 标签切换后的 href 将作用到 iframe 的 src 上:
<a href="001.html" target="name">001页面</a> <a href="002.html" target="name">002页面</a> <a href="003.html" target="name">003页面</a> <iframe src="001.html" frameborder="0" name="name"></iframe>
12.权重值
内联样式的权重值最高: 1000 (内联: 写在标签上的样式)
标签选择器的权重值为最低: 1
类选择器的权重值为: 10 ( 了解 )
伪类选择器权重值为: 10 ( 了解 )
id 选择器的权重值为: 100
权重值越高,显示越在上边
2989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
