文章目录
1.HTML常见标签
1.1.font字体标签
- font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color 属性修改颜色
face 属性修改字体
size 属性修改文本大小
<body>
<!-- 字体标签
需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
-->
<font color="red" face="宋体" size="7">我是字体标签</font> </body>
1.2.特殊字符
- < :
<
- > :
>
- 空格 :
- 换行:
<br>
<body> <!-- 特殊字符
需求 1:把 <br> 换行标签 变成文本 转换成字符显示在页面上
-->
我是<br>标签<br/> 你好
帅啊! </body>
<ins>
:插入,默认样式下横线,类似于填空题给横线<em>
:强调,默认样式斜体<del>
:删除,默认样式中间横线
1.3.标题标签
- 标题标签是 h1 到 h6 ,h1 最大, h6 最小
- align 属性是对齐属性
1. left 左对齐(默认)
2. center 剧中
3. right 右对齐
<body> <!-- 标题标签
需求 1:演示标题 1 到 标题 6 的
h1 - h6 都是标题标签
-->
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
</body>
1.4.超链接
在网页中所有点击之后可以跳转的内容都是超连接
-
a 标签是 超链接
href 属性设置连接的地址 target 属性设置哪个目标进行跳转 _self 表示当前页面(默认值) _blank 表示打开新页面来进行跳转
<body>
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>
- 空链接:用#在href中占位
<a href="#">空链接</a> //回到顶部
- 网页元素链接:可以给图片等元素添加链接
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>
- 锚点链接: 可以快速定位到页面中的某个位置.
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>
-
禁止 a 标签跳转:
<a href="javascript:void(0);">
或者<a href="javascript:;">
1.5.列表标签
-
有序列表 ol
-
无序列表 ul
ol , ul对应列表项 li
-
自定义列表 dl
对应列表项 dd
<h3>无序列表</h3>
<ul>
<li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>我的老婆们</dt>
<dd>咬人猫</dd>
<dd>兔总裁</dd>
<dd>阿叶君</dd>
</dl>
1.6.img标签
- 在javase中路径分为相对路径和绝对路径
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名 - 在web中路径分为相对路径和绝对路径
a. 相对路径:
.
表示当前文件所在的目录
..
表示当前文件所在的上一级目录
文件名 表示当前文件所在的目录的文件,相当于./文件名
( ./可以省略 )
b. 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
<img src="../imgs/1.jpg" width="200" height="250" border="1"/>
<img src="../imgs/2.jpg" width="200" height="250"/>
<img src="../imgs/3.jpg" width="200" height="250"/>
<img src="../imgs/4.jpg" width="200" height="250"/>
<img src="../imgs/5.jpg" width="200" height="250"/>
</body>
- img标签是图片标签,用来显示图片
- alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
- title: 提示文本. 鼠标放到图片上, 就会有提示.
- width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
- border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">
1.7.表格标签
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示有边框(数字越大, 边框越粗), “none” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.
cellspacing 设置单元格间距
<body>
<table border="1" width="300" height="300">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
1.8.表格跨行跨列
- 跨行合并: rowspan=“n”
- 跨列合并: colspan=“n”
<body>
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td colspan="2" rowspan="2">4.1</td>
<td>4.3</td>
<td>4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.3</td>
<td>5.4</td>
<td>5.5</td>
</tr>
</table>
</body>
1.9.iframe标签
-
iframe标签可以在页面上开辟一个小区域显示一个单独的页面
-
iframe和a标签一起使用的步骤:
①在iframe标签中使用name属性定义一个名称
②在a标签的target属性上设置iframe的name属性值
<body>
<iframe src="5.img标签.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="6.表格标签.html"target="abc">6.表格标签.html</a></li>
<li><a href="7.表格跨行跨列.html" target="abc">7.表格跨行跨列.html</a></li>
</ul>
</body>
注:在下面点击超链接,可在上面窗口显示对应页面内容。
1.10.排版标签
- div :独占一行,是个大盒子
- span:不独占一行,一个小盒子
1.11.表单列表
- 什么是表单?
表单就是HTML用来收集用户信息的所有元素集合,然后把这些信息发送给服务器
分成两个部分:
-
表单域: 包含表单元素的区域. 重点是 form 标签.
-
表单控件: 输入框, 提交按钮等. 重点是 input 标签.
表单设置需要的标签:
1. form标签
描述了要把数据按照什么方式, 提交到哪个页面中.
<form action="test.html">
... [form 的内容]
</form>
2. input标签
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
- value: input 中的默认值.
- maxlength: 设定最大长度.
(1)文本框
<input type="text">
(2)密码框
<input type="password">
/**是密码输入框(无法看见密码内容)*/
(3)单选框
<input type="radio" name=“sex”>男
<input type="radio" name=“sex”>女
name相同的input视为一组,互相互斥,name不同,互不影响
checked="checked"表示默认选中,用户没选之前,自动选中一个注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.
(4)复选框
<input type="checkbox" name="爱好" value="1"> 吃饭
<input type="checkbox" name="爱好" value="2"> 睡觉
<input type="checkbox" name="爱好" value="3">打游戏
(5)普通按钮
<input type="button" value="我是个按钮">
(6)提交按钮
<form action="http://www.baidu.com">
<input type="text" name="username">//必须写name,允许重复
<input type="submit" value="提交">
<div>
<button>点击提交</button>
</div>
</form>
- 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
- url:路径?query-string(查询字符串)
- ?query-string本身是可选的:发生在form表单提交之后
- 格式:?key=value (value是用户输入进去的)
- 当有多个查询字符串,用&连接
(7)重置按钮
<input type="reset" value="重置"/>
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
(8)选择文件
<input type="file">
3. lable 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 提升用户体验
<label for="male">男</label>
<input id="male" type="radio" name="sex">
4. select 下拉列表框
option 中定义 selected=“selected” 表示默认选中.
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
textarea表示多行文本输入框(其实是标签和结束标签中间才是内容)
rows可以显示几行的高度
cols可以显示几个字符的宽度
2.CSS
2.1.基本语法规范
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
2.2.引入方式
1.内部样式表
style 标签可以放到页面任意位置. 一般放到 head 标签内.
优点:这样做能够让样式和页面结构分离.
缺点:分离的还不够彻底. 尤其是 css 内容多的时候.
2.行内样式表
缺点是不能写太复杂的样式.
<style>
div {
color: red;
}
</style>
/*行内样式表*/
<div style="color:green">想要生活过的去, 头上总得带点绿</div>
3.外部样式
实际开发中最常用的方式.
- 创建一个 css 文件.
- 使用 link 标签引入 css
<link rel="stylesheet" href="index.css">
rel:定义当前文档与被链接文档之间的关系,在这里指定为“stylesheet”,表示被链接的文档是一个样式文件。
href:定义所链接的外部样式表文件的url,可以是相对路径,也可以是绝对路径。
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效.
4.代码风格约定
/*1.紧凑格式*/
h3{ color: deeppink;font-size:20px;}
/*2.展开格式(推荐)全部小写,{前有空格,属性值前有空格*/
h3 { color: deeppink;
font-size: 20px;
}
2.3.CSS基础选择器
1. 标签选择器
- 标签选择器(元素选择器)是指用HTML标签名作为选择器,按标签名进行分类,为页面中某一类标签指定统一的CSS样式
标签名 {
属性1:属性值1;
属性2:属性值2;
}
div {
color: pink;
font-size: 14px;
}
2. 类选择器
- 类选择器使用==“ . ”(英文的点号)==后面跟类名
.类名 {
属性1:属性值1;
属性2:属性值2;
}
<p class= '类名'></p>
注意:
a. 长名称或词组可以使用中横线来为选择器命名
b. 多个类型选择器:各个类名中间用空格隔开
3. id选择器
- id选择器使用#进行标识,后面紧跟id名
- 元素的id值是唯一的,只能对应于文档中的某一具体元素
#id名 {
属性1:属性值1;
属性2:属性值2;
}
<p id="id名"></p>
例如:id为box的div会变成粉色
/*样式*/
# box{
color : pink;
}
/*标签*/
<div id = "box"></div>
4. 通配符选择器
- 通配符选择器用* 表示,就是选择所有的标签
- 注意:*会匹配页面所有元素,降低页面响应速度,不建议随意使用。
通常通配符定义CSS样式,用来清除所有HTML标记的默认边框。
*{ margin : 0; /*定义外边距*/ padding : 0; /*定义内边距*/ }
5. 基础选择器总结
作用 | 缺点 | 使用情况 | 用法 | |
---|---|---|---|---|
标签选择器 | 选出相同的标签 | 不能差异化选择 | 较多 | p{color:red;} |
类选择器 | 可选出1个或多个标签 | 可以根据需求选择 | 非常多 | .box{color: red;} |
id选择器 | 一次只能选择1个标签 | 只能使用一次 | 不推荐使用 | #box{color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | *{color: red;} |
2.4.CSS复合选择器
1.后代选择器
- 用来选择元素,或者元素组的子孙后代
- 其写法:先写爷爷,父亲,再写儿子,孙子,中间用空格隔开
h1 em {color:red;}
/*会把作为 h1 元素后代的 em 元素的文本变为 红色。
其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中*/
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
2.子元素选择器
- 只能选择作为某元素子元素的元素
- 写法:父级标签在前面,子级标签在后面,中间用>连接
- 这里的子元素,只代表亲儿子,不包括孙子之类的元素
<head>
<style>
div>h2 {
background-color: rgb(238, 164, 177);
}
div>a{
background-color: rgb(77, 161, 187);
}
</style>
</head>
<body>
/*h2是div的亲儿子,所以背景色会奏效,a标签在这里是div的孙子,不奏效*/
<div>
<h2>二级标题</h2>
</div>
<div>
<span><a href="#">我是一个链接</a></span>
</div>
</body>
3.并集选择器
- 利用并集选择器,可以让代码更简洁,通过
,
连接而成,通常用于集体声明
.one , p, #test { color : red; }
表示 .one , p, #test 这三个选择器都会执行颜色为红色
4.交集选择器
h3.class{ color:red; font-size:25px;}
- 第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
5.链接伪类选择器
- 用于某些选择器添加特殊的效果,写的时候,尽量按照
lvha
的顺序书写,否则可能出错
a:link
:未访问的链接
a:visited
:已访问的链接
a:hover
:鼠标移动到链接上
a:active
:选定的链接
<head>
<style>
a{
font-weight: 700;
font-size: 16px;
color: gray;
text-decoration: none;/*清除链接默认下划线*/
}
a:hover{
color: hotpink;/*鼠标经过的时候,字体由灰色变为粉色*/
}
</style>
</head>
<body>
<div>
<a href="www.baidu.com">百度</a>
</div>
</body>
2.5.font字体
1. font-size
- font-size属性用于设置字体大小
- 谷歌浏览器默认文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确的大小,不要默认大小,一般给body指定整个页面的文字大小
p{
font-size: 20px;
}
2. font-family
- font-family属性设置哪一种字体
p{
font-family: '宋体';
}
3. font-weight
属性 | 描述 |
---|---|
normal | 默认值(不加粗) |
bold | 定义粗体(加粗的) |
100~900 | 400=normal,700=bold |
4. font-style
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准字体样式 |
italic | 斜体 |
5. font
- font综合设置字体样式
- 注意:使用font属性时,必须按照下面语法样式的顺序书写,不能更换顺序,各个属性以空格隔开
- 其中字号font-size和字体 font-family必须同时出现
选择器{
font: font-style font-weight font-size font-family;
}
.box{
font: 'italic' 700 14px '微软雅黑'
}
2.5.CSS外观属性
1. color
- color用于定义文本的颜色
- 常用16进制写法:#f0(红色简写)
属性 | 属性值 |
---|---|
预定义颜色值 | red,green,bule,pink |
十六进制 | #FF0000,#FF6600 |
RGB | rgb(255,0,0) 或者rgb(100%,0%,0%) |
2. text-align
- text-align用于设置文本内容的水平对齐方式
- 注意:
text-align :center
是让盒子里面的文本内容水平居中,而不是让盒子居中
属性 | 详情 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
3. line-height
- line-height用于设置行间距,一般称为行高
- 一般情况,行距比字号大7~8像素就可以了
行高=上距离+内容高度+下距离
上距离和下距离相等,这样文字是居中显示的
- 可以使用display:flex;布局方式让文本内容水平垂直居中
display:flex;
align-items:center;
justify-content:center;
4. text-indent
- text-indent 属性用于设置首行文本的缩进
- 建议使用em作为设置单位
- 1em就是一个字的宽度,首行缩进2em
5.text-decoration
- text-decoration通常我们用于给链接修改装饰效果
属性值 | 描述 |
---|---|
none | 默认,常用于取消下划线 |
underline | 下划线,链接常常自带 |
overline | 文本上的一条线(不用) |
line-through | 穿过文本的一条线(不常用) |
<style>
.a1 {
text-decoration:none;/*取消链接的下划线*/
}
</style>
<a href="http://www.baidu.com" class="a1">百度</a>
2.6.标签显示模式
HTML标签一般分为块标签和行内标签两种类型,他们也称为块元素和行内元素
1.块级元素
常见的块元素有:h1~h6,p,div,ul,ol,li 等
块级元素的特点:
- 独占一行
- 高度,宽度,外边距,内边距都可以控制
- 宽度默认是容器(父级宽度)的100%
- 是一个盒子,里面可以放行内或者块级元素
- 注意:只有文字才能组成段落,因此 < p >标签里面不能放块级元素,h1~h6,dt 都是文字类块级标签,里面不能放其他块级元素
2.行内元素
也称为内联元素
常见的行内元素有a ,strong,b,em,i,del,s ,ins ,u , span
行内元素的特点:
- 相邻的行内元素在一行上,一行可以显示多个
- 高度,宽度直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
注意:
- 链接里面不能再放链接
3.行内块元素
在行内元素中这几个特殊元素: img,input,td,可以对他们设置宽高和对齐属性,也可以把他们看成是行内块元素
行内块元素特点:
- 和相邻的行内元素(行内块元素)在一行上,一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度,宽度,外边距,内边距都可以控制
4.标签显示模式转换
- 块转行内:
display:inline;
- 行内转块:
display:block;
- 块,行内元素转为行内块:
display:inline-block;
三种模式总结:
元素模式 | 元素排列 | 设置样式 | 默认宽度 |
---|---|---|---|
块级元素 | 一行放一个 | 可以设置宽度,高度 | 容器的100% |
行内元素 | 一行放多个 | 不可以直接设置宽度,高度 | 本身内容的宽度 |
行内块元素 | 一行多个 | 可以设置宽度,高度 | 本身内容的宽度 |
2.7.CSS背景(background)
1.背景颜色
background-color:颜色值;
/*默认值是transparent 透明的*/
div {
background-color: pink;
}
2.背景图片
语法:
background-image:none | url(url);
例如:
background-image: url("image1.png");
3.背景平铺
background-repeat:repeat | no-repeat | repeat-x | repeat-y
参数 | 作用 |
---|---|
repeat | 背景图片在纵向和横向上平铺(默认) |
no-repeat | 背景图片不平铺 |
repeat-x | 背景图片在横向上平铺 |
repeat-y | 背景图片在纵向上平铺 |
4.背景位置
background-position:length || position
参数 | 值 |
---|---|
length | 百分数 /长度值 |
position | top / center / bottom / left / center / right 方位名词 |
注意:
- == 必须先指定background-image属性==
- position后面是x,y坐标,也可以是方位名词或精确单位
- 如果指定两个值,两个值都是方位名词,则这两个值前后顺序无关,如 left top 和 top left效果一样
- 如果position后面是精确坐标,第一个肯定是x,第二个肯定是y
5.背景半透明
background:rgba(0,0,0,0.3);
- 最后一个参数是alpha透明度,取值范围0~1之间
- 也可以简写成:
background:rgba(0,0,0,.3);
- 注意:背景半透明是指盒子背景半透明,盒子里面内容不影响
opacity: .2
- 设置opacity元素,他的所有后代元素会随着一起具有透明性(一般用于调整图片或者模块的整体不透明度)
2.8.盒子模型
1. 盒子模型
- 把HTML页面的布局元素看做是一个矩形的盒子
- 盒子模型组成元素:边框
border
,内边距padding
,外边距margin
,元素内容content
- 当设置
box-sizing:content-box;
时,采用标准模式计算 - 当设置
box-sizing:border-box;
时,你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。 - 元素实际大小计算:
内容宽度:height = content height + padding + border
内容高度:width = content width +padding + border
- 盒子实际大小:
内容宽度和高度 + 内边距 + 边框
2.盒子边框
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位为px |
border-style | 边框样式 |
border-color | 边框颜色 |
边框样式:
- none:没有边框(默认值)
- solid:边框为单实线(常用)
- dashed:边框为虚线
- dotted:边框为点线
3.内边距
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
4.外边距
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
块级盒子水平居中:
- 盒子必须指定宽度
- 然后给左右的外边距都设置auto
如:margin:auto;