HTML5学习笔记
文章目录
- 1. HTML基本框架
- 1. 文本格式化标签
- 1.1 加粗
- 1.2 倾斜
- 1.3 删除线
- 1.4 下划线
- 2. div和span标签
- 3. 图像标签
- 4. 链接标签
- 5. 特殊符号
- 6. 表格标签
- 6.1 表格结构标签
- 6.2 合并单元格
- 7. 列表标签
- 7.1 无序列表（重点）
- 7.2 有序列表
- 7.3 自定义列表（重点）
- 8. 表单
- 8.1 表单的组成
1. HTML基本框架
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
body>
html>
1. 文本格式化标签
1.1 加粗
1.2 倾斜
1.3 删除线
1.4 下划线
更推荐使用strong、em、del、ins标签，因为语义更强烈。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p>
我是<strong>加粗strong>的文字
我是<b>加粗b>的文字
我是<em>倾斜em>的文字
我是<i>倾斜i>的文字
我是<del>删除线del>的文字
我是<s>删除线s>的文字
我是<ins>下划线ins>
我是<u>下划线u>
p>
body>
html>
2. div和span标签
div和span标签是没有语义的，它们只是盒子，用来装内容。
特点：
- div标签一行只能放一个，是大盒子。
- span标签一行能放多个，紧挨在一起，是小盒子。
例如，
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>我是一个divdiv>123
<div>我是一个divdiv>123
body>
html>
效果为：
再比如，
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<span>百度span>
<span>谷歌span>
<span>耿耿span>
body>
html>
效果为：
3. 图像标签
img标签的属性值：
- src：图片路径。
- alt：当图像不能显示时显示的替换文本。
- title：鼠标放到图像上显示的提示文本。
- width：图像的宽度。
- height：图像的高度。
- border：图像的边框粗细。
演示：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>演示img标签的使用：div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597663128022&di=339e1e1430b635c7065defdda7ebbcd2&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201508%2F14%2F20150814074658_xRSe5.jpeg"
alt="猫猫" title="我是猫猫" width="200px">
body>
html>
4. 链接标签
语法格式：
<a href="跳转目标" target="目标窗口的打开方式">文本或图像a>
target属性：
- _self：默认值，在当前窗口打开。
- _blank：在新窗口打开。
空链接：
href="#"，表示链接到当前页面。
图片链接：
<a href="xx"><img src="xx">a>
锚点链接：
点击链接，可以快速定位到页面中的某个位置。
- 给要跳转到的标签设置 id 属性。
- 在a标签的href属性中设置 # + id 。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<a href="#u1">第一章a>
<a href="#u2">第二章a>
<a href="#u3">第三章a>
<a href="#u4">第四章a>
<div id="u1" style="height: 200px">第一章div>
<div id="u2" style="height: 200px">第二章div>
<div id="u3" style="height: 200px">第三章div>
<div id="u4" style="height: 200px">第四章div>
body>
html>
5. 特殊符号
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>空格： div>
<div>大于号：>div>
<div>小于号：<div>
<div>and符号：&div>
<div>乘号：×div>
body>
html>
6. 表格标签
tr标签：表格的一行。
td标签：一行中的一个单元格。
th标签：同td，表示表头，文本会加粗+居中显示。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table>
<tr> <th>姓名th> <th>年龄th> <th>学校th> tr>
<tr> <td>鸣人td> <td>20td> <td>木叶td> tr>
<tr> <td>佐助td> <td>20td> <td>木叶td> tr>
table>
body>
html>
6.1 表格结构标签
thead标签：表格的头部区域。
tbody标签：表格的主体区域。
6.2 合并单元格
跨行和跨列分别设置rowspan、colspan属性即可。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table>
<tr> <th>姓名th> <th>年龄th> <th>学校th> tr>
<tr> <td rowspan="2">鸣人td> <td>20td> <td>木叶td> tr>
<tr> <td>21td> <td>木叶td> tr>
table>
body>
html>
7. 列表标签
7.1 无序列表（重点）
无序列表的特点：
- 各个列表项没有顺序级别之分，是并列的。
- ul 中只能直接嵌套 li 。
- li 相当于一个容器，可以容纳所有元素。
- 无序列表会带有自己的样式属性，但在实际使用时，会通过CSS进行设置。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h4>你喜欢的书？h4>
<ul>
<li>哈利波特li>
<li>三体li>
<li>围城li>
ul>
body>
html>
7.2 有序列表
与无序列表相同，把 ul 换成 ol。
7.3 自定义列表（重点）
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<dl>
<dt>关注我们dt>
<dd>新浪微博dd>
<dd>官方微信dd>
<dd>腾讯球球dd>
dl>
body>
html>
8. 表单
8.1 表单的组成
在HTML中，一个完整的表单通常由三部分组成：
- 表单域
- 表单控件
- 提示信息