HTML

小鱿鱼G

已于 2022-01-20 19:38:45 修改

阅读量1k

点赞数

分类专栏： Web前端开发文章标签： html

于 2021-04-10 18:03:21 首次发布

本文链接：https://blog.csdn.net/weixin_53280964/article/details/115581408

版权

Web前端开发专栏收录该内容

6 篇文章 2 订阅

订阅专栏

一.网页的相关概念

1.网站：指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合

2.网页：是网站中的一页”,通是HTML格式的文件,它要通过浏览器来阅读

3.网页是构成网站的基本元素,它通常由图片、链接，文字、声音，视频等元素组成。通常我们看的网页,常见以.htm或.html后结尾的文件,因此将其俗称为HTML文件

4.HTML指的是超文本标记语言，是用来描述网页的一种语言（不是一种编程语言，是一种标记语言（是一套标记标签））

★超文本的两层含义

☝它可以加入图片,声音、动画,多媒体等内容(超越了文本限制)

☝它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本）

5.网页的形成：网页是由网页元素组成，这些元素利用html标签描述出来，然后通过浏览器解析来显示给用户的

二.常用的浏览器

1.常用浏览器

浏览器是网页显示,运行的平台,常用的浏览器有IE,火狐( Firefox),谷歌(Chrome）,Safari和Opera等,平时称为五大浏览器

2.浏览器内核

浏览器内核（渲染引擎）:负责读取网内容,整理讯息，计算网页的显示方式并显示页面

目前国内一般浏览器都会采用 Webkit/Blink内核,如360,UC,QQ,搜狗等

三.Web标准（重点）

☆定义：Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合,W3C(万维网联盟）是国际最著名的标准化组织

☆Web标准的优点：

1.可以让不同的开发人员写出的页面更标准，更统一

2.让Web的发展前景更广阔

3.内容能被更广泛的设备访问

4.更容易被搜寻引擎搜索

5.降低网站流量费用

6.使网站更易于维护

7.提高页面浏览速度

☆Web标准的构成

主要包括结构，表现和行为三个方面

Web标准提出的最佳体验方案：结构，样式，行为相分离

四.HTML标签——语法规范

1.HML标签是由尖括号包围的关键词,例如<html>

2.HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中的第一个标签是

开始标签,第二个标签是结束标签。

3.有些特殊的标签必须是单个标签(极少情况),如<br />我们称为单标签。

4.标签关系：包含关系和并列关系

包含关系

<head>
      <title> </title>
</head>

并列关系

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

五.HTML标签——基本结构标签

1.第一个HTML

每个网页都会有一个基本的结构标签（也称为骨架标签）,页面内容也是在这些基本标签上书写

六.HTML标签——开发工具

☆VSCode的使用

1.双击打开软件

2.新建文件(Ctr+N)

3.保存(Ctr+S},注意移动要保存为html文件

4.ctrl+加号键,Ctrl+减号键可以放大缩小视图

5.生成页面骨架结构输入!按下Tab键

6.利用插件在浏览器中浏览页面：单击鼠标右键，在弹出出口中点击“Open In Default Browser”

七.DOCTYPE和lang及字符集的作用

1.文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>

这句代码的意思：当前页面采取的是HTML5版本来显示网页

注意：

☝<!DOCTYPE>声明位于文档中最前面的位置,处于< html>标签之前

☝<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

2 .lang 语言种类

作用：用来显示当前文档显示的语言。

<html lang="zh-CN"> 
<html lang="en"></html>
 </html>

en 定义语言为英文。

zh-CN 定义语言为中文。

这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。

3.字符集

<meta charset="UTF-8" />

这句代码不写易引起乱码情况

☝字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。

☝在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。

☝charset常用的值有：GB2312（简体中文）,BIG5（繁体中文）,GBK（两者均含有）、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

★标签语义

1.标签语义就是标签的含义。

2.根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。

★标题标签h1-h6（重要）

为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。

<h1>标题标签</h1> 
<h1>标题一共六级选,</h1> 
<h2>文字加粗一行显。</h2> 
<h3>由大到小依次减，</h3> 
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5> 
<h6>具体效果刷新见。</h6>

★段落标签

1.p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。

<p>我是一个段落标签</p >

2.标签语义: 把 HTML 文档分割为若干段落。

3.特点：

1)文本在一个段落中会根据浏览器窗口的大小自动换行。

2)段落和段落之间保有空隙。

★换行标签

1.<br/> 是 break 缩写，意为打断、换行。

2.标签语义：强制换行

3.特点：

1）<br/> 是个单标签。

2）<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

★文本格式化标签

1.在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。

2.标签语义：突出重要性，比普通文字重要。

★ div 和 span 标签

1.<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

2.div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。

3.特点：

☝div 标签用来布局，但是现在一行只能放一个 div，大盒子。

☝span 标签用来布局，一行可以多个 span，小盒子。

★图像标签

1.在 HTML 标签中，< img /> 标签用于定义 HTML 标签页面中的图像。

< img src="图像url" />

单词 image 的缩写，意为图像。

2.src 是标签的必须属性，用于指定图像文件的路径和文件名。

3.属性：属于这个图像标签的特性。

4.图像标签的其他属性:

5.图像标签的属性注意点

☝图像标签可以拥有多个属性，必须写在标签名的后面

☝属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格隔开

☝属性采取键对值的格式，即key= "value"的格式，属性=“属性值”

★路径

目录文件夹:就是普通的文件夹,里面只不过存放了我们的做页面所需要的相关素材,如html文件，图片等

2.VSCode打开目录文件夹

文件——打开文件夹，选择目录文件夹，后期方便管理文件

3.分类：

☝相对路径

☝绝对路径

4.相对路径

1）相对路径：以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

2）

5.绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

★音频标签

1.场景：在页面中插入音频

2.代码

<audio src = "音频路径" controls> </audio>

3.常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

4.注意：音频目前支持三种格式：MP3，wav,Ogg

★视频标签

1.场景：在页面中插入视频

2.代码

<video src = "视频路径" controls> </video>

3.常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

4.注意：视频目前支持三种格式：MP4，webm,Ogg

★超链接标签

在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。

1 .链接的语法格式

a 是单词 anchor 的简写，是锚的意思。

< a href=" " target="目标窗口的弹出方式">文本或图像</ a>

2.属性

3.分类

☝外部链接

☝内部链接：网站内部页面之间的相互链接。

☝空链接: #

☝下载链接：地址链接的是文件.exe、压缩包.zip 等。

☝网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。

☝锚点链接：点击链接，可以快速定位到页面中的某个位置。

① 在链接文本的href属性中，设置属性为 #名字的形式

② 找到目标位置标签，里面添加一个 id 属性 = 名字

★HTML中的注释和特殊字符号

1.注释:

VSCode 中快捷键：Ctrk + /

2.字符实体

1.表格标签

1.1.表格的主要作用

表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。
表格不是用来布局页面的，而是用来展示数据的。

1.2.表格的基本用法

<table>
   <tr>
     <td>单元格内的文字</td>
     ...
   </tr>
...
</table>

1.<table></table> 用于定义表格的标签。
2.<tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
3.<td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
4.字母 td 指表格数据（table data），即单元格的内容。

1.3表头单元格标签

一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容加粗显示。
<th> 标签表示 HTML 表格的表头部分（table head 的缩写）

<table>
   <tr>
       <th>姓名</th>
       ...
   </tr>
   ...
</table>

表头单元格(<th>)也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1.4表格属性

只作了解，后期通过 CSS 来设置。
这些属性都要写到 <table></table> 标签中

1.5表格结构标签

场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。

2.加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。

3.注意：☝<thead></thead>：定义表格头部，且内部必须有<tr>标签。
☝ <tbody></tbody>：定义表格主体，存放数据。
☝ 以上标签都放在 <table></table> 里面。

1.6合并单元格

1.合并单元格方式

▶跨行合并：rowspan=“合并单元格个数”
▶跨列合并：colspan=“合并单元格个数”

2.目标单元格：（写合并代码）

▶跨行:最上侧单元格为目标单元格，写合并代码

▶跨列：最左侧单元格为目标单元格，写合并代码

3.合并单元格三部曲

<1>.确定跨行 or 跨列。

<2>.找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。<td colspan="2"></td>

<3>.删除多余单元格。

2.列表标签

表格展示数据，列表则用来布局。
列表特点是整齐、整洁、有序，作为布局更方便自由。
根据使用场景不同，列表分为三大类：

1）无序列表
2）有序列表
3）自定义列表

2.1无序列表

1.<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。而列表项使用<li>标签定义

2.语法格式

<ul>
  <li>列表项1 </li>
  <li>列表项2 </li>
  <li>列表项3 </li>
  ...
</ul>

3.注意

☝各个列表项之间无顺序之分，并列关系。
☝<ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。

☝ <li></li>之间相当于一个容器，可容纳所有元素
☝无序列表带有自己的属性，可用 CSS 修改样式属性。

2.2有序列表

使用 <ol> 标签来定义有序列表，<li> 来定义列表项。


<ol>
  <li>列表项1 </li>
  <li>列表项2 </li>
  <li>列表项3 </li>
  ...
</ol>

3.注意

☝<ol></ol>中只能包含<li></li>，写入其他标签或文字是不允许的。

☝ <li></li>之间相当于一个容器，可容纳所有元素
☝无序列表带有自己的属性，可用 CSS 修改样式属性。

2.3自定义列表

1.<dl> 定义描述列表，与 <dt>(定义项目和名字）和 <dd>（描述每一个项目的名字）标签配合使用。

2.基本语法

<dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>

3.注意

☝<dl></dl>里面只能包含<dt>和<dd>

☝<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

3.表单标签

3.1 为什么需要表单

收集用户信息。
和用户进行交互，收集用户资料。

3.2 表单组成

▶表单域
▶表单控件（元素）

▶提示信息

3.3 表单域

1.定义：表单域是一个包含表单元素的区域。
2.使用 <form> 标签用于定义表单域，收集和传递用户信息。

<form>标签会将它范围内的表单元素信息提交给服务器。

目前而言，暂时不需要用表单域提交数据，只需要写上 form 标签即可。

3.语法格式

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

4.常用属性

5.注意

♛写表单元素之前需要有表单域将其包含。
♛表单域是 form 标签。

3.4 表单控件（表单元素）

在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。

3.4.1 <input> 输入表单元素

<input> 标签用于收集用户信息。

input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等

<input type="属性值"/>

☆input 标签为单标签
☆type 属性设置不同属性值来指定不同控件类型

☝type 常用属性值

☝input的其他属性

<form action="xxx.php"method="get">
<!--text 文本框 用户可以里面输入任何文字-->
用户名:<input type="text" name="username"value="请输入用户名"maxlength="6">  <br/>
<!--possword 密码框 用户看不见输入的密码-->
密码：<input type="possword"name="pwd">  <br/>
<!--radio 单选按钮，可以实现多选一-->
<!--name 是表单元素，名字这里性别单选按钮必须有相同的名字name才可以实现多选一-->
<!--单选按钮和复选框可以设置checked的属性，当页面打开时就可以默认选中这个按钮-->
性别：男<input type="radio"name="sex"value="男">女<input type="radio"name="sex"value="女
"> <br/>
<!--checkbox 复选框 可以实现多选-->
爱好:吃饭<input type="checkbox"name="hobby"value="吃饭">睡觉<input type="checkbox"name="hobby"value="睡觉">  <br/>
<!--点击了提示按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器-->
<input type="submit"value="免费注册">
<!--重置按钮可以还原表单元素初始的默认状态-->
<input type="reset"value="重新填写">
<!--普通按钮 button-->
<input type="button"value="获取短信验证码"><br/>
<!--文件域 使用场景上传文件使用-->
上传头像：<input type="file">
</form>

☆注意

1.对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。同理，复选框也要有相同的name值。
2.单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
3.设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
4.设置 type="button"，普通按钮，后期结合 js 使用

卐name属性区分不同的表单元素

用户名：<input type="text" value="请输入用户名"name="username"/>

☋name属性后面的值，是自定义的

☋radio(或者checkbox)如果是一组，必须命名相同的名字

<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女

☋check属性：表示默认选中状态，用于单选按钮和复选按钮

性  别：
<input type="radio"name="sex"value="男"checked="checked"/>男
<input type="radio"name="sex"value="女"/>女

☋type属性：可让input表单元素设置不同形态

#单选按钮
<input type="radio"name="sex"value="男"checked="checked"/>男
#文本框
<input type="test"value="请输入用户名">

3.4.2 label 标签

1.<label> 标签为 input 元素定义标注。
2.<label> 标签用于绑定一个表单元素，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。
3.语法：

<lable for="sex">女</lable>
<input type="radio" name="sex"id=="sex"/>

4.核心：
<lable>标签的 for 属性与相关元素的 id 属性相同。

3.4.3 <select> 下拉表单元素

1.<select> 标签设置多个选项让用户选择，节约页面空间。

2.语法

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

3.注意

▷select 中至少包含一对 option。

▷在 option 中定义属性selected=selected，当前项即为默认选项。

3.4.4< textarea> 文本域表单元素

1.场景：输入内容较多时。

2.语法

<textarea rows="3" cols="20">
    文本内容
</textarea>

3.注意

♡cols=“每行字符数”，rows=“显示的行数”

四.pre标签和code标签

定义和用法

<pre>标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如<a>标签）放到 <pre>块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可

<code>标签

code标签的应用，应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code>标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能，将来浏览器可能会根据自己的实际情况添加效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
code标签和pre标签可以嵌套使用，如下

<pre> 
    <code>
    </code>
</pre>

五.语义化标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

小鱿鱼G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML

一.网页的相关概念1.网站：指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合2.网页：是网站中的一页”,通是HTML格式的文件,它要通过浏览器来阅读3.网页是构成网站的基本元素,它通常由图片、链接，文字、声音，视频等元素组成。通常我们看的网页,常见以.htm或.html后结尾的文件,因此将其俗称为HTML文件4.HTML指的是超文本标记语言，是用来描述网页的一种语言（不是一种编程语言，是一种标记语言（是一套标记标签））★超文本的两层含义☝它可以加入图片,
复制链接

扫一扫