1.标签分类

• 双标签

  <marquee>xxx < /marquee>
  

• 单标签

  <input/> /可省略
  

• 标签嵌套

  <marquee>
   <input>
  </marquee>
  

2.html标签属性

• 用于给标签提供附加信息
• 可以写在起始标签或单标签中

  <标签名 属性名=“属性值” 属性名=“属性值”>
  e.g.<marquee loop="1" bgcolor="green">html study</marquee>
    <input type="password">
  /中间都有空格
  

• 特殊无属性名

  <input disabled>
  

• 注意

1.不同标签有不同属性，也有相同属性(通用属性)
2.属性名和属性值按照W3C标准
3.属性名属性值不区分大小写，但推荐小写
4.双引号可以写成单引号或者不写，但推荐写双引号
5.标签中不要出现同名属性，否者后写的失效

3.html基本结构

<html>
    <head></head>
    <body>
    xxxxxx(这里放内容)
    </body>
</html>

• <head></head>里的内容不展示
  <title></title>指定页签名
  

• <body></body>里的内容会展示
  

• 注意：

1.【检查】是浏览器处理后的源代码
2.【查看页面源代码】是程序员写的代码

4.html注释

<!-- 现在的内容不会出现在页面上 -->
<!-- 注释的内容可以换行
你看 -->
<!--注释不可以嵌套
中间应该有空格，但是也可以不写-->
<!--<input>标签也可以注释-->
快捷键control+/ 加入注释，鼠标放在该行即可
快捷键control+z 撤销注释

5.声明html的标准

<!DOCTYPE html> 
<!--H5标准声明，最简短-->
告诉浏览器当前网页的版本
文档声明必须写在第一行

6.html字符编码

<head>
    <meta charest="UTF-8">
    <!--声明浏览器解码标准-->
</head>
<!--因为vscode默认编码方式就是UTF-8，要想文件有效，需要保证编码解码放式一致-->

7.html设置语言

<html lang="en">
<!--声明浏览器页签语言
主要作用：
1.让浏览器显示对应的翻译提示
2.有利于搜索引擎的优化
en-US
en-GB
zh-CN
zh-TW
zh
zh-Hans 中文简体
zh-Hant 中文繁体
control+shift+k 快速删除所在行-->

• <!DOCTYPE html>
  <html lang="zh-CN">
      <head>
      <meta charset="UTF-8">
      <title>标题</标题>
      </head>
      <body>
      
      </body>
  </html>
  

• 注意：

1.VScode内置的插件Emmet中何以对生成结构的属性进行定制
2.存放代码的文件夹中，存放一个favicon.ico图片，可以配置网站图标

开发者文档：
1.http://www.w3c.org/
2.http://www.w3school.com.cn/
3.developer.mozilla.org(最常用)

8.html排版标签

• 页面内标签

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>html title</title>
    </head>
    <body>
    <h1></h1>
    <h2></h2>
    </body>
  </html>
  <!--<h2>标签可写至<h6>,说明最多有六个页面内标题，在页面内自动加粗，自动排版大小。<h1>大标题只能有一个
  h标签也不允许相互嵌套-->
  

• 段落标签

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>html title</title>
    </head>
    <body>
    <h1></h1>
    <h2></h2>
    <div>
    <p></p>
    <p></p>
    </div>
    </body>
  </html>
  <!--一般都把段落标签<p>写在<div>标签中
  <p>标签不允许嵌套，h,div,p都不允许-->
  

9.html语义化标签

• 标签默认的效果不重要，语义最重要
• 好处：

1.代码的可读性强，清晰
2.有利于SEO（搜索引擎优化）
3.方便设备解析（盲人阅读器，屏幕阅读器）

10.块级元素和行内元素

• 块级元素
• 行内元素

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>html title</title>
    </head>
    <body>
    <h1></h1>
    <h2></h2>
    <!--块级元素独占一行-->
    <input tpye="text"> 
    <!--行内元素只占行的一块区域-->
    </body>
  </html>
  

  使用规则：

1.块级元素中能写：行内元素，块级元素，几乎什么都能写 h1
2.行内元素中能写：行内元素，但不能写块级元素 span，input
3.特殊规则：p标签中不能写块元素 p,div,h

11.常用文本标签

• 用于包裹：词汇，短语等
• 通常写在排版标签内
• 排版标签更宏观（大段的文字），文本标签更微观（词汇，短语）
• 文本标签通常都是行内元素
  常用的：

1.着重要阅读的内容,双
2.十分重要的内容，语气更强,双
3.没有语义，用于包裹短语的通用容器,双

12.不常用的文本标签

• 以下均为双标签
• 作品标题（书记，歌曲，电影节目）
• 特殊术语，或专属名词
• 删除文本与插入的文本
• 下标文字与上标文字 h2o 8的三次方
• 一段代码
• 从正常的上下文中，将某些内容提取出来，例如标识设备输出
• 键盘文本
• 缩写
• 更改文本方向,配合rtl,ltr使用
• 标记变量

13.html图片标签

• 行内元素

  <!DOCTYPE html>
  <html lang="zh-CN">
     <head>
     <meta charset="UTF-8">
     <title>标题</标题>
     </head>
     <body>
         <img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度">
     </body>
  </html>
  <!--图片路径需要按照使用方式，html页面内的图片和html源文件同级，html页面的网页图标和VS打开的文件夹同级>
  

  14.相对路径，绝对路径

相对路径：

• ./代表当前位置---一个.代表当前文件同级目录
• ../代表更高一层文件目录，更大的文件夹里的文件 e.g. ../../../xxx.jpg
• 以此类推

绝对路径：

• 本地绝对路径：
  e.g.E:/html_practice/照.png(基本不使用)
• 网络绝对路径：
  e.g.网页上复制的图片路径，可能因为防盗不可用

15.常见的文件格式

• .jpg--有损压缩，不支持动态图
• .png--无损压缩，不支持动态图
• .bmp--不进行压缩，不支持透明背景，不支持动态图
• .gif--支持简单的透明背景，支持动态图
• .webp--兼具优点，但是兼容性不太好
• base64--把图片转码成文本

16.超链接

• 超文本的真正含义：是一种组织信息的方式，通过超链接将不同空间的文字，图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（内容包含页面，文字，图片等）。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>html title</title>
    </head>
    <body>
        <a href="链接" target="_blank" >链接名</a>
        <!--"_blank"在新网页打开
        target="_self" 在本网页打开-->
    </body>
</html>
<!--超链接的主要作用：从当前页面进行跳转
双标签<a href：要跳转的具体位置；
target：_self：从本页签中打开；
_blank：从新页签打开->

• 超链接跳转文件：

  <a href="链接" download="name"(optioanl)>链接名<a>
  

• 超链接跳转锚点：

1.a标签：

<a href="#要跳转的标签名">连接名<a>
<a name="要跳转的标签名"><a>
<img src="链接" alt="图片描述">
区分大小写，最好不重复

2.id（通用标签）

<a href="#id">链接名<a>
<p id="id">段落内容<p>
<img src="跳转地址" alt="图片描述">

注意：
1.id最好不要以数字开头
2.标签的特殊用法：回到开头

<a href="#">回到顶部<a>
<a href="">刷新页面<a>

3.跳转到其他页面的锚点：

<a href="demo.html#id">去demo.html页面的id锚点<a>

4.执行一段js，如果不知道要执行什么，可以留空

<a href="javascript:此处写js脚本;">链接名<a>

• 唤起指定应用：

  <a href="tel:xxx号码">电话联系<a>
  <a href="mailto:xxx@xxx.com">邮件联系<a>
  <a href="sms:xxx">唤起设备发送短息<a>
  

17.html列表

• 有序列表 ordered list ol
  列表项 list item li

  <body>
  <ol>
  <li>
  <li>
  </ol>
  </body>
  

• 无序列表 unordered list ul

• 自定义列表 definition list dl
  术语标题 definition title dt
  术语内容 definition description dd

• 注意事项

1.列表内保证子元素都是li,可嵌套
2.li尽量不要单独使用
3.列表是可以嵌套的

18.html表格 table

• 表格标题 caption
• 表格头部 thead 也就是第一行
• 表格主体 tbody
• 表格脚注（可不写）tfoot 也就是最后一行
• 行 tr row
• th table header 表头单元格
• td table data 单元格（普通内容
• ）
• 注意：

1.table表签可以有border：边框，后面的值指的是边框的宽度
2.边框宽度大于一的时候，只控制最外层的宽度，单元格的边框宽度仍然是1
3.table标签可以有width，height属性，根据表头字数多少来分配宽度，但后期可以调整，改长宽只变动内容格的大小
4.table中 cell spacing表示边框之间的距离
5.thead的属性是height，align，valign
6.align用来控制表格文字的水平对齐方式，center，left，right
7.valign控制竖直对齐方式，middle，bottom，top
8.tbody和tfoot的属性同thead

• 注意：

1.表格其中的列用column，col表示，colspan跨列

• 常用标签：

1.换行标签：br单标签
2.分割线标签：hr单标签
3.按原文显示：pre 双表签，一般用于在网页中嵌入大段代码

<table>
<caption>表格标题</caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
~
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
~
</tr>
<tr>
<td></td>
<td></td>
<td></td>
~
</tr>
<tr>
<td></td>
<td></td>
<td></td>
~
</tr>
~
</tbody>
</table>

19.html表单

• form
• 表单控件
• action：将表单交给谁处理，网址后/s，表示search,由访问的网页决定
• input：属性name：wd是百度的规定；type默认值为text，还可以使用password，radio表示单项选择，name选择gender，value分别写作male，female即可选择；type属性为checkbox表示复选框；value值是控制输入框的默认值，maxlength输入框的最大值
• 单选框和复选框一定要有value值
• 隐藏域：input type=hidden name=“tag”（需沟通） value=“xxx”
• 确认按钮：

1.button type=“submit”确认 button，属性可以不写，确认是默认值
2.input type=“submit” value=“确认”，此时没有name属性，value值就是按钮名
3.默认选项在input内写checked

<button type="submit">确认</button>
<input type="submit" value="确认">

• 重置按钮：

1.button type=“reset” 重置 button，需要写属性
2.input type=“reset” value=“重置”，value控制的是按钮里的文字

<button type="reset">重置</button>
<input type="reset" value="重置">

• 普通按钮（不引起提交和重置的按钮）

1.button type=“button” 检测账户是否被注册 button
2.input type=“button” value=“检测账户是否被注册”

<button type="button">检查账户是否被注册</button>
<input type="button" value="检查账户是否被注册">

• 文本域：
  textarea name=“other” cols=“10” rows="5" textarea

  <textarea name="place" cols="列数" rows="行数"><textarea>
  

• 下拉框
  select name="place"
  option xxx option
  option xxx option
  select
  标准写法：
  select name=“place ”

    option value=“xx” xxx option
    select
  

  若默认则在option内写selected

  <select name="place">
  <option value="xxx" (selected)>xxx</option>
  </select>
  

• 禁用表单控件：

1.disabled 在标签 内直接写
2.可以写在input textarea button select option

• label标签

1.实现获取焦点
2.label for="zhanghu" 账户 label
input id="zhanghu" type="text" name="account" maxlength="10"
此处for和id属性对应
3.或者直接将input标签包裹在label标签内，此时没有for

1.
<label for="zhanghu">账户</label>
<input id="zhanghu" type="text" name="account" maxlength="10">
2.
<label>
<input type="text" name="account" maxlength="10"> 
</label>

• ieldset和legend：
  实现标签的分类
  fieldset
  legend xxx legend(分组标题)
  xxx(需要分组的标签全部写在legend下方)
  fieldset

<fieldset>
<legend>xxx</legend>
xxxx
</fieldset>

20.框架标签

iframe src="链接" width=“宽”  length=“高”  iframe
- 利用iframe嵌入一个普通网页 
- iframe border 网页边框宽度
- 利用iframe嵌入其他内容：
浏览器可以打开的均可以嵌入
- target属性
target=“tt”  --在名字是tt的内嵌窗口里打开，配合超链接或者表单使用

<a href="xx" target="a">xxxx</a>
<iframe name="a" width="xx" height="xx"></iframe>
也可以和表单链接
 <a href="xx" target="a">xxxx</a>
  <form action="https://xxx" target="a">
  <input type="text" name="keyword">
  <input type="submit" value="搜索">
  </form>

21.html字符实体

- &nbsp；---表示一个空格，浏览器可以识别，可以不写双标签pre，来表示文本中的空格
- &#160；---也是表示一个空格
- &lt；---小于号
- &gt；---大于号
- &amp；---表示&
- ￥中文的shift+4
- ¥---￥
- &copy；----©版权所有
- ×---乘号
- ÷---除号

22.html全局属性

• id

1.给标签指定唯一标识，在一个html里不能重复
2.作用：可以让label标签与表单控件相关联；也可以与css，JavaScript配合使用
3.注意，不能在以下标签中使用：html,head,meta,script,style,title

• class

1.给标签指定类名，随后通过css可以给标签设置样式

• style

1.给标签设置css样式

• dir

1.内容的方向：rtl，ltr
2..注意，不能在以下标签中使用：html,head,meta,script,style,title
3.不同标签中的含义不同

• title

1.给标签设置一个文字提示，一般超链接和图片用的比较多

• lang

1.给标签指定语言，具体规范参考设置语言mdn
2..注意，不能在以下标签中使用：html,head,meta,script,style,title

23.html的meta元信息

• 写在head双标签内
• 配置字符编码
• meta charset="UTF-8"
• 兼容性设置
• meta http-equiv="X-UA-Compatible" content="IE=edge"（真对IE浏览器的兼容性设置）
• 针对移动端设备的配置
• meta name=“viewport” content="width=device-width,initial-scale=1.0"
• 配置网页关键字
• meta name="keywords" content="网上购物，电商购物，化妆品"
• 配置网页描述信息
• meta name="description" content="搜索引擎是用来搜索的"
• 针对搜索引擎爬虫设置
• meta name="robots" content=""
  可选值如下：
• index：允许搜索爬虫索引此界面
• noindex：要求搜索爬虫不索引此界面
• follow：允许搜索爬虫跟随此页面上的链接
• nofollow：要求搜索爬虫不跟随此页面上的链接
• all：与index，follow等价
• none：与noindex，nofollow等价
• noarchive:要求搜索引擎不缓存页面内容
• nocache：noarchive的替代名称
• 配置网页作者
• 配置网页生成工具
• 配置定义网页授权信息
• 配置网页自动刷新
• meta http-equiv="refresh" content="10;url=http://www.baidu.com"/
• mdn网页见详细说明