HTML 复习查漏补缺笔记
基本理论概念
1.1 文件路径
1.2 链接和锚点
1.3 块元素&&内联元素
1.4 HTML 头部
1.5 HTM5新特性
1.6 字符实体
常用元素
2.1 W3C速查手册
2.2 HTML5语义化标签
表单
3.1 表单常用属性
3.2 <select>
标签
3.3 <textarea>
标签
3.4 <button>
标签
3.5 <datalist>
预定义选型列表标签(类似于下拉列表)
基本理论概念
1. 文件路径
路径 | 描述 |
---|---|
<img src="picture.jpg"> | picture.jpg 位于与当前网页相同的文件夹 |
<img src="images/picture.jpg"> | picture.jpg 位于当前文件夹的 images 文件夹中 |
<img src="/images/picture.jpg"> | picture.jpg 当前站点根目录的 images 文件夹中 |
<img src="../picture.jpg"> | picture.jpg 位于当前文件夹的上一级文件夹中 |
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower"> | 绝对路径 |
2. 链接和锚点
2.1 超链接属性介绍
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
2.2 href使用示例
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
2.3 name锚点示例
<a href="#buttom">跳转到底部</a>
<a name="buttom">底部</a>
3. 块元素&&内联元素
3.1 块元素 block level element
- 块计元素在浏览器显示时,通常以新行来开始(和结束)
<h1><p><ul><table><div>
3.2 内联元素 inline element
- 内联元素通常不会以新行开始
<b><td><a><img>
3. HTML 头部
3.1 <head>
元素
- 头部元素的容器。可包含脚本,知识浏览器样式链接,提供元信息…
<!-- 可以添加元素 -->
<title>、<base>、<link>、<meta>、<script> 以及 <style>
3.2 <title>
元素
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
<title>Title of the document</title>
3.3 <base>
元素
- 规定页面上所有链接默认的地址或者默认的目标
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
3.4 <link>
元素
- 通常链接 CSS 资源
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
3.5 <style>
元素
- 定义样式
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
3.6 <meta>
元素
- 关于数据的信息。meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
3.7 <script>
元素
- 页面脚本资源
<script src="js/my.js" />
<script>
console.log("Hello");
<script>
4. HTM5新特性
4.1 文档声明示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
4.2 新特性
- 新的语义元素,比如
<header>
,<footer>
,<article>
, and<section>
。 - 新的表单控件,比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由
<canvas>
和<svg>
) - 强大的多媒体支持(借由
<video>
和<audio>
) - 强大的新 API,比如用本地存储取代 cookie。
5. 字符实体
符号 | 解释 | HTML对应写法 |
---|---|---|
> | 空格 | |
< | 小于号 | < < |
> | 大于号 | > > |
& | 和号 | & & |
" | 引号 | " " |
’ | 撇号 | ' (IE不支持) |
¢ | 分(cent) | ¢ ¢ |
£ | 镑(pound) | £ £ |
¥ | 元(yen) | ¥ ¥ |
€ | 欧元(euro) | € € |
§ | 小节 | § § |
© | 版权(copyright) | © © |
® | 注册商标 | ® ® |
™ | 商标 | ™ ™ |
× | 乘号 | × × |
÷ | 除号 | ÷ ÷ |
常用元素
1. W3C速查手册
2. HTML5语义化标签
标签 | 描述 |
---|---|
<article> | 定义文章。 |
<aside> | 定义页面内容以外的内容。 |
<details> | 定义用户能够查看或隐藏的额外细节。 |
<figcaption> | 定义 <figure> 元素的标题。 |
<figure> | 规定自包含内容,比如图示、图表、照片、代码清单等。 |
<footer> | 定义文档或节的页脚。 |
<header> | 规定文档或节的页眉。 |
<main> | 规定文档的主内容。 |
<mark> | 定义重要的或强调的文本。 |
<nav> | 定义导航链接。 |
<section> | 定义文档中的节。 |
<summary> | 定义 <details> 元素的可见标题。 |
<time> | 定义日期/时间。 |
表单
1. 表单常用属性
1.1 通用
name 提交表单所必须的标签属性,用于服务器数据封装,数据获取
1.2 标签使用
action 强求服务器资源路径
method 请求类型,常用 get post
target 是否在新的标签中打开链接,默认 _self 在新标签页中打开
1.3 …等其他表单元素使用
type 输入类型,text color date datetime datetime-local email month number range search tel time url week
限制属性 | 描述 |
---|---|
disabled | 规定输入字段应该被禁用。 |
max | 规定输入字段的最大值。 |
maxlength | 规定输入字段的最大字符数。 |
min | 规定输入字段的最小值。 |
pattern | 规定通过其检查输入值的正则表达式。 |
readonly | 规定输入字段为只读(无法修改)。 |
required | 规定输入字段是必需的(必需填写)。 |
size | 规定输入字段的宽度(以字符计)。 |
step | 规定输入字段的合法数字间隔。 |
value | 规定输入字段的默认值。 |
2. <select>
标签
<select name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
3. <textarea>
标签
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
4. <button>
标签
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
5. <datalist>
预定义选型列表标签(类似于下拉列表)
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>