简介
<html>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
什么是HTML?
HTML 是用来描述网页的一种语言:
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是语言,而是标记语言
- HTML 使用标记标签来描述网页
HTML标签
HTML 的标记标签也称标签(HTML tag)
- HTML 的标签是用尖括号包围的关键词,
<html>
- HTML 的标签是成对出现的,
<body></body>
- HTML 的标签前一个是开放标签,后一个是关闭标签
- HTML 标签中无其他内容时,可用 "/" 来作结束,
<img src="..." />
HTML文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 也被称为网页
- web 浏览器读取 HTML 文档并以网页显示他们,而不会显示标签
HTML 编辑器
HTML 文件格式以 .html
为后缀。
- sublime text
- vscode
- Atom
HTML元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
- HTML 元素以开始标签开始,以结束元素结束
- HTML 元素可以嵌套,
<html><body></body></html>
- HTML 元素没有结束标签一般可以使用,但不要忘记结束标签
- HTML 标签大小写不敏感,但一般都使用小写
HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称/值对的形式出现,比如:name="value"。
- 属性总是在 HTML 元素的开始标签中规定。
HTML / HTML5 的全局属性
HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
HTML 元素
<html>
<html>
定义网页的文档,是所有元素的容器
<head>
<head>
定义网页的头部信息,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示。
下面这些标签可用在 head 部分:<base>
, <link>
, <meta>
, <script>
, <style>
, 以及 <title>
。
<base>
<base>
标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base>
标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>
、<img>
、<link>
、<form>
标签中的 URL。
<link>
<link>
标签定义文档与外部资源的关系,最常见的用途是链接样式表。
<!--链接图标 -->
<link rel="icon" href="..." type="image/x-icon">
<!--链接css -->
<link rel="stylesheet" href="...">
<meta>
<meta>
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>
标签位于文档的头部,不包含任何内容。<meta>
标签的属性定义了与文档相关联的名称/值对。
<script>
<script>
定义文档中的JavaScript代码,可用外链和内联两种方式:
<!--内联 -->
<script>
function test() {
...
}
</script>
<!--外链 -->
<script src="..."></script>
<style>
<style>
文档的内联样式,通过class和id查找元素
<style>
.class {
...
}
.id {
...
}
</style>
<title>
<title>
网页的标题
<title>网页标题</title>
<body>
<body>
定义网页的正文,浏览器中显示的内容都在这里。
<body>
<h1></h1>
<p></p>
</body>
HTML 标题
标题(Heading)是通过 <h1>
- <h6>
等标签进行定义的。<h1>
定义最大的标题。<h6>
定义最小的标题。
- 浏览器会自动地在标题的前后添加空行。
- 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
- 搜索引擎使用标题为您的网页的结构和内容编制索引。
- 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
- 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
<h1>标题1</h1>
<h2>标题2</h2>
...
<h6>标题6</h6>
HTML 换行符
<br>
是 HTML 的换行符:
<br />
HTML 水平线
<hr />
标签在 HTML 页面中创建水平线,可用于分隔内容。
<hr />
HTML 段落
段落是通过 <p>
标签定义的。浏览器会自动地在段落的前后添加空行。(<p>
是块级元素)
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML 引用
HTML <blockquote>
元素定义被引用的节。浏览器通常会对 <blockquote>
元素进行缩进处理。
<blockquote cite="url">
网页文档引用
</blockquote>
计算机代码
使用 <pre><code></code></pre>
在网页中显示计算机代码。
<pre><code>
ver person = {
firstname: "li",
lastname: "hai",
age: 24
}
</code></pre>
HTML 注释
<!-- -->
定义网页的注释信息,该标签中的内容不会被浏览解析
<!-- 这是一段注释 -->
<p>这是一个段落。</p>
<!-- 记得在此处添加信息 -->
HTML 链接
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。我们通过使用 <a>
标签在 HTML 中创建链接。
有两种使用 <a>
标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
<a href="#c1">内部跳转</a>
<h1 id="c1">内部跳转到这里</h1>
<a href="http://url">外部跳转</a>
HTML 图像
在 HTML 中,图像由 <img>
标签定义。<img>
是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
<img src="...">
HTML 表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML 列表
HTML 的列表有有序列表<ol>
和无序列表<ul>
<!--无序列表 -->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<!--有序列表 -->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>
, <p>
, <ul>
, <table>
内联元素在显示时通常不会以新行开始。
例子:<b>
, <td>
, <a>
, <img>
<div> 元素
HTML <div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器。<div>
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div>
元素可用于对大的内容块设置样式属性。<div>
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
<span> 元素
HTML <span>
元素是内联元素,可用作文本的容器。<span>
元素也没有特定的含义。
当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
HTML 的类和id
HTML 的类和id都能区分文档中的元素。当有些不同
- 每个元素可以有多个类,但只能有一个id
- 不同元素的类可以相同, 但一个id只能对应一个元素
- css和JavaScript可以使用类和id选择相应的元素,并作相关操作。
<div class="item item1">div</div>
<div class="item item2">div</div>
<div id="div1">div</div>
HTML 表单
用于搜集不同类型的用户输入
表单元素
<input> 元素
最重要的表单元素是 <input>
元素。<input>
元素根据不同的 type 属性,可以变化为多种形态。
<select> 下拉列表)
<select> 元素定义下拉列表:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> 元素
<textarea> 元素定义多行输入字段(文本域):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button> 元素
<button> 元素定义可点击的按钮:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML 输入类型
输入类型 text
<input type="text">
定义供文本输入的单行输入字段:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
输入类型 password
<input type="password">
定义密码字段:
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
输入类型:submit
<input type="submit">
定义提交表单数据至表单处理程序的按钮。
表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序(form-handler):
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
输入类型:radio
<input type="radio">
定义单选按钮。
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
输入类型: checkbox
<input type="checkbox">
定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
输入类型: button
<input type="button>
定义按钮。
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。