WEB——01HTML
常见的文本标签
- 内容标题：h1-h6
特点： 独占一行， 字体加粗， 自带上下间距 - 水平分割线：hr
- 段落标签：p
特点： 独占一行 自带上下间距 - 换行： br
- 加粗：b
- 斜体：i
- 下划线：u
- 删除线：s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--注释快捷键：ctrl+shift+/ -->
<!--align水平对齐方式-->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落<br>标签1</p>
<p>段落标签2</p>
<p>段落标签2</p>
<hr>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
</body>
</html>
列表标签
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<h3>无序列表</h3>
<ul><!-- unordered list-->
<li>刘备</li>
<li>孙尚香</li>
<li>吕布</li>
<li>貂蝉</li>
</ul>
<h3>有序列表</h3>
<ol><!-- ordered list-->
<li>java基础</li>
<li>java API</li>
<li>web前端</li>
</ol>
<h3>列表嵌套</h3>
<ul>
<li>凉菜</li>
<ol>
<li>拍黄瓜</li>
<li>东北大拉皮</li>
</ol>
<li>炒菜</li>
<ol>
<li>辣椒鸡蛋</li>
<li>木须肉</li>
</ol>
</ul>
</body>
</html>
图片标签img
- src：资源路径
- 相对路径：访问站内资源使用
- 图片和页面在同级目录： 直接写图片名
- 图片在页面的上级目录： …/图片名
- 图片在页面的下级目录： 文件夹名/图片名
- 绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险
- alt： 当图片不能正常显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--src:资源路径
相对路径：访问站内资源使用
图片和页面在同级目录
绝对路径：访问外站资源使用
src：资源路径
相对路径：访问站内资源使用
图片和页面在同级目录： 直接写图片名
图片在页面的上级目录： …/图片名
图片在页面的下级目录： 文件夹名/图片名
绝对路径： 访问站外资源使用
alt： 当图片不能正常显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放
./也表示当前目录，可以不写。
../表示当前目录的上一级目录
-->
<img src="./1.jpg" alt="" title="这是标题" width="50%">
<img src="./2.jpg" alt="风景">
<img src="abc/3.jpg" alt="" width="200" height="300">
</body>
</html>
超链接a
- href: 资源路径 作用类似图片标签的src
- a标签包裹文本为文本超链接, 包裹图片为图片超链接
- 页面内部跳转, 在目的地元素里面添加id属性, 然后通过超链接href="#id"的方式跳转到目的地元素的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a id="top" href="http://www.baidu.com">超链接1</a>
<a href="03简历练习.html">超链接2</a>
<a href="1.jpg">超链接3</a>
<a href="http://www.baidu.com">
<img src="1.jpg" width="100" alt="">
</a>
<a href="http://www.baidu.com">
<img src="https://cdn.tmooc.cn/bsfile//courseImg///bec035e6d9914dd786b760b644fcbb65.png" alt="">
</a>
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.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>
</head>
<body>
<h1>表格标签</h1>
<table border="1">
<tr><!--table row表格的行-->
<!--跨两列-->
<td colspan="2" align="center">1-1</td><!--table data 表格的(数据)列-->
<td>1-3</td><td rowspan="2">1-4</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="2" align="center">1-1</td><td rowspan="2">1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td><td>2-2</td>
</tr>
<tr>
<td colspan="2" align="center">3-2</td>
</tr>
</table>
<table border="1">
<caption>购物车</caption><!-- 标题 -->
<tr> <!-- table head表头 -->
<th>序号</th><th>商品名称</th><th>商品价格</th>
</tr>
<tr>
<td>1</td><td>华为meta40手机</td><td>5000</td>
</tr>
<tr>
<td>2</td><td>小米6手机</td><td>2000</td>
</tr>
<tr>
<td>总价:</td><td colspan="2" align="center">8000元</td>
</tr>
</table>
</body>
</html>
表单form
- 作用:获取用户输入的各种信息并且把这些信息提交给服务器
- 需要学习form表单中的各种控件, 包括: 文本框,密码框 单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等
- 相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--获取用户输入的各种信息并把这些信息提交给服务器，学习表单的各种控件-->
<!-- action设置提交地址-->
<form action="http://www.tmooc.cn">
<!-- placeholder占位文本 value设置默认值 maxlength最大字符长度 -->
用户名:<input type="text" name="username" value="默认" maxlength="10"
placeholder="请输入用户名" readonly><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">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz" selected>广州</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- 重置按钮 -->
<input type="reset">
<!-- 自定义按钮 -->
<input type="button" value="自定义按钮">
<button type="submit"> 提交</button>
<button type="reset">重置</button>
<button type="button">自定义按钮</button>
</form>
</body>
</html>
如何在html页面中添加CSS样式代码
- 内联样式：在标签的style属性中添加样式代码, 弊端:不能复用
- 内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用
- 外部样式：在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开.
- 工作中外部样式使用的最多, 学习过程中内部样式用的多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2{
color:blue;
background-color: bisque;
}
</style>
<!-- 引入外部css样式文件 -->
<link rel="stylesheet" href="my.css">
</head>
<body>
<!--内联样式，不能复用-->
<h1 style="color: red;background-color: #d1d5d4">内联样式1</h1>
<h1>内联样式2</h1>
<!--可以复用，但不能多个页面复用-->
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>
选择器
标签名选择器
id选择器
- 格式: #id{样式代码}
- 当需要选择页面中某一个元素时使用
类选择器
- 格式: .class{样式代码}
- 当需要选择页面中多个不相关元素时, 给多个元素添加相同的class属性值即可
分组选择器
- 格式: p,#abc,.xyz{样式代码}
- 将多个选择器合并为一个选择器的写法
属性选择器
分区标签
- 可以理解为是一个容器,将多个有相关性的标签添加到一个分区标签里面, 便于统一管理
常见的两种分区标签: - div:块级分区元素, 特点: 独占一行
- span: 行内分区元素, 特点: 共占一行
- 如何对页面内容进行分区:
一个页面至少分为3大区, 头/体/脚, 每一个大区再划分n个小区 - html5标准中新增了几个分区标签,作用和div一样,为了提高代码的可读性 ,包括: header头,footer脚,section区域, article文章/正文, nav导航
选择器(续)
子孙后代选择器
- 格式: body div div p{样式代码}
- 上面格式匹配的是body里面的div里面的div里面的所有p(包括子元素和后代元素)
子元素选择器
- 格式: body>div>div>p{样式代码}
- 上面格式匹配的是body里面的div里面的div里面的所有子元素p(不包含后代元素)
伪类选择器
- 选择的是元素的状态,包括以下四种状态
- a:link未访问/visited访问过/hover悬停/active点击{样式代码}
选择器回顾
- 标签名 div{}
- id选择器 #id{}
- 类选择器 .class{}
- 分组选择器 div,#id,.class{}
- 属性选择器 input[属性名=‘值’]{}
- 任意元素 *{}
- 子孙后代 div div p{}
- 子元素选择器 div>div>p{}
- 伪类选择器 a:link/visited/hover/active
1141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
