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 |
|