文本相关标签
1.内容标题: h1-h6
独占一行, 自带上下间距, 字体加粗
2.换行: br
3.段落标签p
独占一行, 自带上下间距
4.水平分割线:hr
5.加粗b
6.斜体i
7.下划线u
8.删除线s
列表标签
-
无序列表: ul和 li 组合
-
有序列表: ol和li组合
-
列表嵌套: 有序和无序可以任意无限嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>内容<br>标题1</h1>
<h2 align="center">内容标题2</h2>
<h3 align="right">内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
<h1>列表标签</h1>
<h2>无序列表</h2>
<ul><!--unordered list-->
<li>刘备</li><!--list item-->
<li>诸葛亮</li><li>孙尚香</li><li>刘禅</li><li>关羽</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>Java基础</li>
<li>Java API</li>
<li>Web前端</li>
</ol>
<h2>列表嵌套</h2>
<ol>
<li>凉菜
<ul>
<li>拍黄瓜</li><li>花毛一体</li>
</ul>
</li>
<li>炒菜
<ul>
<li>宫保鸡丁</li><li>木须肉</li>
</ul>
</li>
</ol>
</body>
</html>
图片标签
-
src: 资源路径
-
相对路径:访问站内资源使用
-
和页面同级目录: 直接写图片名
-
在页面的上级目录: ../图片名
-
在页面的下级目录: 文件夹名/图片名
-
-
绝对路径:访问站外资源使用, 称为图片盗链,有找不到图片的风险
-
-
alt: 当图片不能正常显示时显示的文本
-
title:图片标题 当鼠标悬停时显示的文本
-
width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--src资源路径:
相对路径: 访问站内资源时使用
1. 资源和页面在同一目录:直接写图片名
2. 资源在页面的上级目录: ../图片名
3. 资源在页面的下级目录:文件夹名/图片名
绝对路径:访问站外资源时使用, 也称为图片盗链,有找不到图片的风险
alt:当图片不能正常显示时显示的文本
title:图片标题 悬停在图片上显示的内容
width/height:设置宽高
1. 像素
2. 百分比
如果只设置宽度高度会等比例缩放
-->
<img src="aa.png" alt="传奇哥的靓照">
<img src="../b.jpg" title="你看我美吗?" width="50%">
<img src="abc/c.jpg" width="300" height="300">
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg">
</body>
</html>
超链接a
-
href: 作用类似图片标签的src
-
a标签包裹文本为文本超链接 , 包裹图片为图片超链接
-
页面内部跳转, 在目的地元素里面添加id属性, 然后在超链接的href属性中写#id 这样点击时就可以跳转到目的地元素的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--href资源路径 类似图片标签的src属性-->
<a href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.png">超链接3</a>
<a href="http://www.tmooc.cn">
<img src="a.png" alt="">
</a>
<img src="../imgs/a.jpg" alt="">
<img id="top" src="../imgs/b.jpg" alt="">
<img src="../imgs/c.jpg" alt="">
<img src="../imgs/d.jpg" alt="">
<img src="../imgs/e.jpg" alt="">
<img src="../imgs/f.jpg" alt="">
<a href="#top">回到顶部</a>
</body>
</html>
表格标签table
-
相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
-
相关属性:border 边框 colspan跨列 rowspan跨行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"><!---->
<tr><!--table row 表示行-->
<!--colspan跨列-->
<td colspan="2" align="center">1-1</td><!--table data表格数据 表示列-->
<!--rowspan跨行-->
<td rowspan="2">1-3</td><td rowspan="3">1-4</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td>
</tr>
<tr>
<td align="center" colspan="3">3-1</td>
</tr>
</table>
<table border="1">
<caption>购物车</caption>
<tr><!--table head 表头 加粗并居中-->
<th>编号</th><th>名称</th><th>价格</th>
</tr>
<tr>
<td>1</td><td>康师傅冰红茶</td><td>3元</td>
</tr>
<tr>
<td>2</td><td>小茗同学</td><td>6元</td>
</tr>
</table>
</body>
</html>
表单form
-
作用: 获取用户输入的内容并提交给服务器
-
学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等
-
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--action设置提交地址-->
<form action="http://www.baidu.com">
<!--placeholder占位文本
maxlength最大字符长度
value设置控件的值
readonly只读-->
用户名:<input type="text" name="username" maxlength="5" value="tom"
readonly placeholder="请输入用户名"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
<form action="http://www.baidu.com">
<!--placeholder占位文本
maxlength最大字符长度
value设置控件的值
readonly只读-->
用户名:<input type="text" name="username" maxlength="5" value="tom"
readonly placeholder="请输入用户名"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
<!--value设置提交的值,如果不设置则提交on checked设置默认选中-->
性别:<input type="radio" name="gender" value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" checked value="w" id="r2">
<label for="r2">女</label><br>
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" checked value="hj">喝酒
<input type="checkbox" name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
所在地:
<select name="city">
<!--value设置提交的内容,如果不写则提交标签体的内容
selected设置默认选中-->
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select><br>
<input type="submit" value="注册">
<!--重置按钮-->
<input type="reset" value="重置按钮">
<!--自定义按钮-->
<input type="button" value="自定义按钮">
<hr>
<button type="submit">注册</button>
<button type="reset">重置按钮</button>
<button type="button">自定义按钮</button>
</form>
分区标签
-
作用: 可以理解为一个容器, 对多个有相关性的标签进行统一管理
-
常见的分区标签包括:
-
div: 独占一行
-
span: 共占一行
-
-
HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的:
-
header 头
-
main 主体
-
footer 脚
-
section 区域
-
nav 导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> </body> </html>
CSS层叠样式表
-
Cascading Style Sheet, 作用: 美化页面, 相当于装修
如何在HTML页面中添加CSS样式代码
-
三种引入方式:
-
内联: 在标签的style属性中添加样式代码, 弊端:不能复用
-
内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用
-
外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用
-
-
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*先通过选择器找到页面中的元素,然后再添加样式*/
h2{
color: blue;
}
</style>
<!--rel关系 引入的文件和页面之间的关系-->
<link rel="stylesheet" href="my.css">
</head>
<body>
<!--内联样式, 弊端不能复用-->
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>
h3{
color: green;
}
选择器
-
作用: 用来查找元素的, 找到之后才能添加样式
-
标签名选择器: 通过标签的名称选择页面中所有同名元素
-
格式: 标签名{样式代码}
-
id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复
-
格式: #id{样式代码}
-
类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择
-
格式: .class{样式代码}
-
分组选择器: 将多个选择器合并成一个选择器
-
格式: div,#id,.class{样式代码}
-
属性选择器: 通过元素的属性选择元素
-
格式: 标签名[属性名='值']{样式代码}
-
任意元素选择器: 选取页面中所有标签
-
格式: *{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#p1{color: red}
/*类选择器*/
.c1{color: blue}
/*分组选择器*/
h3,#p1,.c1{background-color: yellow}
/*属性选择器*/
input[type='text']{background-color: red}
input[type='password']{color: green}
/*任意元素选择器*/
*{
/*边框:粗细 样式 颜色*/
border: 1px solid red;
}
</style>
</head>
<body><!---->
<input type="text">
<input type="password">
<h3>我是h3</h3>
<p id="p1">苹果</p><p class="c1">香蕉</p><p>橘子</p>
<div>冰箱</div>
<div class="c1">洗衣机</div>
<div>电视</div>
</body>
</html>
选择器练习
-
通过内部样式实现以下功能
1. 把张学友改成绿色
2. 把刘德华和悟空改成蓝色
3. 修改取经3人和刘备的背景为黄色
4. 修改提交按钮的背景为红色,
自定义按钮的字为粉色
5. 给所有元素添加红色的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#zxy{color: green}
.c1{color: blue}
h1,h2{background-color: yellow}
input[type='submit']{background-color: red}
input[type='button']{color: pink}
*{border: 1px solid red}
</style>
</head>
<body>
<ul>
<li id="zxy">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="submit">
<input type="button" value="按钮">
</body>
</html>