HTML学习笔记

最新推荐文章于 2022-07-08 20:45:26 发布

启明鑫

最新推荐文章于 2022-07-08 20:45:26 发布

阅读量1k

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/wqslqsllo/article/details/120761350

版权

一、HTML,超文本标记语言

1、前言

1.1 软件的架构

C/S，客户端/服务器

一般我们使用的软件都是C/S架构；
比如系统的中的软件QQ、360、office、XMind：
C表示客户端，用户通过客户端来使用软件；
S表示服务器，服务器负责处理软件的业务逻辑特点：
1. 软件使用前必须得安装；
2. 软件更新时，服务器和客户端得同时更新；
3. C/S架构的软件不能跨平台使用；
4. C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。

B/S，浏览器/服务器

B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端；
B/S架构软件通过使用浏览器访问网页的形式，来使用软件；
比如：京东淘宝 12306 知乎新浪微博；
特点：
1.软件不需要安装，直接使用浏览器访问指定的网址即可;
2.软件更新时，客户端不需要更新;
3.软件可以跨平台，只要系统中有浏览器，就可以使用;
4.B/S架构的软件，客户端和服务器之间通信采用的是通用的HTTP协议，相对来说不安全;

1.2 文档声明

		文档声明（doctype）
			- 文档声明用来告诉浏览器当前网页的版本
			- html5的文档声明
			<!doctype html>
			<!Doctype HTML>

1.3 进制

	进制：
		十进制（日常使用）
			- 特点：满10进1
			- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
			- 单位数字：10个 （0-9）
		
		二进制（计算机底层的进制）
			- 特点：满2进1
			- 计数：0 1 10 11 100 101 110 111
			- 单位数字：2个 （0-1）
			- 扩展：
				- 所有数据在计算机底层都会以二进制的形式保存
				- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
					这一个小格子在内存中被称为1位（bit）
					
					8bit = 1byte(字节)
					1024byte = 1kb(千字节)
					1024kb = 1mb(兆字节)
					1024mb = 1gb(吉字节)
					1024gb = 1tb(特字节)
					1024tp = 1pb
		
		八进制(很少用)
			- 特点：满8进1
			- 计数： 0 1 2 3 4 5 6 7 10 11 12 ... 17 20
			- 单位数字：8个 （0-7）
		
		十六进制(一般显示一个二进制数字时，都会转换为十六进制)
			- 特点：满16进1
			- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 ..
			- 单位数字：16个（0-f）

1.4 乱码问题

乱码出现的原因：
计算机是一个非常笨的机器，它只认识两个东西 0 1；
在计算机中保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容；
比如：中国，在计算机底层，可以能需要转换为 1010001001010101011010
在读取内容时，需要将二进制编码，在转换为正确的内容；
编码
依据一定的规则，将字符转换为二进制编码的过程；
解码
依据一定的规则，将二进制编码转换为字符的过程；
字符集(charset):
编码和解码所采用的规则，我们称为字符集
常见的字符集
ASCII
ISO-8859-1
GBK
GB2312
中文系统的默认编码
UTF-8
万国码，支持地球上所有的文字
ANSI
自动以系统的默认编码来保存文件
产生乱码的根本原因是，编码和解码采用的字符集不同
在中文系统的浏览器中，默认都是使用GB2312进行解码的

2、认识网页

2.1网页的结构

1.一个网页有三个部分组成:
结构
结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片
结构使用HTML来编写
表现
表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景。。。
使用CSS来设置页面中元素的样式
行为
页面和用户之间的交互行为
使用JavaScript来设置页面的行为
2.一个设计优良的网页要求结构、表现、行为三者分离;
3.在开发中总是要面临一个问题，就是程序之间的耦合，三者分离就是为了解耦合;

2.2注释

语法
注释不能嵌套
注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码；
也可以通过注释隐藏一些页面中不想显示的内容；

开发中一定要养成良好的编写注释的习惯，注释要求简单明了；

注释还可以将一些不希望显示的内容隐藏；

2.3 XHTML语法规范

HTML中不区分大小写，但是尽量使用小写；
HTML的注释不能嵌套：
标签必须结构完整；
要么成对出现；
要么自结束标签。
标签可以嵌套但是不能交叉嵌套；
属性必须有值，且值必须加引号，单引号双引号都可以。

3、常见浏览器

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。称为5大浏览器。

3.1 浏览器市场占有份额（了解）

查看网站地址：http://tongji.baidu.com/data/browser

3.2 浏览器内核（了解）

一个完整的浏览器包含浏览器内核和浏览器的外壳（shell）。浏览器内核又可以分为两部分：渲染引擎（Layout Engine或Rendering Engine）和JS引擎。由于JS引擎越来越独立，内核就倾向于只指渲染引擎。

（1）浏览器组成结构

浏览器一般由七个模块组成，User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI 后端）、Date Persistence（数据持久化存储）如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czN5ZcGq-1634184222069)(./图片/浏览器组成结构.png)]

用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分
浏览器引擎－可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心
渲染引擎－解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎
网络－用来完成网络调用或资源下载的模块
UI 后端－用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
JS解释器－用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore
数据存储－浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用

（2）主流浏览器内核

Trident(IE内核)

国内很多的双核浏览器其中之一就是Trident，美名其曰“兼容模式”。

代表：IE、傲游、世界之窗浏览器、Avant、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10发布后，IE将其内置浏览器命名为Edge（原名斯巴达），使用了新内核Edge引擎。
Gecko（Firefox）

Gecko的特点是代码完全公开，因此，全世界的程序员都可以为其编写代码，增加功能。可惜这几年已经没落了，比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手Chrome。
Webkit（Safari）

苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。是开源的。Google的Chrome也曾使用webkit作为内核。
Presto（Opera）

Presto是有Opera Software开发的浏览器排版引擎，它是世界公认最快渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了Presto。
Blink（Chrome）

有Google和Opera Software开发的浏览器排版引擎，2013年4月发布，现在Chrome内核是Blink。Blink其实是webkit的分支，大部分国产浏览器最新版都采用Blink内核。

了解一下：

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有Webkit、Blink、Trident、Gecko，其中苹果iOS平台主要是Webkit，Android4.4之前Android系统浏览器的内核是Webkit，Android4.4之后使用Blink，Windows Phone 8系统浏览器内核是Trident。

3.3 IE低版本浏览器兼容HTML5

最新版的Safari、Chrome、Firefox以及Opera都支持HTML5，Internet Explorer 9将支持HTML5的特性。IE9以下版本浏览器兼容不HTML5，需要使用静态资源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后，初始化新标签的CSS：

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

4、Web标准

浏览器的内核不统一，那么其工作原理、解析肯定不同，显示就会有差别。

http://www.baike.com/wiki/WEB%E6%A0%87%E5%87%86

4.1 Web标准的好处

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

4.2 Web标准构成

Web标准不是某一个标准，是由W3C和其他标准化组织指定的一系列标准的集合，主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。

样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript。

理想状态我们的源码：.html .css .js

《总结》

第一点：我们的代码是放到浏览器上做渲染的，浏览器的内核要重视

第二点：学习的标准，分三个方面–结构html、样式css、行为JS

5、HTML初识

一般先学习html，后学css

HTML：超文本标记语言（英语：Hyper Text Markup Language，）是一种用于创建网页的标准标记语言。主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

<strong>我是加粗的文本</strong>

5.1 HTML骨架格式

HTML有自己的语言语法骨架格式：

<!DOCTYPE html>
<html>
  <head>
      <title></title>
  </head>
  <body>
    
  </body>
</html>

<!--
html标签：所有html中标签的一个根节点
head标签：用于存放title、meta、base、style、script、link，注意必须设置title标签
title标签：让页面拥有一个属于自己的标题
body标签：页面的主体部分，用于存放所有的html标签：a、p、h、div、span、img...
-->

案例：书写自己的第一个HTML页面

新建一个名为demo的txt文件
里面写入html骨架
把文件的后缀名改为.html
右击，谷歌浏览器打开

5.2 HTML标签分类

在HTML页面中，带有“<>”符号的元素被称为HTML标签，如<html>、<body>都是HTML标签。

双标签

语法：<标签名>内容</标签名>

语法中“<标签名>”表示该标签的作用开始，一般称为开始标签（start tab），“</标签名>”表示该标签的作用结束，一般称为结束标签。如下：
```
<div>我是div</div>
```
单标签

语法：<标签名 />

单标签也称为空标签，是指用一个标签符号即可完整的描述某个功能的标签。如下：
```
<br />--> <br>
<hr />
<img alt=""  src="路径"   />
```

5.3 HTML标签关系

标签的相互关系就分为两种：

嵌套关系：父子关系

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

并列关系：兄弟关系
```
	<head></head>
	<body></body>
```

后代关系

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>
<!--html标签和title标签之间就属于后代，title也是head的后代；
	后代关系：包含父子关系，包含儿子的儿子-->

测试题：C

请问下列哪个标签是错误的？
A <head></head><body></body>
B <strong><div></div></strong>
C <head><title></head></title>
D <body><div></div></body>

6、开发工具

开发工具很多，你认识几个？

常见的开发工具有：Dreamweaver、SublimeText、WebStorm、Hbuilder、Visual Studio Code ……

常用的快捷键

- 输入html:5或者！，按Tab或Ctrl+E键，用于补全文档结构
- 输入a，按Tab或Ctrl+E键，用于补全a标签，其他标签类似
- 多个重复对象，用*，如li*3 按Tab ，ul>li*3
- Shift+右键+向下滑动，同时选中多行元素中的某个位置
- Ctrl+L 选中当前行
- Ctrl+shift+D 在行内向下复制行，选中单词表示复制单词
- Ctrl+X 删除当前行
- Ctrl+/ 注释
- Ctrl+E 补全

7、文档类型

这句话就是告诉我们使用哪一个html版本。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，必须在文档开头使用标签为所有的HTML文档指定版本和类型，只有这样浏览器才能按指定的文档类型解析。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

8、实体

在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法
&实体名;
常用的实体：

          &nbsp; 空格
            &gt; 大于号
            &lt; 小于号
            &copy; 版权符号

9、HTML常用标签

9.1 meta标签

    meta主要用于设置网页中的一些元数据，元数据不是给用户看
        charset 指定网页的字符集
        name 指定的数据的名称
        content 指定的数据的内容
        keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开；
              <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
              <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon"> 
            description 用于指定网站的描述
               <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
                网站的描述会显示在搜索引擎的搜索的结果中
            title标签的内容会作为搜索结果的超链接上的文字显示 
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 
        将页面重定向到另一个网站

9.2 元素类型

    块元素（block element）
        - 在网页中一般通过块元素来对页面进行布局
    行内元素（inline element）
        - 行内元素主要用来包裹文字

        - 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
        - 块元素中基本上什么都能放
        - p元素中不能放任何的块元素

    浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
        比如：
            标签写在了根元素的外部
            p元素中嵌套了块元素
            根元素中出现了除head和body以外的子元素
            ... ...

9.3 标题标签

单词缩写：head 头部，标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标签，即：h1、h2、h3、h4、h5、h6
一般情况下标题标签只会使用到h1_h3，h4h6很少用
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
标题标签语义：作为标题使用，并且依据重要性递减，基本语法格式如下：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!--需要注意的是：h1标签因为重要，尽量少用。一般h1都是给logo使用-->

快捷键：h $KaTeX parse error: Expected '}', got 'EOF' at end of input: {标题$ }*6

9.4 布局标签（结构化语义标签）

    header 表示网页的头部
    main 表示网页的主体部分(一个页面中只会有一个main)
    footer 表示网页的底部
    nav 表示网页中的导航
    aside 和主体相关的其他内容（侧边栏）
    article 表示一个独立的文章
    section 表示一个独立的区块，上边的标签都不能表示时使用section

    div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
    span 行内元素，没有任何的语义，一般用于在网页中选中文字

9.5 列表标签

把一系列的文字及数据制成表，以表显示。容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点是整齐、整洁、有序。

列表（list）
1、铅笔
2、尺子
3、橡皮

在html中也可以创建列表，html列表一共有三种：
1、有序列表
有序列表即为排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法如下：

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

所有特性与 ul 基本一致，但实际开发中，较少使用 ol。

1、有序列表也有自己的序号类型-属性type，默认是1，可选值有a、A、i、I。

2、无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

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

在<ul>标签中只能使用<li>标签,不要使用<p>标签之类的。但在<li>标签内可以嵌套其他标签使用。

1、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2、<li></li>相当于一个容器，可以容纳所有元素。

在ul或li中都可以加type属性，默认值为disc, 其它值还有circle、square…

3、定义列表

定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明

列表之间可以互相嵌套

9.6 水平线标签

单词缩写： horizontal 横线，水平线

在网页中会经常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成。hr 就是创建横跨网页水平线的标记。基本语法格式如下：

<hr />

9.7 换行标签

单词缩写：break 打断，换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端才会自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。语法格式如下：

<br />

9.8 a,超链接标签

单词缩写： anchor 锚，铁锚

语法

在HTML中创建超链接非常简单，只需要用标签将链接对象环绕即可。

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

呈现

不会换行, 会有一些默认的颜色下划线.

target:

target：跳转在新窗口还是自己当前窗口打开
_self：当前窗口打开默认值
_blank：新窗口打开

href：值的类型有多种

外部链接网络路径

    <a href="https://www.showstart.com" target="_blank">秀动</a>
    <a href="https://www.baidu.com">百度</a>

内部链接

相对路径或绝对路径

<a href="./01-复习.html">复习1</a>
<a href="01-复习.html">复习2</a>
<a href="E:\就业班\H210401_Html+Css\03.code\day02\01-复习.html">复习3</a>

空链接

<!-- “”空链接,  刷新页面, 在页面出现滚动条的时候会滚动到页面顶部 -->
<a href="">空链接1</a>
<!--  #空链接, 不刷新页面, 在页面出现滚动条的时候会滚动到页面顶部 -->
<a href="#">空链接2</a>
<!-- 伪空链接, 不刷新页面, 在页面出现滚动条的时候不会滚动到页面顶部，一句话，什么都没有发生 -->
<a href="Javascript:;">空链接3</a>

下载

<a href="./package.zip">下载zip文件</a>

播放多煤体

问题，怎样下载jpg和mp4或mp3文件。

<a href="./xx.jpg">显示图片</a>
<a href="./01-编辑器的使用.mp4">播放视频</a>

显示文本

<a href="./BFC.md">显示文本</a>
<a href="./BFC.txt">显示文本</a>

使用mailto在网页中链接Email地址。

    超链接可以让我们从一个页面跳转到其他页面，
        或者是当前页面的其他的位置

    使用 a 标签来定义超链接
        属性：
            href 指定跳转的目标路径
                - 值可以是一个外部网站的地址
                - 也可以写一个内部页面的地址

    超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素  
            target属性，用来指定超链接打开的位置
            可选值：
                _self 默认值 在当前页面中打开超链接
                _blank 在一个新的要么中打开超链接
    在开发中可以将#作为超链接的路径的展位符使用：点击后跳至页面顶部
    可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生
    
    可以直接将超链接的href属性设置为#，这样点击超链接以后
    页面不会发生跳转，而是转到当前页面的顶部的位置
    可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

        id属性（唯一不重复的）
            - 每一个标签都可以添加一个id属性
            - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

9.9 文本格式化标签

标签	显示效果
<b></b> <strong></strong>	文字以粗体方式显示（XHTML之后推荐使用strong）
<i></i> <em></em>	文字以斜体方式显示（XHTML之后推荐使用em）
<s></s> <del></del>	文字以加删除线方式显示（XHTML之后推荐使用del）
<u></u> <ins></ins>	文字以加下划线方式显示（XHTML之后不赞成使用u）

b i s u没有强调的意思，strong、em、del、ins语义更强烈，有强调的意思

补充：bold 简写 b，italic 简写 i，emphasize 简写 em，strike 简写 s，underline 简写 u，inserted 简写 ins

9.10 标签属性

使用HTML制作网页时，如果想让HTMl标签提供更多的信息，可以使用HTML标签的属性加以设置。基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

标签可以拥有多个属性，必须写在开始标签中，位于标签名之后。
属性之间不分先后顺序，标签名与属性1、属性2与属性3之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。

常用全局属性：

1. id 属性：用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复 id，一般配合 css 和 js 来选择元素；
2. class 属性：用于指定元素的类别名称，可以使用 class 元素给同一个文档中的多个元素进行归类，css 可以通过 class 给同一个类的元素设置样式；
3. stlye 属性：用于给元素设定样式（内联样式或内部样式）；
4. title 属性：用于显示省略的内容（或补充、提示说明内容），当光标移动到元素内容上时显示title里面的内容；
5. dir 属性：用于设定元素标签内容的文字方向，比如 div 元素的属性、p 元素的属性，可选值 ltr 和 rtl。

9.11 图像标签

单词缩写：image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。语法格式如下：

<img src="图像url"/>
<!--img--image src--source属性用于指定图像文件的路径和文件名，是必须的属性，可插入图片格式 JPG、Gif、PNG8、PNG24、webp、bmp -->

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持百分比）	设置图像的宽度
height	像素（XHTML不支持百分比）	设置图像的高度
border	数字	设置图像边框的宽度

图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

        alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
            搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

        width 图片的宽度 (单位是像素)
        height 图片的高度    
            - 宽度和高度中如果只修改了一个，则另一个会等比例缩放

        注意：
            一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
            但是在移动端，经常需要对图片进行缩放（大图缩小）


    图片的格式：
        jpeg(jpg)
            - 支持的颜色比较丰富，不支持透明效果，不支持动图
            - 一般用来显示照片
        gif
            - 支持的颜色比较少，支持简单透明，支持动图
            - 颜色单一的图片，动图
        png
            - 支持的颜色丰富，支持复杂透明，不支持动图
            - 颜色丰富，复杂透明图片（专为网页而生）
        webp
            - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
            - 它具备其他图片格式的所有优点，而且文件还特别的小
            - 缺点：兼容性不好

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

        效果一样，用小的
        效果不一样，用效果好的

9.12 内联框架

<!-- 
    内联框架，用于向当前页面中引入一个其他页面
        src 指定要引入的网页的路径
        frameborder 指定内联框架的边框

 -->                                                                <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

9.13 锚点定位

通过创建锚点链接，用户能够快速定位到目标内容,

创建锚点的方式有两种

通过id创建锚点
通过a的name创建锚点

(1)通过id创建锚点

1、在跳转目标的位置添加id名标注
2、使用<a href="#id名">链接文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>=锚点定位</title>
	<style type="text/css">
		div {
			border: 1px solid red;
			height: 800px;
		}
	</style>
</head>
<body>
	<div>
		<a href="#id1">早年经历</a>
		<a href="#id2">演艺生涯</a>
		<a href="#id3">作品介绍</a>
	</div>
    <div>
		<h2 id="id1">早年经历</h2>
		<a href="#">TOP</a>
	</div>
	<div>
		<h2 id="id2">演艺生涯</h2>
		<a href="#">回到顶部</a>
	</div>
	<div>
		<h2 id="id3">作品介绍</h2>
		<a href="#">回到顶部</a>
	</div>
</body>
</html>

(2)通过a的name创建锚点

1、在跳转目标的位置前面添加<a name='name名'></a>
2、使用<a href="#name名">链接文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>=锚点定位</title>
	<style type="text/css">
		div {
			border: 1px solid red;
			height: 800px;
		}
	</style>
</head>
<body>
	<div>
		<a name="begin"></a>
		<a href="#id1">早年经历1</a>
		<a href="#id2">演艺生涯1</a>
		<a href="#id3">作品介绍1</a>
	</div>
    <div>
		<a name="id1"></a>
		<h2>早年经历</h2>
		<a href="#begin">回到顶部</a>
	</div>
	<div>
		<a name="id2"></a>
		<h2>演艺生涯</h2>
		<a href="#begin">回到顶部</a>
	</div>
	<div>
		<a name="id3"></a>
		<h2>作品介绍</h2>
		<a href="#begin">回到顶部</a>
	</div>
</body>
</html>

9.14 base标签(了解)

base href，由base制定了一个URL地址，接下来你所要调用的文件或图片等就无须再填写完整的地址，只需写上该文件名或图片名即可。通过下方代码来简单的认识一下base标签的用法，链接到HTML标签的博客，完整地址为：http://blog.sina.com.cn/htmlcss3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<base href="http://blog.sina.com.cn" target="_blank"/>
	</head>
	<body>
		<a href="htmlcss3">链接到HTML标签的博客</a>
	</body>
</html>

base target，可以设置整体链接打开的状态是以新窗口打开还是在当前窗口中打开。如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<base target="_blank" />
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.sina.com">新浪</a>
		<a href="http://www.sohu.com">搜狐</a>
		<a href="http://www.163.com">网易</a>
	</body>
</html>

target属性是网页窗口的打开方式，在base标签中设置该属性，那么页面中所有的链接都将遵循这个方式来打开网页，分别有如下几种选择：

1、 _blank：在新窗口打开链接页面。
2、 _parent:在上一级窗口中打开链接。
3、 _self： 在当前窗口打开链接,此为默认值，可以省略。
4、 _top： 在浏览器的整个窗口打开链接，忽略任何框架。

10、路径

10.1 相对路径

10.2 绝对路径

11、音视频标签

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

    属性：
        controls 是否允许用户控制播放
        autoplay 音频文件是否自动播放
            - 如果设置了autoplay 则音乐在打开页面时会自动播放
                但是目前来讲大部分浏览器都不会自动对音乐进行播放 
        loop 音乐是否循环播放

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

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

使用video标签来向网页中引入一个视频

使用方式和audio基本上是一样的

<video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="video/mp4">
</video>

还可以用内联框架直接定义一个视频网址

12、表格table

在现实生活中，我们经常需要使用表格来表示一些格式化数据：
课程表、人名单、成绩单…

    同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格

表格是较为常用的一种标签，但不是用来布局，而是处理、显示表格式数据。

12.1 表格基础

table嵌套tr, tr嵌套th或td

tr只能嵌套th或td, 而th或td能嵌套任意元素

tr表示行，th或td表示列

th与td的区别是td中的文字是粗体并且文字上下左右居中，而td是一般体，并只上下居中

<table border='1'>
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
		</tr>
		<tr>
		    <td>1</td>
		    <td>鬼吹灯</td>
		    <td>23</td>
		    <td>2332</td>
		</tr>
		<tr>
		    <td>2</td>
		    <td>盗墓笔记</td>
		    <td>2333</td>
		    <td>1233</td>
		</tr>
		<tr>
		    <td>3</td>
		    <td>西游记</td>
		    <td>233</td>
		    <td>23333</td>
		</tr>
	</table>

12.2 表格属性

		rowspan 纵向的合并单元格
		colspan 横向的合并单元格
		table属性
			align='center' 
				table在父元素中水平对齐方式(left center right)
			width='800'
			height='400'
				table的宽高,单位为数字或百分比。
				如果用数字加尺寸单位会发现单位无效，总会以px为单位
			bgcolor="pink" 
				table背景色
			border='1'
				当值为1时，所有格式的边框都为1px
				当值为5时，table边框为5px，但是其它格式边框还是1px
				当值小于1时无效，当值大于1时，与值为5的表现相同
				值如果用数字加尺寸单位会发现单位无效，总会以px为单位
			bordercolor="green" 
				边框颜色
			cellspacing='0'
				th或td的外边距
			cellpadding='10'
				td或td的内边距
		tr属性
			align=center
				内部元素相对于th或td水平对齐方式(left center right)
			valign=center
				内部元素相对于th或td垂直对齐方式(top center bottom)
			bgcolor="#FF0000"
				tr背景色
			width:无效
			height:
				有效，tr的高度
				table的宽高,单位为数字或百分比
				如果用数字加尺寸单位会发现单位无效，总会以px为单位
				如果使用百分比，
					则以table为基准，打比table为400px,则th或td中的height="50%"就为200px,
					但是在实计测试中发现一个现象，当table的height太小时，th或td
					中的height='50%'根本达不到50%的显示高度
		th、td属性
			width:
				设置一个后，同列其它cell也会变成相同的宽度,
				当table中设置了width时，th和td中设置的width不能撑大table的宽度
				单位为数字或百分比
				如果用数字加尺寸单位会发现单位无效，总会以px为单位
			height:
				有效，表示th或td所在的tr的高度
				table的宽高,单位为数字或百分比
				如果用数字加尺寸单位会发现单位无效，总会以px为单位
				如果使用百分比，
					则以table为基准，打比table为400px,则th或td中的height="50%"就为200px,
					但是在实计测试中发现一个现象，当table的height太小时，th或td中的height='50%'根本达不到50%的显示高度
			align=center
				内部元素相对于th或td水平对齐方式(left center right)
			valign=center
				内部元素相对于th或td垂直对齐方式(top middle bottom)
			bgcolor="#FF0000"
				th、td背景色

        /* border-spacing: 指定边框之间的距离 */
        /* border-spacing: 0px; */这种方法边框为2倍粗
        /* border-collapse: collapse; 设置边框的合并 */
       /* 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改*/
       如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

12.3 表格标题

表格的标题使用**<caption>** 标签来定义，必须直接定义在<table>标签之后，并且每个表格只能定义一个标题。通常这个标题会被居中于表格之上。

用法：

<table border="1px" cellspacing="0" bordercolor="green">
		<caption    style="border:2px solid green; background: skyblue;">标题</caption>
		<tr>
					<th>Month</th>
					<th>Savings</th>
		</tr>
		<tr>
					<td>January</td>
					<td>$100</td>
		</tr>
</table>

12.4 合并单元格

跨行合并：rowspan （row span）

跨列合并：colspan （column span）

浅灰色：lightgray，浅蓝色lightblue

背景色：bgcolor

12.5 thead、tbody、tfoot

    可以将一个表格分成三个部分：
        头部 thead
        主体 tbody
        底部 tfoot

        th 表示头部的单元格

把行装到thead、tbody、tfoot里面去，

thead、tbody、tfoot有align和bgcolor两个属性

13、表单标签

    表单：
        - 在现实生活中表单用于提交数据
        - 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
        - 使用form标签来创建一个表单

目的是为了收集用户信息。

在网页中，我们也需要与用户进行交互，收集用户资料，此时也需要表单。

HTML中，一个完整的表单由表单控件（也称表单元素）、提示信息和表单域三个部分组成。

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

    form的属性
        action 表单要提交的服务器的地址

13.1 input控件

<input />标签为单标签，type属性是其最基本的属性，取值有很多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义其他的属性，如下表所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V2O6GjXb-1634184222074)(./img/input控件.png)]

(1)文本域

文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
</form>

注意：数据要提交到服务器中，必须要为元素指定一个name属性值

（2）密码字段

密码字段通过标签<input type=“password”> 来定义:

<form>
	Password: <input type="password" name="pwd">
</form>

注意：密码字段字符不会明文显示，而是以星号或圆点替代。

（3）单选按钮

单选按钮
- 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中

<input type=“radio”> 标签定义了表单单选框选项，通过同一个name值定义同一个组

<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>

(4)复选框

<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

(5)普通按钮

通过<input type=“button”>来定义

<form>
	<input type="button" value="点我">
</form>

(6)提交按钮

<input type=“submit”> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form>
	Username: <input type="text" name="user"><br />
			 <input type="submit" value="提交">
</form>

(7)重置按钮

<input type=“reset”> 定义了重置按钮.重置指的是重置到表单初始状态。

<br>
<form>
    Username: <input type="text" name="user"><br />
    		 <input type="reset" value="重置">
</form>

(8)图像按钮

<input type=“image”> 定义了图像按钮，表示按钮可以用图片来显示，用src指定图片的路径，用height/width定义宽高

<form>
    <input type="image" src="logo.png" height="10px" width="10px">
</form>

(9)文件域

<input type=“file”> 定义了文件域，点击按钮可以选择上传的文件

<form>
    <input type="file">
</form>

13.2 label标签

<label> 标签为 input 元素定义标注（标记）。

作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。

如何绑定？ <label> 标签的 for 属性用于绑定表单元素，只需要指定for属性的值与被绑定表单元素的id值相同即可。

<label for="idName">名 字：</label>
<input type="text" id="idName"><br>

<!-- 
1.用label直接包裹input，就可以实现
2.如果label里面有多个表单元素，想定位到某个元素，可以通过for  id的格式来操作
-->

案例：百度账号注册页面

13.3 textarea控件（文本域）

如果需要输入大量的文本信息，就需要使用<textarea></textarea>标签。通过textarea控件可以轻松的创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数"></textarea>
<!-- 
cols:文本域可容纳文本列数，可限定文本框长度
rows:文本域可容纳文本行数，可限定文本框宽度 -->

13.4 下拉菜单

使用select控件定义下拉菜单，基本语法格式如下：

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

<!-- 
	1、select标签中至少应包含一堆option标签
	2、在option标签中加入selected="selected"属性时，表示当前项为默认选中项
    3、select的 size 属性可指定显示范围
-->

13.5 表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中所有内容都会被提交给服务器。基本语法格式如下：

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

常用属性：

1.action

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

2.method

用于设置表单数据的提交方式，取值为get与post。

get：数据大小受限，不安全

post：数据大小不受限制，相对比较安全

3.name

用于指定表单的名称，以区分同一个页面上的多个表单。

注意：每个表单都应该有自己的表单域。

13.5 补充

autocomplete=“off” 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点

    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>

用普通按钮可以实现很多功能，指定另外的属性。

启明鑫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

一、HTML,超文本标记语言1、前言1.1 软件的架构C/S，客户端/服务器一般我们使用的软件都是C/S架构；比如系统的中的软件QQ、360、office、XMind：C表示客户端，用户通过客户端来使用软件；S表示服务器，服务器负责处理软件的业务逻辑特点：软件使用前必须得安装；软件更新时，服务器和客户端得同时更新；C/S架构的软件不能跨平台使用；C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。B/S，浏览器/服务器B/S本质上也是C/S，只不过B/
复制链接

扫一扫