HTML学习笔记

最新推荐文章于 2024-03-18 16:36:35 发布

榊sakaki

最新推荐文章于 2024-03-18 16:36:35 发布

阅读量344

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_31926899/article/details/118334026

版权

IDE（Integrated Development Environment ，集成开发环境）是含代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的“高级代码编辑器”

每个IT工程师都要有自己趁手的IDE，它是我们的武器

要理解无论使用什么IDE编写出来的代码，本质上都是“白底黑字”的，都是“纯文字”的

Visual Studio Code简称VS Code，来自微软公司

优点：内置功能非常丰富、插件全且安装简单、轻量、有 MAC版本

请访问code.visualstudio.com下载最新版的VS Code

配置中文界面需要安装插件，在插件中心搜索Chinese，安装插件即可

VS Code提供了不同风格的颜色主题在文件→首选项→颜色主题中，将主题改为Light+（ default light）

如果能用ctrl + 鼠标滚轮缩放字号，会非常方便我们需要进行相关的配置，打开配置中心，搜索“滚动”即可

ctrl + c 复制 ctrl + v 粘贴 ctrl + x 剪切 ctrl + z 撤销 ctrl + s 保存

Sublime是另外一个非常著名的编辑器，Sublime中的快捷键非常的经典，而VS Code可以集成Sublime的快捷键需要安装插件，在插件中心搜索Sublime，安装插件即可

ctrl + shift + d 复制当前行 ctrl + shift + ↑ 上移当前行 ctrl + shift + ↓ 下移当前行

按住鼠标滚轮，然后下拉，即可进行多行编辑

HTML5特性

空白折叠现象

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

小于号 &lt 大于号 &gt 空格（不会被折叠）&nbsp © 版权符号©&copy

HTML注释

为代码书写清晰的注释是非常重要的，可以使日后再阅读代码或者他人阅读代码提供提示HTML的注释语法如下，可以在VScode编辑器中使用ctrl+/ 键输入

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

title标签用来设置网页的标题，文字会显示在浏览器的标签栏上title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的

合理设置网页的网页的关键词和页面描述，也是SEO的重要手段SEO（Search Engine Optimization，搜索引擎优化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益

使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能

页面描述也是搜索引擎显示的简介词语

创建第一个网页

创建网页 - 方法1

 创建一个空文件夹，在VScode编辑器中打开这个文件夹

 按ctrl + N快捷键新建文件，保存格式必须要手动填写

“.html”后缀

创建网页 - 方法2

 在文件夹中直接点击鼠标右键“新建文本文件”

 将.txt格式文件改为.html文件

 必须设置操作系统“文件扩展名”为可见

html文件是纯文本的

 网页虽然是花花绿绿的，但是html文件本身是纯文本的

HTML骨架的生成

 输入!（英文模式下输入的感叹号），按tab键，即可自动生

成HTML5的骨架

 如果骨架没有生成，就说明你没有将网页保存，或者网页保

存格式不是.html后缀

浏览网页的方法

网页的浏览 - 方法1

 直接在文件夹中双击网页图标，即可查看网页

 Chrome浏览器非常适合开发，所以要将Chrome浏览器设置

为默认的浏览器哦，杀毒软件、管家通常会阻止这个操作，

请妥善设置杀毒软件相关设置

网页的浏览 - 方法2

 给VSCode安装Live Server插件，故名思议，这个插件可以

让“实时热更新” 网页，自动刷新网页

 安装完插件后，在html文件中，按ctrl+shift+p键，选择

“Open With Live Server”即可

 使用这种方法必须注意：网页必须存放在文件夹中，且

VSCode已经打开这个文件夹

认识标签

什么是标签

 HTML叫做“超文本标记语言”，超文本标记就是标签

 这些标签都有不同的功能2

认识标签对儿

 标签通常成对儿出现

起始标签结束标签

标签对儿

不同功能的标签有不同的功能

 不同功能的标签有不同的功能

p标签表示段落

h1标签表示一级标题

 标签可以给文字设置不同的“语义”

单标签

 有的标签不是成对儿的，而是只有起始标签，称为单标签

 在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写

重新认识HTML

 现在，你就能彻底理解HTML“超文本标记语言”的含义了

超文本标记

标题和段落标签

标题标签

 h系列标签表示“标题”语义，h是headline的意思

标签语义

h1 一级标题

h2 二级标题

h3 三级标题

h4 四级标题

h5 五级标题

h6 六级标题

标题标签

 搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容

放到<h1></h1>中，比如网页的logo等

 <h1></h1>标签一般只能放置一个，否则会被搜索引擎视为

作弊

段落标签

 <p></p>标签表示段落标签，p是英语paragraph的意思

 任何段落都要放到<p></p>标签中，因为HTML中即使代码换

行了，页面显示效果也不会换行，必须写到<p></p>中

 <p></p>标签中不能嵌套h系列标签和其他p标签

div标签

 div是英语division“分割”的缩写，顾名思义，

<div></div>标签对用来将相关的内容组合到一起，以和其

他内容分割，使文档结构更清晰

 比如，网页的头部要放到一个<div></div>标签对中，轮播

图也要放到一个<div></div>标签对中，文章内容也要放到

一个<div></div>标签对中

div标签

 <div></div>是最常见的HTML标签，因为它可以结合CSS使

用，实现网页的布局，这种布局形式叫做“DIV+CSS”

 <div></div>像是一个容器，什么都可以容纳，因此工程师

也习惯称呼<div></div>为“盒子”

字符集

字符集设置出现的位置

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

字符集设置

单词识记

<meta charset=

"UTF-8">

元标签，表示网页的

基础配置字符集 UTF-8是一种字符集

UTF-8和gb2312

字符集涵盖字符

1个汉字

字节数

适用场景

UTF-8 涵盖全球所有国家、民族的

文字和大量图形字符

3 制作有非汉字文字的网页

gb2312

（gbk）

收录所有汉字字符（包括简

体、繁体）和英语、少量韩

文、日语和少量图形字符

制作只有汉语和英语的网页，

由于1个汉字仅占2字节，网

页文件尺寸明显减少

<meta charset=

"gb2312">

更改网页的字符集

 无论使用哪种字符集，一定要在VScode编辑器中将文件也设

置为相同字符集，否则会出现乱码，然后更改meta标签：

 Live Server插件不支持gb2312（gbk）字符集，只支持

UTF-8字符集

定义列表

定义列表的示例代码

<dl>

<dd>国际经济、金融、科技创新中心</dd>

<dd>经济特区，国际化都市</dd>

</dl>

definition list

定义列表

data term

数据项

data definition

数据定义

解释说明

定义列表

 需要逐条给出定义描述的列表，就是定义列表

和、标签

 是定义列表标签，内容交替出现、标签

<dl>

<dd>国际经济、金融、科技创新中心</dd>

<dd>经济特区，国际化都市</dd>

</dl>

和、标签

 也允许和不交替出现，而是分别处于不同的定义列表中

<dl>

<dd>我国政治中心、文化中心、国际交往中心、科技创新中心</dd>

</dl>

<dl>

<dd>我国国际经济、金融、贸易、航运、科技创新中心</dd>

</dl>

<dl>

<dd>中国经济特区、全国性经济中心城市和国际化城市</dd>

</dl>

哪里应该使用定义列表

 使用什么标签，不应该看样式，应该看语义

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

该使用定义列表

无序列表是“没有刻意顺序”的列表

<ul>

</ul>

<ul>标签和<li>标签

 无序列表使用<ul></ul>标签，每个列表项都是<li></li>

标签

unordered list

无序列表

list item

列表项

<ul>

</ul>

父子组合标签

 无序列表是一个父子组合标签，上阵父子兵，不能单独出现

父标签

子标签

<ul>

</ul>

注意代码正确缩进

 当HTML标签形成嵌套，必须注意代码的缩进（Tab键）

缩进1个级别

<li>不能单独使用

 <li>标签不能单独使用，它必须放到<ul>或者<ol>中使用

<ul>的子标签只能是<li>

 HTML规定，<ul>的子标签只能是<li>，绝对不能出现其它

任何标签

<ul>

</ul>

<ul>

</ul>

<li>中可以放任何标签

 <li>标签是容器，内部可以放任何其他标签

<ul>

<li>

牛奶

<p>要脱脂或低脂的</p>

</li>

</ul>

列表的嵌套

<ul>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

一定要记住：

① li不能散着放

② ul的子标签只能是li

③ li里面可以放任何东西

无序列表的type属性

 无序列表有type属性，可以定义前导符号的样式，但是在

HTML5中已经被废弃，建议使用CSS替代

值描述

disc 默认值，实心圆

circle 空心圆

square 实心方块\

有序列表

有序列表是“有刻意顺序”的列表

<ol>

</ol>

<ol>标签和<li>标签

 有序列表使用<ol></ol>标签，每个列表项都是<li></li>

标签

ordered list

有序列表

list item

列表项

<ol>标签注意事项

 <li>标签不能散着放，它必须是<ol>标签或者<ul>标签的

子标签

 <ol>的子标签只能是<li>标签

 <li>标签中可以放任何东西

<ol>标签的type属性

 ol标签可以设置type属性，用来设置编号的类型

type属性值意义

a 表示小写英文字母编号

A 表示大写英文字母编号

i 表示小写罗马数字编号

I 表示大写罗马数字编号

1 表示数字编号（默认）

<ol>标签的start属性

 start属性值必须是一个整数，指定了列表编号的起始值

 此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type

属性可能指定为了罗马数字编号等其他类型的编号

<ol>标签的reversed属性

 reversed属性指定列表中的条目是否是倒序排列的

</ol>

 reversed属性不需要值，只需要写reversed单词即可，这是

HTML5的全新特性

超级链接

 超级链接是将网页和网页连结到一起的方法，是互联网成“

网”的原因

<a>标签

 使用<a>标签制作超级链接

<a href=

"2.html">去第二个网页</a>

a是anchor

（锚）的首字母 hypertext reference

超文本引用

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

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

<a href=

"web/2.html">去第二个网页</a>

<a href="../web/2.html">去第二个网页</a>

<a>标签的title属性

 <a>标签的title属性用于设置鼠标的悬停文本

<a href="2.html" title="很好看哦~">去第二个网页</a>

在新窗口中打开网页

 将<a>标签的target属性设置为blank，即可在新标签页中打

开网页

<a href=

"2.html" target=

"blank">去第二个网页</a>

 HTML4代，blank之前有一个下划线

<a href=

"2.html" target=

"_blank">去第二个网页</a>

给图片设置超级链接

 图片也可以设置超级链接，只需要用<a>标签包裹img标签

即可

<a href=

"2.html" target=

"blank">

<img src=

"images/goblin.png">

</a>

页面内锚点

 较长的页面，可以适当的给h系列标签添加id属性，它将成为

页面的“锚点”

<h1 id=

"wuxi">无锡美景</h1>

 当网址后面添加#时，页面将自动滚动到锚点所在位置

页面内锚点

 其他页面的超级链接，可以链接到指定锚点

<a href=

"lvyou.html#wuxi">看无锡美景</a>

#表示锚点

下载链接

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

<a href=

"1.zip">下载</a>

邮件链接、电话链接

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

关软件

<a href=

"mailto:me@test.com">给小编发邮件</a>

<a href=

"tel:12306">打电话买火车票</a>

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

区块标签

div标签实现文档区块分隔

 曾几何时div标签是文档区块分隔唯一手段，为了区分每个

div的功能，程序员会借助div标签的class属性

<body>

</div>

</div>

</body>

HTML5区块标签

 HTML5推出了众多新的区块标签

区块标签说明

<section> 文档的区域，语义比div大

<article> 文档的核心文章内容，会被搜索引擎主要抓取

<aside> 文档的非必要相关内容，比如广告等

<nav> 导航条

<header> 页头

<main> 网页核心部分

<footer> 页脚

语义化标签

<span>标签

 <span>标签是文本中的“区块”标签，本身没有任何特殊

的显示效果，可以结合CSS来丰富样式

<p>

</p>

<p>

</p>

<b>、<u>、<i>标签

标签说明

<b> 被加粗的文字，CSS已经替代了它的功能

<u> 加下划线的文字，CSS已经替代了它的功能

<i> 倾斜的文字，CSS已经替代了它的功能

 <b>、<u>、<i>标签充满浓浓的“样式”意味，已经被

CSS替代，但是在网页中也可以表示需要强调的文本

<strong>、<em>、<mark>标签

标签说明

<strong> 代表特别重要文字

<em> 代表强调文字

<mark> 代表一段需要被高亮的文字

 <strong>、<em>、<mark>标签均表示强调语义

<figure>、<figcaption>标签

 <figure> 元素代表一段独立的内容, 与说明<figcaption>

配合使用, 它是一个独立的引用单元，比如建议读者拓展视

野的图片等，当这部分转移到附录中或者其他页面时不会影

响到主体

图片标签

<img>标签

 <img>标签用来在网页中插入图片

img是image

(图片)的缩写

src是source

(来源)的缩写

图片的存储目录

和完整文件名

图片必须复制到项目文件夹中

 一定注意，图片必须要复制到项目文件夹中，一般将图片保

存到项目文件夹中的images子文件夹中

图片路径必须写正确

<img src=

"images/gugong.jpg">

images/表示

images文件夹

后缀名要写！

图片只是被引入到了网页中

 图片本质上没有被插入到网页中，只是被引入到了网页中，

所以将来要将图片也一起上传到服务器上，将图片复制到项

目文件中，即可整体上传

上传

<img>标签的alt属性

 alt 属性是alternate“替代品”的缩写，它是对图像的文本

描述，不是强制性的

<img src=

"images/gugong.jpg" alt=

" ">

 如果由于某种原因无法加载图像，浏览器会在页面上显示alt

属性中的备用文本

 供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本

<img>标签的width、height属性

 width、height属性分别设置宽度和高度，单位是像素，但

是不需要写单位

<img src=

"images/gugong.jpg" alt=

" " width=

"300">

 如果省略其中一个属性，则表示按原始比例缩放图片

网页上支持的图片格式

格式说明

.bmp windows画图软件默认保存的格式，位图

.gif 支持动画（比如表情包）

.jpeg(.jpg) 有损压缩图片，用于照片

.png 便携式网络图像，用于logo、背景图形等，支持

透明和半透明

.svg 矢量图片

.webp 最新的压缩算法非常优秀的图片格式

相对路径

 相对路径：描述从网页出发，如何找到图片。比如“前面路

口左转，直走100米后右转就到了”

 随着网页和图片的位置关系不同，插入图片的代码随之改变

 如果需要回退层级，使用“../”这样的写法

绝对路径

 绝对路径：描述图片精准地址。比如“北京市海淀区西三环

北路甲2号院中关村国防科技园2号楼”

<img src=

"https://www.imooc.com/static/img/

index/logo-recommended.png">

 不管网页在哪里，绝对路径不需要改变

音频和视频

u 曾几何时，在网页中插入音频和视频需要借助Flash，今天，

Flash技术已经快要被淘汰，HTML5可以轻松在网页中插入

音频和视频

音频

u 在浏览器中插入音频需要使用<audio>标签，兼容到IE9

<audio controls src=

"音频地址">

抱歉，您的浏览器不支持audio标签，请升级浏览器

</audio>

显示播放控件音频地址

标签对中是对不兼容audio标

签的浏览器的显示文字

常用音频格式

u 常用音频格式是mp3和ogg格式

autoplay属性

u 声明autoplay属性，音频会自动播放

u 常用的浏览器为了不打扰用户，可能会不允许自动播放音乐

，必须让用户手动点击之后才能播放

loop属性

u 声明loop属性，将循环播放音频

视频

u 在浏览器中插入视频需要使用<video>标签，兼容到IE9

<videocontrols src=

"视频地址"loopautoplay>

抱歉，您的浏览器不支持video标签，请升级浏览器

</video>

显示播放控件视频地址

标签对中是对不兼容video标

签的浏览器的显示文字

常用视频格式

u 常用视频格式是mp4、ogv、webm等格式

HTML5中新增的表单控件

更丰富的input种类

type属性值控件

color 颜色选择控件

date、time 日期、时间选择控件

email 电子邮件输入控件

file 文件选择控件

number 数字输入控件

range 拖拽条

search 搜索框

url 网址输入控件

<datalist>控件

 <datalist>控件可以为输入框提供一些备选项，当用户输

入的内容与备选项文字相同时，将会显示智能感应

</datalist>

表单的创建

表单是什么

 表单用来收集信息，比如注册、登录、发送评论反馈、购买

商品等等

表单的创建

 所有HTML表单都以一个<form>元素开始

</form>

基本控件（1）

单行文本框

 使用type属性值被设置为text的<input>元素可以创建单行

文本框，它是一个单标签

单行文本框

 value属性表示已经填写好的值

 placeholder属性表示提示文本，将以浅色文字写在文本框

中，并不是文本框中的值

<input type=

"text" placeholder=

"请输入姓名">

单行文本框

 disabled属性表示用户不能与元素交互，即“锁死”

单选按钮

 使用type属性值被设置为radio的<input>元素可以创建单

选按钮

<input type=

"radio">

 互斥的单选按钮应该设置它们的name为相同值

单选按钮

 单选按钮要有value属性值，向服务器提交的就是value值

 单选按钮如果加上了checked属性，表示默认被选中

label标签

 label标签用来将文字和单选按钮进行绑定，用户单击文字

的时候也视为点击了单选按钮

<label>

<input type=

"radio"> 男

</label>

<label>

<input type=

"radio"> 女

</label>

label标签

 在HTML4时代，label标签是通过for属性和单选按钮的id属

性进行绑定的

<label for=

"nan">男</label>

复选框

 使用type属性值被设置为checkbox的<input>元素可以创

建复选框

<input type=

"checkbox">

 同组复选框应该设置它们的name为相同值

 复选框要有value属性值，向服务器提交的就是value值

基本控件（2）

密码框

 使用type属性值被设置为password的<input>元素可以创

建密码框

下拉菜单

 <select>标签表示下拉菜单，<option>是它内部的选项

<option value=

"alipay">支付宝</option>

<option value=

"wx">微信</option>

<option value=

"bank">网银</option>

</select>

多行文本框

 <textarea></textarea>表示多行文本框

 rows和cols属性，用于定义多行文本框的行数和列数

三种按钮

type属性值按钮种类

button 普通按钮，可以简写为

submit 提交按钮

reset 重置按钮

 表单中常见三种按钮，它们也都是input标签，type属性值

不同

input类型总结

type属性值控件

text 单行文本框

radio 单选按钮

checkbox 多选按钮

password 密码框

button 普通按钮

reset 重置按钮

submit 提交按钮

表格标签

认识表格

<table>、<tr>和<td>标签

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

table是表格

的意思

table row

表格行

table data

表格数据

table data

表格数据

table data

表格数据

<table>的border属性

 为了让表格能够显示边框，<table>标签通常有border属性

<table border=

"1">

……

…… </table>

<table>的caption属性

 <caption> 是表格的标题，它常常作为 <table> 的第一个

子元素出现

<th>标签

 <th> 是“标题小格”，可以替代<td>的作用，表示标题小

格

表格的其他特性

<thead>、<tbody>、<tfoot>标签

 <thead>标签定义表头

 <tbody>标签定义表核心内容

 <tfoot>标签定义表脚，通常是汇总行

cellspacing、cellpadding属性

 cellpadding 属性定义了表格单元的内容和边框之间的空间

，已经废弃，使用CSS替代它

 cellspacing 属性（使用百分比或像素）定义了两个单元格

之间空间的大小，已经废弃，使用CSS替代它

colspan属性

 colspan属性用来设置td或者th的列跨度

rowspan属性

 rowspan属性用来设置td或者th的行跨度

榊sakaki

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫