HTML学习笔记

最新推荐文章于 2024-10-10 08:30:00 发布

意终有尽时

最新推荐文章于 2024-10-10 08:30:00 发布

阅读量195

点赞数

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

本文链接：https://blog.csdn.net/a15107071954/article/details/120693852

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML

HTML不是编程语言，是一种超文本标记语言。“超文本”是指页面内可以包含图片、链接、音乐、程序等非文字因素。

扩展名为.htm或者.html。
记事本里面是纯文本，写代码都要用纯文本。

B/S架构

即浏览器/服务器模式。是网页的架构。

优点：不需要安装；不需要更新；跨平台。

使用的语言：HTML（结构）描述页面结构，css（表现）控制页面元素样式，JavaScript（行为）响应用户操作。

URL，即网址。

蒂姆.伯纳斯-李发明了万维网。万维网联盟W3C，制定网页开发标准。

浏览器是用来渲染网页并呈现出来的工具。

HTML文档

html文档学习网址：https://www.3school.com.cn。

<html>：用来包含html文档的所有元素。

<head>：包含在头部的内容，不会被显示出来。通常包含页面编码，作者，页面描述，js的导入，css的导入等。

<meta charset="utf-8">：声明文档编码方式。

<title>：声明文档标题，会显示在浏览器的选项卡中。搜索之后的超链接显示的是title里面的内容。

<body>：包含所有想要显示在浏览器的元素。

HTML元素

html元素：由一个开始标签，一个结束标签，以及中间的内容组成。标签可嵌套使用。eg，<p>内容</p>。也有的元素只有一个标签，叫自结束标签，eg，<img />。

块级元素（block element）：独占一行空间，用来布局页面段落，列表，导航菜单，脚注等结构。不能嵌套在行内元素中。

行内元素（inline element）：与其他的元素共享一行空间，一般被嵌套在块级元素内，作为段落的一部分出现。

注意：一般块元素里面什么都可以放，但是p元素里面不能放块元素。行内元素内不放块元素，但是<a>元素里面可以嵌套除它自身外的任何元素。浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。

空元素：只包含单个标签，通常用在文档中插入部分内容。eg，img。

替代元素：基于块元素和行内元素之间，具有两种特点。脱离了CSS的范畴，它们的表现不依赖于CSS，有：<img>， <object>， <video>， <textare>， <input>， <audio>， <canvas>等。

HTML属性

核心属性：
id：唯一标识
class：标识一类元素
style：样式
title：描述信息

HTML语法

空白（空格）：无论多少空白，浏览器都解释为一个空白

实体：正确显示预留字要用&开头，；结尾来表示。空格：  ，<：< ，"：" ，&：& ，>：> ，'：'

注释：，注释不能嵌套。

文档声明（doctype）：用来告诉浏览器当前的网页版本。HTML5的是<!doctype html>或<!Doctype HTML>，放在网页代码的最开头。

字符编码：编码（李立超->110000110110），解码（110000110110->李立超）。

字符集（charset）编码和解码所采用的规则，ASCII美国，ISO88591欧洲，GB2312中国，GBK上一编码扩展，UTF-8万国码。如果编码和解码采用的字符集不同就会出现乱码问题。

<meta>：设置网页字符集，<meta charset="utf-8">，放在head里面。

meta主要用于设置网页中的一些元数据，name指定数据的名称，content指定数据的内容。eg.name="keywords"，keywords表示网站的关键字；description用于指定网站描述，会显示在搜索之后的结果里面。

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

表示将页面重定向到另一个网站，content是指3秒后跳转。

HTML标签

所有带表现形式的标签都不推荐使用。

段落：（块）<p></p>。

标题：（块）<h1></h1>，<h2></h2>......<h6>。h1仅次于title，一般h1只会有一个。

标题组：（块）<hgroup>,可以将一组相关标题同时放到hgroup中。

引用：（块）<blockquote>，表示一个长引用。
（行内）<q>，短引用。

换行：<br>，换下一行。

强调：（行内）<em> 意为强调，语音语调的加重，突出文章重点；<strong> 意为强调，重要内容；<b> 加粗；<i> 斜体；<u> 下划线。

列表：有序列表ol（数字），子元素li，序号默认从1开始。无序列表ul（点），子元素li。定义列表dl，子元素dt，标题，表示定义的内容，子元素dd，列表项，对定义内容进行解释说明。

注：列表之间可以互相嵌套。

超链接：（行内）<a>，可以从当前文档到任意其他文档，也可以链接到文档的某个特定部分，里面可以嵌套除它自身外的任何元素。

例：

<a href="http://www.baidu.com" target="black">百度一下</a>

href表示跳转的目的地，可以取ID值，用于锚点跳转，可以取URL，也可以使用path定位文件，一般会使用相对路径，相对路径会使用./（表示当前文件所在的目录）或者../（当前文件所在目录的上一级目录）开头，也可以省略不写，若什么都没写，默认写的是./；可以取email；可以将href的属性设置为#，点击之后可以跳转到当前页面的顶部，也可以将#作为超链接的占位符（可以用“javascript:;”，这样没有任何作用），属性设置为#+目标元素id值，可以去文档任意部位，或者底部，即最后一个标签的位置，这个时候要加一个id属性（区分大小写，字母开头），做唯一标识。

target属性，规定在何处打开链接文档，默认为_self，在当前页面中打开超链接；_blank，在新的页面中打开超链接；_parent，在父窗口打开超链接；_top，在当前页面整个窗口打开超链接。

图片：（替换）<img>代表图片，用于向当前页面引入外部图片。

<img src= " images/phone.jpg " alt= "图片找不到了…" width= ”200px" >

src表示图片URL地址，必须有的；alt表示替换图片的文本内容，图片的描述，可以根据描述来搜索图片，不写alt则不能搜索，默认情况下不显示，当url地址出错时，有些浏览器将会显示alt的内容；width设置图片的宽度，单位px（像素），若宽度和高度中只改了宽度，会等比例改变高度，只改了高度效果一样；height设置图片的高度，单位px。

图片格式：

jpeg（jpg）支持颜色丰富，不支持透明效果，不支持动图，一般用来显示照片；

gif支持颜色比较少，支持简单透明，支持动图，一般用于颜色单一的图片和动图；

png支持颜色丰富，支持复杂透明，不支持动图，一般用于颜色丰富，复杂透明的图片（专为网页而生）；

webp，这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，缺点是兼容性不好；

base64，将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64。

PSD是一种有多个图层的图片格式。

选择图片的原则：效果一样用小的，效果不一样用效果好的。

内联框架：<iframe>，有结束符，用于向当前页面中引入一个其他页面，src属性指定要引入的网页路径（网址），frameborder属性用来指定内联框架的边缘。

音频：<audio>，用来向页面中引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放停止。

src属性用来指定文件路径；属性controls，是否允许用户控制播放；autoplay属性，音频是否自动播放，设置了则自动播放，但是目前的大部分浏览器都不会自动对音乐进行播放；loop属性，音乐是否循环播放。除了通过src来指定外部文件路径，还可以用<source>标签指定。

<audio>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="audio.mp3"> 
<source src="audio.ogg"> 
<embed src="audio.mp3" type="audio/mp3" width="300" height="50">
</audio>

注：一般浏览器支持mp3格式，但是当个别浏览器只支持ogg时，ogg就会生效；当浏览器（ie8）不支持时，会使用embed里面的音频，其中type是指定文件类型，大类/小类（特定文件类型）；当audio都不支持时，就会显示那段文字（从而提示报错）。

视频： <video>，也是一般使用source引入文件，使用方式和音频类似，文件类型有mp4，webm，当ie8不兼容时，使用embed标签。

注：一般视频和音频会占用很大内存，因此租用服务器会比较昂贵，为此可以将视频上传到网站上，然后引用网站上的视频。

表格：<table>代表表格，通过二维数据表示数据，通常配合<thead>表头，包含了<tr><td>，<tfoot>表脚，包含对表的总结信息，<tbody>表格的表体，包含很多<tr>，<caption>表格的标题信息，<tr>表格的行，包含<td><th>元素，<td>用来包含数据的单元格，<th>用于表头。

表格属性，colspan跨列数；rowspan跨行数；width宽度，当宽度太窄无法显示单元格内容时，在页面显示的时候会适当的调整；<colgroup>定义一个表中的一组列，只能作为table的子元素，位于<caption>元素后，其他元素之前；<col>定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为<colgroup>元素的子元素，其中span跨列数，即规定有几列可以作为同一列。

表格的样式：border-spacing指定边框之间的距离，border-collapse设置边框的合并，在设置完合并后距离就不会生效。如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody将所有的tr放在里面，因此，tr不是table的子元素。在td中默认情况下是垂直居中的，可以通过vertical-align来修改，middle是居中。在其他元素需要垂直居中时，可以将元素设置为单元格（display：table-cell），然后用vertical-align属性来居中。

布局元素：（块）<div>，没有语义，表示一个区块，目前div是主要的布局元素。（行内）<span>，没有语义，一般在网页中选中文字。

html5新增标签：
<header>：一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
<main>：表示网页的主体部分，一个页面只有一个main。
<footer>：作为其上层父级内容区块或是一个根区块的脚注。 footer通常包括其相关区块的脚注信息，如作者，相关阅读链接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。
<nav>：一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
<aside>：用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
<article>：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是文章，贴子，评论，插件等。
<section>：类似于<div>，可以替换。
<address>：用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
<figure>,<figcaption>：figure元素是一种元素的组合，带有可选标题， figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响， figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。 figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。
<details>,<summary>：details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。其属性open当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false。summary元素从属于details，用鼠标单击summary元素中的内容文字时， details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。

html5新增标签的兼容性：
在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（ display:inline） ,为了兼容性，需要：section, article, aside, footer, header, nav, hgroup { display:block; }。

表单：在网页中使用表单将本地的数据提交给远程的服务器，使用form标签来创建一个表单。

form属性，action指定表单要提交的服务器地址。

在表单中使用input标签设置内容，type为text文本框，如果数据要提交到服务器中，必须要为元素指定一个name属性值，type为password密码框，type为radio单选按钮（像这种选择框，必须要设置相同的name值，并且一定要指定一个value属性，value属性最终会作为用户填写的值，设置checked属性可以将单选按钮设置为默认选中），type为checkbox多选框（name设置一样）。下拉列表使用标签select/，里面用option/标签表示每一个选项，可以设置value值。