HTML重新学习记录-查漏补缺

# HTML重新学习记录-查漏补缺

[TOC]

# 一、HTML基础架构

<!-- 文档类型：<!DOCTYPE html> 是html5类型 -->
<!DOCTYPE html>
<!-- 设置界面语言，zh：中文（简体、繁体） -->
<html lang="zh">
  <head>
    <!-- meta 元标签，表示网页的基础配置 -->
    <!-- charset 字符集；UTF-8是一种字符集 -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Keywords：网页关键词；用于SEO -->
    <meta name="Keywords" content="carmineprince,html,css,javascript" />
    <!-- Description: 页面描述；用于SEO -->
    <meta name="Description" content="这里页面的描述" />
    <title>html学习记录一</title>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 二、标签

<!-- 语义化标签 -->
<p>段落</p>
<h1>一级标题</h1>

1
2
3

# 1.标题标签（headline）

搜索引擎非常看重<h1></h1>标签应该将重点内容放到<h1></h1>中，比如网页的logo等
<h1></h1>标签一般智能放置一个，否则会被搜索引擎视为作弊，从而不进行抓取

    <h1>一级标题</h1>
    <h2>二级标题1</h2>
    <h2>二级标题2</h2>
    <h3>三级标题1</h3>
    <h4>四级标题1</h4>
    <h5>五级标题1</h5>
    <h6>六级标题1</h6>

1
2
3
4
5
6
7

# 2. 段落标签（paragraph）

任何段落都要放在<p></p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到<p></p>中
<p></p>标签中不能嵌套headline标签和其他paragraph标签

# 3. 分割标签（division）

<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰
<div></div>是最常见的HTML标签，”DIV+CSS“
"盒子"

# div的常见类名：

区域	类名
页头	header
logo	logo
导航条	nav
横幅	banner
内容区域	content
页脚	footer

# 4. 列表标签（list）

标签	橘语义
`<ul></ul>`	无序列表
`<li></li>`	有序列表
`<dl></dl>`	定义列表

<li></li>不能单独出现
<ul>的子标签只能是<li>不可以是其他标签
<li>内部是可以放其他任何标签的

# (1). 无序列表

代码：

<ul>
  <li>面包</li>
  <li>牛奶</li>
  <li>鸡蛋</li>
</ul>

1
2
3
4
5

示例：

面包
牛奶
鸡蛋

# 列表的嵌套

代码：

<ul>
  <li>
    江苏省
    <ul>
      <li>南京</li>
      <li>苏州</li>
      <li>无锡</li>
    </ul>
  </li>
  <li>牛奶</li>
  <li>鸡蛋</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12

示例：

江苏省
- 南京
- 苏州
- 无锡
牛奶
鸡蛋

# 无序列表的type属性

无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃了，建议使用CSS替代

值	描述	示例
disc	默认值，实心圆
circle	空心圆
square	实心方块

# (2). 有序列表

代码：

<ol>
  <li>面包</li>
  <li>牛奶</li>
  <li>鸡蛋</li>
</ol>

1
2
3
4
5

示例：

面包
牛奶
鸡蛋

# 有序列表的type属性

值	描述	示例
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马数字编号
I	表示大写罗马数字编号
1	表示数字编号

# `<ol>`标签的start属性

start属性必须是一个整数，指定了列表编号的起始值
此属性的值应为阿拉伯数字,尽管列表条目的标号类型type属性可能指定为了罗马数学编号等其他类型的编号

代码：

<ol start="14">
  <li/>
  <li/>
</ol>

1
2
3
4

示例：

# `<ol>`标签的reversed属性

reversed属性指定列表中的条目是否是倒序排列的
reversed属性不需要值，只需要写reversed单次即可，这是HTML5的全新特性

代码：

<ol reversed>
  <li/>
  <li/>
</ol>

1
2
3
4

示例：

# (3). 定义列表

<dl>是定义列表标签，内容交替出现<dt>、<dd>标签
也允许dt和dd不交替出现，而是分别处于不同的定义列表中

# 何时使用定义列表？（常见页脚）

只要语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表

代码：

<dl>
  <dt>北京</dt>
  <dd>我国首都、政治中心、文化中心</dd>
  <dt>上海</dt>
  <dd>国际经济、金融、科技创新中心</dd>
</dl>

1
2
3
4
5
6

示例：

北京: 我国首都、政治中心、文化中心
上海: 国际经济、金融、科技创新中心

# 4. 图片标签(image)

<img src="images/xxx.jpg">

src => source

# `<img>`标签的alt属性

alt属性是alternate"替代品"的缩写，它是对图像的文本描述，不是强制性的
如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本
视障使用网页朗读器时会读alt中的文本

# `<img>`标签的width、height属性

单位是像素，但不需要写单位
如果省略其中一个属性，则表示按照原始比例缩放图片

# 网页上支持的图片格式

格式	说明
.bmp	windows画图软件默认保存的格式，位图
.gif	支持动画
.jpeg(.jpg)	有损压缩图片，用于照片
.png	便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法非常优秀的图片格式

# 5. 超级链接`<a>`标签

<a href="../second.html"></a>

href属性支持相对路径和绝对路径

# `<a>`标签的title属性

用于设置鼠标的悬停文本

<a href="../second.html" title="下一页">下一页</a>

# 在新窗口中打开网页

<a href="../second.html" target="blank"></a>

# 给图片设置超级链接

<a href="../second.html">
  <img src="test.png">
</a>

1
2
3

# 页面内锚点

<h1 id="title"></h1>
<a src="second.html#title"></a>

1
2

# 下载链接

如果href指向exe、zip、rar等文件格式的链接，将自动成为下载链接

# 邮件链接、电话链接

有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件

<a href="mailto:test@xxx.com">发邮件</a>

有tel:前缀的链接是电话链接，系统将自动打开拨号盘

<a href="tel:12306">打电话</a>

# 6.区块标签（HTML5）

区块标签	说明
`<section>`	文档的区域，语义比div大
`<article>`	文档的核心文章内容，会被搜索引擎主要抓取
`<aside>`	文档的非必要相关内容，比如广告等
`<nav>`	导航条
`<header>`	页头
`<main>`	网页核心部分
`<footer>`	页脚

# 7. `<span>`标签

是文本中的"区块"标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式

# 8. `<b>、<u>、<i>`标签

已经被css替代、但是在网页中也可以表示需要强调的文本

# 9. `<strong>、<em>、<mark>`标签

均表示强调语义

标签	说明
`<strong>`	代表特别重要的文字
`<em>`	代表强调文字
`<mark>`	代表一段需要被高亮的文字

# 10. `<figure>、<figcaption>`标签

<figure>元素代表一段独立的内容，与说明<figcaption>配合使用，它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体

      <figure>
        <img src="test.png" />
        <figcaption>测试图片</figcaption>
      </figure>

1
2
3
4

# 三、HTML5特性

# 1. 空白折叠现象

文字和文字之间的多个空格、换行会被折叠成一个空格
标签“内壁”和文字之间的空格会被忽略

# 2. 转义字符

转义字符	意义	效果
`<`	小于号	<
`>`	大于号	>
` `	空格不会被折叠
`©`	版权符号	©

# 3.HTML注释

<!--  -->

# 四、表单

# 1. 表单的创建

<form action="https://xxx.com/user/get" method="get"></form>

# 2. 单行文本框

<input type="text" placeholder="默认输入提示" disabled>

# 3. 单选按钮

<label>
  <input type="radio" name="test" value="1">1</input>
</label>
<label>
  <input type="radio" name="test" value="2">2</input>
</label>

1
2
3
4
5
6

# 4. 密码框

<input type="password">

# 5. 下拉菜单

<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

1
2
3
4

# 6. 多行文本框

<textarea cols="30" rows="10"></textarea>

# 7.三种按钮

type属性值	按钮类型
button	普通按钮，可以简写为`<button></button>`
submit	提交按钮
reset	重置按钮

# 8.HTML5中新增input类型

type属性值	控件
color	颜色选择控件
date；time	日期；时间选择器空间
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索框
url	网址输入控件

# 9. `<datalist>`控件

可以为输入框提空一些备选项，当用户输入的内容与备选项文字相同时，将会智能感应

# 五、表格

<table>
  <caption>标题</caption>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">A</td>
      <td rowspan="2">B</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>汇总</td>
      <td colspan="2">B</td>
    </tr>
  </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

标题
1	2	3
横跨两列		纵跨两行
A	B	纵跨两行
汇总	纵跨两行

#html #笔记

上次更新: 10/21/2021, 1:52:09 PM

← HTML及CSS面试前回炉重造移动端禁止屏幕缩放→

HTML重新学习记录-查漏补缺

# HTML重新学习记录-查漏补缺

# 一、HTML基础架构

# 二、标签

# 1.标题标签（headline）

# 2. 段落标签（paragraph）

# 3. 分割标签（division）

# div的常见类名：

# 4. 列表标签（list）

# (1). 无序列表

# 列表的嵌套

# 无序列表的type属性

# (2). 有序列表

# 有序列表的type属性

# <ol>标签的start属性

# <ol>标签的reversed属性

# (3). 定义列表

# 何时使用定义列表？（常见页脚）

# 4. 图片标签(image)

# <img>标签的alt属性

# <img>标签的width、height属性

# 网页上支持的图片格式

# 5. 超级链接<a>标签

# <a>标签的title属性

# 在新窗口中打开网页

# 给图片设置超级链接

# 页面内锚点

# 下载链接

# 邮件链接、电话链接

# 6.区块标签（HTML5）

# 7. <span>标签

# 8. <b>、<u>、<i>标签

# 9. <strong>、<em>、<mark>标签

# 10. <figure>、<figcaption>标签

# 三、HTML5特性

# 1. 空白折叠现象

# 2. 转义字符

# 3.HTML注释

# 四、表单

# 1. 表单的创建

# 2. 单行文本框

# 3. 单选按钮

# 4. 密码框

# 5. 下拉菜单

# 6. 多行文本框

# 7.三种按钮

# 8.HTML5中新增input类型

# 9. <datalist>控件

# 五、表格

# `<ol>`标签的start属性

# `<ol>`标签的reversed属性

# `<img>`标签的alt属性

# `<img>`标签的width、height属性

# 5. 超级链接`<a>`标签

# `<a>`标签的title属性

# 7. `<span>`标签

# 8. `<b>、<u>、<i>`标签

# 9. `<strong>、<em>、<mark>`标签

# 10. `<figure>、<figcaption>`标签

# 9. `<datalist>`控件