HTML 入门
- 用于描述网页的内容
VSCode 里面编写代码:输入 html 然后选择第二个提示选项,生成基本的 html 模板代码
1 元素¶
-
<p>:开始标签 -
p:标签(元素)名称 -
class="editor-note":元素的一个属性,格式为key="value" -
</p>:结束标签 - 除了开始结束标签,其他部分不需要可以不写
元素之间可以嵌套
- 嵌套顺序必须正确(类似于括号间嵌套)
- 元素名大小写都可,一般习惯小写
-
HTML 忽略缩进和换行
-
忽略缩进:多个连续空格显示为一个
- 忽略换行:代码换行不影响网页
2 注释¶
<!--开头,-->结尾
3 一张网页的基本元素&结构¶
- 第一个元素通常是
<!DOCTYPE>,表示文档类型,告诉浏览器如何解析网页 -
<html>元素是网页的顶层容器 -
lang属性代表网页内容默认语言,简中为zh-cn -
<head>元素 -
CSS代码可以嵌入到
head元素之中
4 通用属性¶
-
id属性指定元素唯一标识符,同一个网页中不可以重复 -
`class属性指定元素的分类
-
class后面的值用""括起来,里面单词由空格分开 -
style属性用来指定当前元素样式(CSS)
5 基本元素¶
-
<div>通用标签,没有特殊含义,默认块级元素(CSS学到) -
<span>通用标签,没有特殊含义,默认行内元素,常用来给某段文字附加样式 -
<h1>~<h6>一级标题到六级标题,可以被搜索引擎索引 -
<p>一个段落,默认块级元素,不通段间会显示明显行间距 -
<a>一个超链接 ^b7f9e9 -
herf:指定链接的目标 URL。可以是相对路径、绝对路径或其他协议的链接(如mailto:、tel: 等)。 -
target:指定链接打开的方式。常用值有:-
_self:在当前窗口打开(默认值)。 -
_blank:在新窗口或标签页中打开。 -
_parent:在父框架中打开(如果有框架的话)。 -
_top:在整个窗口中打开,取消所有框架。 -
title:提供关于链接的额外信息,通常在鼠标悬停时显示。 - 换行
-
<hr />水平线
-
6 块级元素和行内元素¶
- 块级元素(block):默认占据一个独立区域,在网页上会另起一行,占据100%宽度
- 行内元素(inline): 默认与其他元素在同一行,不产生换行

7 文本修饰¶
html 的内容其实基本用不上, CSS 都能替代
8 多媒体¶
-
<img />用于插入图片 -
src 属性指定图片的 URL -
alt 属性指定图片无法显示时的替代文字 -
<video> (*) 用于放置视频,但是播放器界面因浏览器而异,因此不常用 -
src 属性指定视频的URL -
<audio> (*) 用于放置音频,用法和<video> 基本一致 -
<embed> (*) 用于嵌入外部内容
9 列表¶
-
<ol> 元素是一个有序列表容器(ordered list),列表项目前会产生数字编号 -
<ul> 元素是一个无序列表容器(unordered list) -
<li> 表示列表项,用在<ol> 或<ul> 容器之中。 -
value 属性表示当前项目的编号,会在
<ol> 中显示出来
10 表格¶
-
<table> 是一个块级容器元素,表格的容器 -
<caption> 总是<table> 里面的第一个子元素,表示表格的标题。该元素是可选的 -
<tr> 元素表示表格的一行(table row) -
<th> 和<td> 用于定义表格的单元格。<th> 是标题单元格,<td> 是数据单元格
11 表单*¶
-
<form> 元素用来定义一个表单,容器 -
action 属性指定服务器接收数据的 URL -
name 属性指定表单的名称,唯一 -
target 在哪个窗口展示数据 -
method (* 提交数据的 HTTP 方法 -
<label> 行内元素,提供表单控件的文字说明 -
for 属性指定关联控件的id 属性 -
<button> 标签会生成一个可以点击的按钮,没有默认行为type 属性: submit, reset, button -
<select> 下拉菜单 -
multiple 属性指定是否允许多选 -
<option> 元素可用于<select> 的选项 -
value 属性指定值 -
selected 属性指定是否为默认选中 -
<input> 显示一个输入框
12 其它¶
-
<iframe> 生成一个指定区域,在该区域中嵌入其他网页 -
语义结构
1 2 3 4 5 6 7 8 9 10 11 12 13 | |