【HTML 笔记】基础内容

宁阿宁阿宁

已于 2022-04-17 08:51:37 修改

阅读量922

点赞数

分类专栏：前端学习笔记文章标签： html

于 2022-04-17 08:42:15 首次发布

本文链接：https://blog.csdn.net/JT61100/article/details/124224642

版权

前端学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

01 HTML 文档结构

超文本标记语言，不属于编程语言

<!DOCTYPE html><!-- !:表示声明，下面文件标签将用html5规范解析 -->
<html lang="en"><!--语言 en英文 zh-CN中文-->
<!-- 头部，主要用来完成页面相关设置 -->
<head>
  <!-- meta:元，用来完成对应设置 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 移动端开发设置 meta:vp -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 默认用ie浏览器打开 meta:edge -->
  <meta name="keywords" content=""><!-- 设置一个网站的搜索关键字 meta:kw -->
  <meta name="discription" content=""><!-- 网站的描述内容 meta:desc -->
  <title>五点半</title>
  <!-- link:元，用来完成对应设置 -->
  <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico?v=1" type="image/png"> <!-- 设置网站小图标 link:favicon -->
  <link rel="stylesheet" href="style.css"><!-- 用来引入外部样式文件 link:css -->
  <style>
    /*书写样式的地方*/
  </style>
</head>
<!-- 主体部分 -->
<body>
  <p>这是个段落</p>
  <script>
    //用来放脚本语言
  </script>
</body>
</html>

02 基本标签

div 块级标签

用来布局，没有具体含义，可用于组合其他HTML元素容器
可用于对大的内容块的样式属性，文档布局
<div></div>

`<div>` 属性	值	描述
align	`left` `right` `center` `justify`	不赞成使用。规定 `div` 元素中的内容的对齐方式

span 行级标签

和div一样，都是用来布局的
用来行内布局
<span></span>

h* 块级标签

标题标签，有六种 h1 h2 h3 h4 h5 h6
<h1> 字号最大的标题，大标题，一般一个页面只用一次
<h6> 字号最小的标题
<h1></h1> <h2></h2>

p 块级标签

段落标签
<p></p>

`<p>` 属性	值	描述
align	`left` `right` `center` `justify`	不赞成使用。规定段落中文本的对齐方式

br 换行

换行符，单标签
<br/>

hr 块级标签

生成一条水平线，主要起装饰作用，单标签
<hr />

`<hr>` 属性	值	描述
align	`center` `left` `right`	不赞成使用。规定 `hr` 元素的对齐方式
noshade	`noshade`	不赞成使用。规定 `hr` 元素的颜色呈现为纯色
size	`pixels`	不赞成使用。规定 `hr` 元素的高度（厚度）
width	`pixels` `%`	不赞成使用。规定 `hr` 元素的宽度

a 行级标签

设置超文本链接
<a href=""></a>

`<a>`属性	值	描述
href	`URL`	规定链接指向的页面的 `URL`
name	`section_name`	规定锚的名称
rel	`text`	规定当前文档与被链接文档之间的关系
target	`_blank _parent _self _top framename`	规定在何处打开链接文档
title	文本	规定光标停留时显示的内容

img 行级块标签

用来加载外部图像
<img src="" alt="">

`<img>` 属性	值	描述
alt	`text`	规定图像的替代文本
src	`URL`	规定显示图像的 `URL`
align	`top` `bottom` `middle` `left` `right`	不推荐使用。规定如何根据周围的文本来排列图像
border	`pixels`	不推荐使用。定义图像周围的边框
height	`pixels` `%`	定义图像的高度
hspace	`pixels`	不推荐使用。定义图像左侧和右侧的空白
vspace	`pixels`	不推荐使用。定义图像顶部和底部的空白
width	`pixels` `%`	设置图像的宽度
title	文本	规定光标停留时显示的内容

ul ol dl 块级标签

<ul> 无序列表

<ul>
  <li></li>
</ul>

`<ul>` 属性	值	描述
compact	compact	不赞成使用。规定列表呈现的效果比正常情况更小巧
type	disc、square、circle	不赞成使用。规定列表的项目符号的类型

<ol> 有序列表

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

`<ol>` 属性	值	描述
reversed	`reversed`	规定列表顺序为降序（9，8，7…）
start	`number`	规定有序列表的起始值
type	`1` `A` `a` `I` `i`	规定在列表中使用的标记类型

<dl> 定义列表

<dl>
  <dt></dt>
  <dd></dd>
  <dd></dd>
</dl>

!-- 注释内容 – 添加注释

快捷键：ctrl+/

03 文本格式化标签

pre 块级标签

预格式化文本，保留换行和空格及宽度，文字字号会小一号
<pre></pre>

strong b 行级标签

都是加粗标签
strong 有强调作用，用于 seo 优化时便于提取关键字
<strong></strong>
<b></b>

em i 行级标签

都是文字倾斜
em有强调作用
<em></em>
<i></i>

small big 行级标签

浏览器支持最小字号为 12px
small 文字小一号
big 文字大一号，html5 中被淘汰
<small></small>
<big></big>

sub sup 行级标签

设置文本为下标和上标，用来调整文字正常显示的基线
文字会小一号
<sub> 下标
<sub></sub>
<sup>上标
<sup></sup>

04 HTML 单双标记的区别

单标记
- 换行符 <br/>
- 水平线 <hr/>
- 图片标签 <img/>
- 文本标签 <input/>
- link标签 <link/>
- 元信息标签 <mata/>
双标记

05 HTML 实体转义

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`&gt`;
&	和号	`&`
"	引号	`"`
×	乘号	`×`
÷	除号	`&divide`

06 HTML 块级元素和行级元素

块级元素（相当于执行了 `display:block;` 操作）

div p hr h1 h2 img…
独占一行，宽高可控
没有设置宽度，将铺满整行
块级元素其内可以包含块级和行级元素

行级元素（相当于执行了 `display:inline;` 操作）

span em strong …
不独占一行，与相邻元素占同一行，行占满时自动跳动到下一行
宽高不可控
行级元素其内只有包含行级元素

块级标签转为行级标签：设置 `display` 样式

标签嵌套规则

块元素包内联元素或某些块元素，内联元素只能包内联元素
块级元素不能放在 <p> 里
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素：<h*>
块级元素与块级元素并列，内嵌元素与内嵌元素并列

07 HTML 文件命名规则

文件或目录名以字母或下划线开头，只能包含数字、字母、下划线
目录名 e.g.
图片 pic/img/images
- 视频 video
- 音频 music
- 其他文件 file
文件名 e.g.
- 首页必须是 index.html
- 公司介绍 about.html
- 新闻列表 news.html
- 新闻页详情 news_details.html
- 产品列表 product.html
- 产品页详情 product_details.html
- 联系我们 contact.html

DAY1 总结

1、HTML 是一种超文本标记语言，它不属于编程语言

2、HTML5 是2014后推出的，它是公认的下一代 web 语言，是重要的网络推手

3、HTML具有简易性、可扩展性、平台无关性和通用性等特点

4、网页分为静态和动态两种

5、五大主流浏览器：IE(Edge) FireFox Chrome Opera safari

6、浏览器内核由渲染引擎和JS引擎两部分组成

内核：Trident(IE) Gecko(FireFox) Webkit(safari/chrome) Blink(chrome/opera)
国内大多数浏览器采用的双核驱动（Trident&Webkit 或 Trident&Blink）
移动端：iphoe ipad 采用的是 webkit 内核，android4. 4 以下版本采用的 webkit 内核，而4. 4以上版本采用是 blink 内核

7、常用的专业开发工具有: sublime Hbuilder VSCode Atom Webstorm

8、一个网页基本构架

<html>
  <head></head>
  <body></body>
</html>

9、标签分块级和行级（内联）两种

块级独占一行，识别宽高，如果不设置，宽度为整行宽度，高度为内容实际的高度
行级不独占一行，不能设置宽高，宽高分别为内容实际的宽高
块级标签可以通过设置样式 display:inline; 转换为行级标签，而行级标签可以通过设置样式 display:block; 转换为块级标签
学过的块级标签有：div p h1-h6 ul ol pre table address …
行级标签：span a b strong i em sup sub …
img 属于行级块标签。相当于执行了 display:inline-block; 操作

10、W3C规范由结构（HTML）、表现（CSS）和行为（JavaScript）三部分组成

W3C常见规范：

定义语言编码，两种写法

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

JavaScript 定义

<script language="javascript" type="text/javascript">
	//脚本代码
</script>

CSS 定义，带上计量单位

<style type="text/css">
	/* 样式设置 */
</style>

不要在注释内容中使用 --
所有标签和属性的名字都必须用小写
所有的属性值必须用双引号
实体转义符的使用
要给所有属性赋值（写出来的属性值），未赋值则默认为属性名本身
标签必须闭合
所有标签必须合理嵌套，不能出现嵌套交叉的情况
图片要添加有意义的 alt 属性
在 form 表单中添加 label 属性，以增加用户体验

11、W3C 中的嵌套规范

块级元素可以包含行级元素或块级元素，但行级元素只能包含行级元素
p h1-h6 dt 标签中只能包含行级标签，不能再包含块级标签
块级元素与块级元素并列，行级与行级并列

12、在开发过程中，尽量要使用语义化标签

08 HTML 标签属性

标签由标签名、标签属性和文本内容三部分组成（单标签没有文本内容）
标签属性是对标签的一种描述方式
标签属性分三种：通用属性、自有属性、自定义属性
- 通用属性：所有标签都具有的属性
  - id：用来给每个标签取一个唯一的名称
  - class：用来给一组标签起类名
  - style：用来设置当前标签的样式
  - tltle：当鼠标移到该标签上所显示的提示内容
- 自定义属性：通常用来传值或用于图片懒加载等方面
  - 格式：data-*

<img data-src="图片名" alt="提示文本" />
<p data-id=""></p>

09 table 表格标签

`table` 标签

主要用于呈现格式化数据，由行和列组成
基本语法

<!-- Emmet语法 table>tr*1>th{内容$}*3+tr*2>td{内容$}*3 -->
<table>
  <tr><!-- tr表示行 -->
    <th>内容1</th><!-- th表示表头，自动加粗居中 -->
    <th>内容2</th>
    <th>内容3</th>
  <tr>
    <td>内容1</td><!-- td表示列 -->
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  </tr>
</table>

`<table>`属性	值	描述
align	`left` `center` `right`	不赞成使用。规定表格相对周围元素的对齐方式
bgcolor	`rgb(x,x,x)` `#xxxxxx` `colorname`	不赞成使用。规定表格的背景颜色
border	`pixels`	规定表格边框的宽度
cellpadding	`pixels` `%`	规定单元边沿与其内容之间的空白
cellspacing	`pixels` `%`	规定单元格之间的空白
frame	`void` `above` `below` `hsides` `lhs` `rhs` `vsides` `box` `border`	规定外侧边框的哪个部分是可见的
rules	`none` `groups` `rows` `cols` `all`	规定内侧边框的哪个部分是可见的
summary	`text`	规定表格的摘要
width	`%` `pixels`	规定表格的宽度

<table border="1" align="center" width="400" cellspacing="0" cellpadding="10">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>001</td>
    <td>张三</td>
    <td>男</td>
  </tr>
  <tr>
    <td>002</td>
    <td>李四</td>
    <td>男</td>
  </tr>
</table>

`td` 标签

基本用法

<!-- Emmet语法 table[border="1" width="500" align="center"]>tr*3>td{内容$$}*3 -->
<table border="1" width="500" align="center">
  <tr>
    <td>内容区01</td>
    <td>内容区02</td>
    <td>内容区03</td>
  </tr>
  <tr>
    <td>内容区01</td>
    <td>内容区02</td>
    <td>内容区03</td>
  </tr>
</table>

`<td>` 属性	值	描述
abbr	text	规定单元格中内容的缩写版本
align	left、right、center、justify、char	规定单元格内容的水平对齐方式
valign	top、middle、bottom、baseline	规定单元格内容的垂直对齐方式
axis	category_name	对单元进行分类
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	不赞成使用。规定单元格的背景颜色
char	character	规定根据哪个字符来进行内容的对齐
charoff	number	规定对齐字符的偏移量
colspan	number	规定单元格可横跨的列数
headers	header_cells’_id	规定与单元格相关的表头
height	pixels、%	不赞成使用。规定表格单元格的高度
nowrap	nowrap	不赞成使用。规定单元格中的内容是否折行
rowspan	number	规定单元格可横跨的行数
scope	col、colgroup、row、rowgroup	定义将表头数据与单元数据相关联的方法
width	pixels、%	不赞成使用。规定表格单元格的宽度

完整表

完整表格组成：captain（标题） thead（表头） tbody（表体） tfoot（表尾）四部分组成
基本语法

<!-- Emmet语法 table[border="1" width="600" align="center"]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td) -->
<table border="1" width="600" align="center">
  <caption>学生信息表</caption>
  <thead>
    <tr>
      <th>学生</th>
      <th>姓名</th>
      <th>家庭住址</th>
      <th>备注</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tom</td>
      <td>男</td>
      <td>哈哈哈</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>mary</td>
      <td>女</td>
      <td>哈哈哈</td>
      <td>ccc</td>
    </tr>
    <tr>
      <td>alice</td>
      <td>女</td>
      <td>哈哈哈</td>
      <td>ppp</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">附注：哈哈哈哈哈</td>
    </tr>
  </tfoot>
</table>

09 `form` 表单标签

form 表单标签是所有标签最核心标签之一，是用来实现前后端交互的一个重要标签
常用属性
- name：表单名称
- action：表单数据提交的地方（通常是一个后台文件名 .jsp/.php/.asp/.aspx/.py 等或网址），#表示提交到当前文件下
- method：前端提交数据到后端的方法，主要有 get 和 post，默认是 get

<form name="stuInfo" action="#" method="get">
  <input type="text" name="userName" placeholder="请输入您的姓名">
  <input type="submit">
</form>

表单元素分为

input 类：主要用来完成输入、选择或发出指令
- text：单行文本输入框 type="text" 可以不写，默认值
  - 属性：placeholder（提示） name（命名） minlength和maxlength（最少/最多输入的字符个数） disabled（失效） value（默认值） pattern（正则匹配）
- password：密码框
  - 属性：placeholder（提示） name（命名） minlength和maxlength（最少/最多输入的字符个数） disabled（失效） value（默认值） pattern（正则匹配）
- radio：单选按钮，通常是两项以上
  - 属性：name（必须要有） disabled（失效） value（默认值） checked（选中）
- checkbox：复选框，可用来选择0项、1项或多项
  - 属性：name（必须要有） disabled（失效） value（默认值） checked（选中） readonly（只读）
- file：文件上传按钮
- button：普通按钮，通常用来调用脚本代码
  - 属性：value（按钮的标题） disabled（失效）
- image：图片按钮
  - 属性：src（用来加载提示图片，用它替换了value） disabled（失效）
- submit：提交按钮，用来将表单数据提交到后台
- reset：重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态

属性	值	描述
accept	`mime_type`	规定通过文件上传来提交的文件的类型
align	left``right `top` `middle` `bottom`	不赞成使用。规定图像输入的对齐方式
alt	`text`	定义图像输入的替代文本
autocomplete	`on` `off`	规定是否使用输入字段的自动完成功能
autofocus	`autofocus`	规定输入字段在页面加载时是否获得焦点（不适用于 `type="hidden"`）
checked	`checked`	规定此 `input` 元素首次加载时应当被选中
disabled	`disabled`	当 `input` 元素加载时禁用此元素
form	`formname`	规定输入字段所属的一个或多个表单
formaction	`URL`	覆盖表单的 `action` 属性（适用于 `type="submit"` 和 `type="image"`）
formenctype	见注释	覆盖表单的 `enctype` 属性（适用于 `type="submit"` 和 `type="image"`）
formmethod	`get` `post`	覆盖表单的 method 属性（适用于 type="submit"`和`type=“image”`）
formnovalidate	`formnovalidate`	覆盖表单的 `novalidate` 属性如果使用该属性，则提交表单时不进行验证。
formtarget	`_blank` `_self` `_parent` `_top` `framename`	覆盖表单的 `target` 属性（适用于 `type="submit"` 和 `type="image"`）
height	`pixels` `%`	定义`input` 字段的高度（适用于 `type="image"`）
list	`datalist-id`	引用包含输入字段的预定义选项的 `datalist`
max	`number` `date`	规定输入字段的最大值，请与 “min” 属性配合使用，来创建合法值的范围
maxlength	`number`	规定输入字段中的字符的最大长度
min	`number` `date`	规定输入字段的最小值，请与"max" 属性配合使用，来创建合法值的范围
multiple	`multiple`	如果使用该属性，则允许一个以上的值
name	`field_name`	定义 input 元素的名称
pattern	`regexp_pattern`	规定输入字段的值的模式或格式，例如 `pattern="[0-9]"` 表示输入值必须是0与9之间的数字
placeholder	`text`	规定帮助用户填写输入字段的提示
readonly	`readonly`	规定输入字段为只读
required	`required`	指示输入字段的值是必需的
size	`number_of_char`	定义输入字段的宽度
src	`URL`	定义以提交按钮形式显示的图像的 `URL`
step	`number`	规定输入字的的合法数字间隔
type	`button` `checkbox` `file` `hidden` `image` `password` `radio` `reset` `submit` `text`	规定 `input` 元素的类型
value	`value`	规定 `input` 元素的值
width	`pixels` `%`	定义 `input` 字段的宽度（适用于 `type="image"`）

testarea 类：文本域（也可叫做多行文本框），主要用于输入大批量的内容
- 属性：name id cols rows placeholder minlength maxlength required value
select 类：下拉列表框，用来单项选择。用 option 呈现每个选项
- 属性：multiple（可多选） size（最多显示行数）

<form name="stuInfo" action="#" method="get">
  <label for="sex">性别：</label>
  <select id="sex" multiple size="5">
    <option value="男">男</option>
    <option value="女">女</option>
  </select>
</form>

button 类：普通按钮，具有提交功能。可以单独使用，不写在 form 中；如果写在 form 中就有提交功能

10 `iframe` 框架标签

iframe：框架集，用来将多个网页文件组合成一个文件。实际开发中尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO优化
常用属性：
name：框架名
src：引入的外部 html 文件
scrolling：滚动条（yes no auto）
width：宽度（% px）
height：高度（% px）
frameborder：是否有边框（1 0）
marginheight：框架离顶部和底端的距离
marginwidth：框架离左右的距离（%px`）

11 HTML5

HTML5新特性

新增了audio和video音频播放，抛弃了flash
新增了canvas画布（绘画，制作动画，如小游戏开发等）
地理定位
离线缓存
硬件加速
Web Cocket（全双工通信）
增加了本地存储
新增了一些语义化标签

网页布局标签

header：页首
nav：导航栏
aside：侧边栏
main：主体
section：区块
article：文章
footer：页尾

语义化标签

mark：高亮显示（行级）
details（描述）与summary（摘要）：一般用于名词解释或用于封装一个区块
meter：度量衡
- value：当前值
- min：最小值
- max：最大值
- low：指定范围最小值
- high：指定范围最大值
progress：进度条
- value：当前值
- min：最小值
- max：最大值
- low：指定范围最小值
- high：指定范围最大值
dialog：对话框或窗口
figure：对元素进行组合，一般用来组合一张图的标题、图片和图片描述

HTML5 多媒体

audio：播放音乐或音频，支持格式 .mp3/.ogg/.wav
- src：文件路径
- autoplay：自动播放
- loop：循环
- controls：控制条
- muted：静音
- preload：预加载，使用 autoplay 时，preload 自动失效
video：加载视频，支持格式 .mp4/.ogg/.wemb
- src：文件路径
- autoplay：自动播放
- loop：循环
- controls：控制条
- muted：静音
- preload：预加载，使用 autoplay 时，preload 自动失效
- width：宽
- height：高
- poster：海报
embed：嵌入内容或加载插件
- src：文件路径
- width：宽
- height：高
- type：类型
- autostart：自动开始
- loop：循环
- hidden：隐藏
- starttime：开始时间
canvas：画布，一个容器元素
- 单独使用无意义结合 js 使用
- canvas 宽高最好不要通过 css 实现，直接使用标签属性实现

12 HTML5 常用属性

contentEditable
- 将标签转为可编辑状态，可用于所有标签，值为 true false
hidden
- 对元素进行隐藏，值为 true false，默认为 hidden
data-*
- 用于存储页面或应用程序私有自定义数据，一般用于传值
Multiple
- 规定输入域中可选择多个内容。用于表单组件中，如 file select
required
- 约束表单元素在提交前必须输入值。用于表单组件中需要结合提交按钮使用
parttern
- 用于验证模式输入字段的模式

13 HTML5 表单组件

color：颜色
email：邮箱
tel：电话号码
url：网址
number：数字
range：范围
search：搜索
date：日期
datetime：日期时间
datetime-local：本日期时间
year：年份
month：月份
time：时间

14 HTML5 表单属性

formaction：修改 action 数据提交地方
formenctype：修改表单请求的类型
formmethod：修改数据提交方法
form：设置表单元素属于哪一个表单
：画布，一个容器元素
- 单独使用无意义结合 js 使用
- canvas 宽高最好不要通过 css 实现，直接使用标签属性实现

宁阿宁阿宁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML 笔记】基础内容

文章目录01 HTML 文档结构02 基本标签div 块级标签span 行级标签h* 块级标签p 块级标签br 换行hr 块级标签a 行级标签img 行级块标签ul ol dl 块级标签!-- 注释内容 -- 添加注释03 文本格式化标签pre 块级标签strong b 行级标签em i 行级标签small big 行级标签sub sup 行级标签04 HTML 单双标记的区别05 HTML 实体转义06 HTML 块级元素和行级元素块级元素（相当于执行了 `display:block;` 操作）行级元素（
复制链接

扫一扫