标签和注释
标签一般成对出现，但也有一些自结束标签
<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 自动获取焦点
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
