HTML5学习
1.1 HTML简介
HTML
- 超文本（图片、链接、视频、音乐、程序等）标记语言。
- 不是一种编程语言。
- HTML5是HTML的最新版本。
HTML5
- canvas
- video、audio
- 更好的本地离线存储
- 特殊内容元素：article、footer、header、nav、section
- 表单控件：calendar、data、time、Email、url、search
1.2 基本格式
代码展示。
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><!-- 文档的标签栏标题 -->Hello world！</title>
</head>
<body>
Welcome to my space.
</body>
</html>
1.3 三个常用标签
段落p、分割线hr、标题h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分段</title>
</head>
<body>
<h1>八阵图</h1>
<h2>作者：杜甫</h2>
<hr>
<p>功盖三分国，名成八阵图。</p>
<p>江流石不转，遗恨失吞吴。</p>
</body>
</html>
1.4 align和bgcolor
align的三个值：left（默认）、右对齐、center
bgcolor（颜色标识有两种）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>align and bgcolor</title>
</head>
<body bgcolor="beige">
<h1 align="center">八阵图</h1>
<h2 align="center">作者：杜甫</h2>
<hr>
<p align="center">功盖三分国，名成八阵图。</p>
<p align="center">江流石不转，遗恨失吞吴。</p>
</body>
</html>
1.5-1.6 文本元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本元素</title>
</head>
<body>
这是一个介绍文本元素的联系文档，这里将展示一些建议的文本元素标签以及他们的用法。<br>
<b>b加粗文字</b><br>
<strong>strong加粗</strong><br>
<i>i倾斜</i><br>
<em>em倾斜</em><br>
<cite>cite引用，其实是倾斜的效果</cite><br>
<dfn>dfn对文字的解释，实际上是倾斜文本</dfn><br>
<del>删除</del><br>
<s>删除线</s><br>
<webr>安全换行（英文下常用，当浏览器缩小时，从添加标签的位置断开排在下一行）</webr><br>
<u>u下划线</u><br>
<ins>ins下划线</ins><br>
<small>小号字体</small><br>
<sub>下标</sub>
<sup>上标</sup>
CH<sub>4</sub>,100m<sup>2</sup><br>
<abbr>标示一段文本的缩写，但实际么有效果</abbr> <br>
<q>引用其他地方的内容，实际作用是文本加上双引号</q> <br>
<code>代码片段</code> <br>
<var>编程中的变量</var><br>
<samp>您没有权限浏览该网页</samp><br>
<kbd>请摁Enter键</kbd><br>
<ruby>注音<rt>(zhu) (yin)</rt></ruby> <br>
<bdo dir="rtl">rtl从右到左，ltr从左往右</bdo><br>
<mark>mark标记</mark><br>
<time>2001-10-16</time><br>
<span>适用一般文本，无特殊效果</span>
</body>
</html>
1.7-1.8 超链接
//打开新网页后会关闭当前网页,只需在a中添加target属性，属性值为blank
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
1.链接到外部网站： <a href="http://baidu.com">百度一下，你就知道</a><br>
2.链接到本地文档： <a href="03.html">lesson 3</a><br>
3.设置图片作为链接： <a href="http://www.xiaoyangren.com.cn/"><img src="E:\荣耀X10\照片\2023.6.11 - 2023.8.27\IMG_20230710_091823_edit_245274789096947.jpg" width="100" height="100"></a><br>
4.邮件发送： <a href="mailto:2890652611@qq.com">联系我</a><br>
5.下载文件： <a href="tp.png">下载</a>
</body>
</html>
target：_self：当前位置；blank新窗口；
top最顶层框架；parent父框架
锚点链接
id
name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="http://baidu.com" target="_blank">百度一下</a><br>
<a href="#1">锚点1</a>
<a href="#2">锚点12</a>
<a href="#3">锚点123</a>
<br><br><br><br><br><br>
<a id="1">锚点1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="2">锚点12<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="3">锚点123<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
1.9 img
src
width height
alt(图片无法显示时显示的东西)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img</title>
</head>
<body>
<img src="3.jpg" alt="陆虎1" title="陆虎像你这样的朋友巡演" width="50%" height="30px">
<img src="1.jpg" alt="陆虎2">
</body>
</html>
1.10 绝对路径和相对路径
绝对路径：
https://www.nia.gov.cn/n897453/c1663129/content.html
F:\SublimeText\study
相对路径：
上一级：../xx
上上级路径：../../xx
下级：xx/xx.jpg
下下级：xx/xx/xx.jpg
1.11 列表
无序列表：样式值type：disc\circle\square
有序列表：start、type、value属性
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
- 无序列表表项1
<ol type="A" start="D">
<li>有序列表表项1</li>
<li>有序列表表项1</li>
<li>有序列表表项1</li>
<li>有序列表表项1</li>
</ol>
<ol type="I">
<li>有序列表表项1</li>
<li>有序列表表项1</li>
<li>有序列表表项1</li>
<li>有序列表表项1</li>
</ol>
<ol start="5">
<li>有序列表表项1</li>
<li>有序列表表项1</li>
<li value="10">有序列表表项1</li>
<li>有序列表表项1</li>
</ol>
<dl>
<dt>列表种类3</dt>
<dt>列表种类3</dt>
<dt>列表种类3</dt>
<dt>列表种类3</dt>
</dl>
</body>
</html>
1.12-1.13 表格
table表格的范围和外框
tr行
td单元格
th表格的标题单元格，是tr的子元素，只能放在tr里面元素自动加粗居中
colspan横向单元格合并
rowspan纵向单元格合并
caption表格加标题
thead表头、tfoot页脚、tbody主题
colgroup
col列的属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1">
<caption>这是表格的标题</caption>
<thead style="background-color: aquamarine;">
<tr>
<th colspan="4">标题</th>
</tr>
</thead>
<tbody>
<colgroup span="1" style="width: 150px;">
<col style="background-color: bisque;">
</col>
</colgroup>
<colgroup span="2" style="width: 200px;">
<col style="background-color: rgb(153, 89, 10);">
</col>
<col style="background-color: bisque;">
</col>
</colgroup>
<colgroup span="1" style="width: 150px;"></colgroup>
<tr align="center">
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr align="center">
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr align="center">
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr align="center">
<td>备注：</td>
<td colspan="3">345</td>
</tr>
</tbody>
</table>
</body>
1.14 特殊符号
例如"<“”>"，浏览器输入后会认为是标签从而无法识别
此处用到HTML字符实体
空格： ； 
小于：<；<
大于：>；>
引号："；"
copy：©；©；（著作权）®（注册商标）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊符号</title>
</head>
<body>
特殊  符号的使用<br>
特殊<>符号的使用<br>
<html>
©；©；（著作权）®（注册商标）
</body>
1.15 引入样式的三种方式
外部样式表
《head》中引入，代表引入外部的css文件
<link rel="stylesheet" type="text/css" href="">
内部样式表
《head》中引入，且优先级低于内联样式
<style type="text/css">
p{color: aquamarine;}
</style>
内联样式表
<p style="color:red"></p>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三种样式引入</title>
<!-- 外部样式表引入 -->
<link rel="stylesheet" type="text/css" href="">
<!-- 内部样式表引入 -->
<style type="text/css">
p{color: aquamarine;}
</style>
</head>
<body>
<p style="color:red">内联样式表</p>
<p style="color:red">内联样式表</p>
<p style="color:red">内联样式表</p>
</body>
1.16 iframe内联框架
iframe可以在文档中添加一个内联框架
只能在body元素中使用
属性：src=“https://www.baidu.com” frameborder=“3”，width，height（注意高度不能设置百分比，如果需要设置百分比可以在body中设置高度，再设置百分比）name
src指显示的网页，frameborder代表边框的厚度
通过设置链接a的target属性为iframe框架的name即可实现在内联的frame框架里实现页面跳转，而不是跳转到一个新网页
<body style="height: 600px">
<iframe src="https://www.bilibili.com" frameborder="3" width="70%" height="80%"></iframe>
</body>
<body style="height: 600px">
<a href="http://www.baidu.com" target="myframe">百度一下</a><br><br><br>
点击图片查看详细信息
<a href="https://baike.baidu.com/item/%E9%AA%84%E9%98%B3%E4%BC%B4%E6%88%91/51127011?fr=ge_ala" target="myframe"><img src="12.jpg" width="200px" height="100px"></a><br>
<iframe src="https://www.bilibili.com" frameborder="3" width="70%" height="80%" name="myframe"></iframe>
</body>
1.17 table布局
通过table的布局方式来放置网页的不同元素，并确定他们的位置。
<table style="background-color: azure; width: 100%; height: 800px;">
<tr style="background-color: aliceblue;">
<td colspan="3"></td>
</tr>
<tr style="height: 400px;">
<td style="background-color: beige; width: 20%;"></td>
<td><iframe src="https://www.bilibili.com" width="100%" height="100%" name="myframe"></iframe>
</td>
<td style="background-color: blanchedalmond; width: 20%;"></td>
</tr>
<tr style="background-color: rgb(255, 240, 249);">
<td colspan="3"></td>
</tr>
</table>
1.18 div元素与布局
块元素：自动换行，可作为容器在内部添加其他元素
h1-h6、hr、p、table、ul、ol
内联元素：与其他元素并联排列，不会换行
b、i、a、img
div是块元素，可包括其他的元素，也可包含div
通过设置浮动让中间两块元素排列
<body>
<div style="width: 100%; height: 800px;">
<div style="background-color: antiquewhite; width: 100%; height: 20%;" >head</div>
<div style="width: 20%; height: 80%; background-color: aqua; float: left;">left</div>
<div style="width: 80%; height: 80%; background-color:rebeccapurple; float: left;">right</div>
<div style="background-color: bisque; clear: left; width: 100%; height: 20%">foot</div>
</div>
</body>
1.19 通用属性
id（指定元素的识别名称）\class\style\title\dir(设置元素标签内容的文字方向，bdo标签)\lang(指定语言)
注意：
- name和id属性，属性值必须是大小写英文字母开头
- 属性值为数值时，必须为正整数，不能为0
- width和height正整数时默认px为单位，可以不加px，但在style中必须加px
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
