标签和注释
标签一般成对出现,但也有一些自结束标签
<h1>成对标签</h1>
<img src="" alt=""/>自结束标签
注释不能嵌套
标签属性
- 属性只能在开始标签或者自结束标签中写
- 属性:设置标签中的内容如何显示
- 属性: 名值对
网页基本结构
<!DOCTYPE html>
<html>
head中的内容:帮助浏览器或搜索引擎解析网页
<head>
meta:设置网页的元数据
<meta charset="utf-8">
title:浏览器的标题。搜索引擎会根据title中的内容来判断网页的内容
<title></title>
</head>
<body>
</body>
</html>
文档声明
- 告诉浏览器当前网页的版本
<!DOCTYPE html>
表示网页是html5的
进制
所有的数据在计算机中是以二进制的形式存储的
字符集
字符集:编码和解码采用的规则
- 乱码问题:编码和解码采用的字符集不同
- 常见的字符集
- ASCII
- ISO88591
- GB2312
- GBK
- UTF-8
VScode
!+Tab
自动生成结构alt+shift+↑/↓
向上/下复制ctrl+回车
下方插入一行ctrl+shift+enter
上方插入一行ctrl+/
注释ctrl+`\
打开终端,命令窗口alt+↑
向上移动shift+alt
选中对应位置的光标ctrl+alt+→
将面板放到右侧ctrl+D
选中一组alt+鼠标
同时选中多个内容或插入多个光标ctrl+l
选中一行ctrl+shift+k
删除一行
实体
- 不能直接的写特殊符号需要用实体表达
- 一些html实体(转义字符)
空格>
大于号<
小于号©
版权符号®
注册商标
meta标签
设置网页的元数据(很多种元数据)
- 设置文档字符的编码
<meta charset="utf-8">
- 为文档设定主语言
<html lang="zh-CN">
- 设置网页关键字
name
:指定meta元数据的名称content
:元数据的值
keywords:指定网页的关键词,根据搜索关键词查找相关网页
<meta name="keywords" content="手机,电脑">
- 设置网页描述信息
description:指定网站的描述,会显示在搜索引擎的结果中
<meta name="description" content="The MDN Learning Area aims to ...">
- 设置文字超链接显示
搜索结果,网页文字超链接显示
<title>实体</title>
- 网页重定向
将页面重定向到另一个网站,3表示时间,url:地址
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
- 还有很多,例如与设置移动端的视口大小等
html标签
只区分语义,部分标签,具体查文档
-
标题标签
h1 h2 h3 h4 h5 h6
- h1-h6重要性递减,一般情况下只有一个h1
- 独占一行
hgroup
给标题标签分组
<hgroup> <h1>回乡偶书</h1> <h2>标题一</h2> </hgroup>
-
段落标签
<p></p>
- 独占一行,块标签
- p元素中不能放任何的块元素
-
斜体 强调(语气加重)
<em></em>
- 不独占一行,内联元素
-
加粗 强调(语义)
<strong></strong>
-
引用
<blockquote>引用别人的话</blockquote>
- 块元素
<q>短引用</q>
“”自动加引号- 内联元素
- 换行
<br>
块元素
- 块元素一般用于页面宏观布局
- 一般会在块元素内放行内元素
结构化标签
<header>头部,网页某一部分的头部</header>
<main>主体(页面中只有一个)</main>
<footer>底部,网页某一部分的底部</footer>
<nav>导航</nav>
<aside>和主体相关的其他内容,不包括在主体内</aside>
<article>独立的文章</article>
<section>一个独立的区块</section>
标签都独立一行,只是区分语义
<div>最常用的主要布局元素</div>
列表 li
- 列表之间可以互相嵌套
- 有序列表
<ol>
<li></li>
</ol>
- 无序列表
<ul>
<li></li>
</ul>
- 定义列表
dl用的比较少
dt表示给谁下定义
dd表示定义的内容
<dl>
<dt>结构</dt>
<dd>规定那里是标题,哪里是段落</dd>
</dl>
行内元素
- 主要用于包裹文字,设置特殊效果
浏览器在解析网页时会自动对不规范的内容进行修正 比如:
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- 根元素中出现了head和body意外的元素
- ...
<span></span>行内元素
超链接 a
a标签可以嵌套任何元素(除自身以外)
<a href="" target="" ></a>
- href:跳转的目标路径
- 外部网页地址
- 内部页面地址(一般使用相对路径)
- 相对路径会使用
./ ../
开头 ./
表示当前文件所在的目录../
当前文件所在目录的上一级
- 相对路径会使用
#
不发生跳转,回到页面顶部的位置- 若想跳转到页面指定位置,则
href="#唯一id名"
- 若想跳转到页面指定位置,则
<a href="javascript:;"></a>
仅作为占位使用,不发生跳转
- target:指定超链接打开的位置
_blank
在新的页面打开_self
默认值,在当前页面打开
图片 img
替换元素,介于块和行内之间,具有两种元素的特点
<img src="" alt="" width="" height="">
- src 图片路径
- alt 图片描述
- 默认不会显示,有些浏览器会在图片无法加载时显示
- 搜索引擎会根据alt中的内容识别图片
- width height 图片宽高
- 如果只修改一个,则等比缩放
- 图片格式
- ipg
- png
- gif
- webp
- base64
内联框架 iframe
替换元素。 向当前页面中引入其他页面。 使用很少。不会被搜索引擎检索。
<iframe src="" frameborder="0"></iframe>
- src :引入网页路径
- frameborder:边框
0
默认0,无边框1
有边框
音视频 audio video
替换元素。
<audio src="" controls autoplay loop></audio>
<video src="" controls autoplay loop></video>
-
src:文件路径
- 外部文件
- 内部文件
-
controls
- 默认不允许用户控制组件
- 加了controls就可以控制播放了
-
autoplay 自动播放
- 如果设置了,则会在打开页面时会自动播放
- 大部分浏览器不会自动播放
-
loop 循环播放
-
用source指定文件路径
- 效果:支持的浏览器会显示播放器,不支持的浏览器则会显示文字
- 也可以放多个source,同时指定多个文件。则优先会用第一个,第一个不能用再用第二个,若都不能用,则显示文字
<audio controls> 对不起,您的浏览器不支持播放音频 <source src="../source/audio.mp3"> <source src="../source/audio.ogg"> </audio> <video> <source src="../source/flower.webm"> </video> 兼容老版本的浏览器 <embed src="../source/audio.mp3" type=""> <embed src="../source/flower.mp4" type="">
table表格
- thead、tbody、tfoot表示表头,表格,表尾
- tr表示一行
- td表示一列
- 可以用colspan和rowspan横向合并和纵向合并
<table border="1">
<thead>
<tr>
<td>A1</td>
<td>A2</td>
<td>A2</td>
<td>A2</td>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A2</td>
<td>A2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>C1</td>
<td>C2</td>
<td colspan="2">C2</td>
</tr>
</tfoot>
</table>
form表单
将数据提交给服务器
<form action="" method="">
</form>
action
表单要提交的服务器的地址
method
在提交表单时所用的 HTTP 方法(GET 或 POST)
- GET
表单项
- 文本框
<input type="text" name="username" id="" value="显示的内容">
- 密码框
密码框
<input type="password" name="password" id="">
- 按钮
普通按钮
<input type="button" name="" id="" value="按钮">
- 重置按钮
<input type="reset" name="" id="">
- 提交按钮
<input type="submit" name="" id="" value="显示的内容">
- 单选按钮
- name属性相同,才会有单选效果
- 必须指定value值,会作为用户的填写信息
- checked默认选中
<input type="radio" name="sex" id="" value="男" checked>
<input type="radio" name="sex" id="" value="女">
- 复选按钮
- 同一组name属性须相同
- 必须指定value值,会作为用户的填写信息
- checked默认选中
<input type="checkbox" name="test" id="" value="1" checked>
<input type="checkbox" name="test" id="" value="2">
- 下拉列表
- selected默认选中
<select name="课程" id="">
<option value="语文" selected>语文</option>
<option value="数学">数学</option>
<option value="英语">英语</option>
</select>
注意:元素要提交到服务器中,必须为元素指定一个name属性值,根据用户填的内容定 例如:name:"username"
属性
- autocomplete 自动表单补全
<input type="text" name="" id="" autocomplete="on/off">
- readonly 只读 数据会提交
- diasbled 禁用 数据不会提交
- autofocus 自动获取焦点