HTML

时间 2021-08-12

标签 html html5 java web 数据库浏览器服务器架构框架 ide 栏目 HTML 繁體版

原文原文链接

参考学习视频

https://www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44html

W3C

1994年 伯纳斯李建立了w3c
w3c为了制定网页开发的标准。使用同一个网页在不一样的浏览器中有相同的效果
结构、表现、行为三个部分构成一个网页

网页的结构

结构html：用来描述页面的结构
表现Css：控制页面中元素的样式
行为js：用来响应用户的操做

标签中的属性

属性：在标签中（开始标签或者自结束标签）设置属性
属性：是一个键值对：x=y ；用来设置标签中的内容如何显示
属性和标签之间用空格隔开 font color = "red"
属性名是w3c中规定好了的，若是有属性值，那么经过单引号或者双引号来包裹

网页的基本结构

网页的迭代

html4.0
xhtml2.0
html5

文档声明（doctype）

用来告诉浏览器是啥版本
html5的文档声明：<!doctype html> 不区分大小写哦放在html首行
严格来讲 doctype不属于html中的标签

关于进制

数数的方式html5

啥进制，满啥就进1 进1后从0开始，啥进制，就几位算满了java

二进制：满2进1 ； 0 1 10 11 100
十进制：满10进1 从0到9 （单位数字）到了10 这里进了1位，从0又开始
十六进制
八进制

关于编码

编码：将字符转成二进制的过程
解码：将二进制码转字符
规则：字符集（charset) 例如：ASCII码表

乱码问题

若是编码和解码采用的字符集不一样，则会出现乱码，常见的就是ASCII、ISO859一、 GB23十二、UTF- 8(万国码)web

设置字符集

<meta charset='utf-8'>数据库

html文档规范

<!-- 文档声明 声明当前网页的版本 -->
<!doctype html>
<!--- html的根标签（元素） 网页全部都在根元素中 -->
<html>

	<!-- 是网页的头部，head中的内容不会再网页中出现，主要是用来浏览器和搜索引擎计解析（爬虫） -->
	<head>
		<!-- meta 用来设置元数据，这里设置了网页的字符类型，避免乱码 -->
		<meta charset='utf-8'>
        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎主要根据titile中的内容来判断网页的主要内容 -->
         <title>我是标题</title>
	</head>
		 <!-- body是html的资源数，表示网页的主题，网页中全部的内容都应该在body里 -->
	<body>
       <!-- h1 是网页的一级标题 -->
        <h1>
            大标题哦
        </h1>
    </body>
</html>

VScode插件推荐

名称: Chinese (Simplified) Language Pack for Visual Studio Code
名称: Ayu
名称: Live Server浏览器

实体

在网页中，编写多个空格，浏览器会自动解析成一个空格服务器
在htm中，咱们不能直接书写一些特殊符号，好比大于小于号架构
若是咱们须要在网页中，不想要浏览器将这些特殊符号进行转义了则须要使用转义字符框架
实体的语法： &实体的名字;ide
```
&nbsp;
```
参考https://www.w3school.com.cn/html/html_entities.asp

语义化标签

html主要就是学习语义化标签，也就是对总体网页架构的搭建。网页的用途是干啥，来规范的使用相关的标签
使用html标签的时候，只关注标签的语义，而不是样式

例如H1标签

h1 在网页中重要性仅次于titile，通常状况一个页面只有一个h1

块元素

在页面中占一行的元素
标题标签都是快级元素

<h2>ｈｅｌｌｏｗｏｒｌｄ</h2>

标题组hgroup

将相关的标题放在hgroup中来分组管理

<hgroup>
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
    </hgroup>

em语调加剧

<p>今天你很<em>好</em></p>

强调Strong

强调默认有加粗效果

<!-- strong 表示强调，重要内容 -->
    <p>今天你很<strong>好看</strong</p>

blockquote长引用

<!-- blockquote 表示一个长引用，也是一个块级元素，独占一行 -->
    <p>我爱吃<blockquote>yxqz</blockquote</p>

q短引用

<!-- q表示一个短引用 行内元素，语言引用 -->
    <p>我要<q>吃一大堆的茄子</q></p>

相对路径

当咱们要跳转到服务器内部页面的时候
使用相对路径，都使用./ ../开头
./ 能够省略，若是不写./和../ 默认就是./

./ 表示当前文件所在的目录
../ 表示当前目录的上一级目录下的文件

超连接

从一个页面跳转到其余的页面，或者是当前页面的某个位置
a标签
连接也是一个行内元素，在a标签中能够嵌套（除a）任何的元素

vscode的快捷键 alt+shift+下或者上复制

href属性：指定跳转的目录

href的值：

能够是一个外部网站的地址
能够是内部的页面地址这里须要区分相对路径和觉对路径

trage属性：用来指定超连接打开的位置

trage的值：

_self 默认值：在当前页面中打开超连接
_blank 在一个新的窗口打开超连接

id 属性：惟一不重复

在开发中，能够用#做为href的占位符
也能够javascripot:; 占位符
能够直接将超连接的href属性设置#，点击超连接后页面不会跳转，而是转到当前页面的顶部位置

<!-- trage属性：
        用来指定超连接打开的位置
            _self 默认值：在当前页面中打开超连接
            _blank 在一个新的窗口打开超连接
     -->
    <a href="./07-列表.html" target="_blank">超连接</a>

    <a href="#dibu" >回到底部 </a>
        <!-- lorem -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    
    <!-- 
        id 属性 惟一不重复
        在开发中，能够用#做为href的占位符
        也能够javascripot:; 占位符
        能够直接将超连接的href属性设置#，点击超连接后页面不会跳转，而是转到当前页面的顶部位置 -->
    
    
    <a id="dibu" href="#" >回到顶部 </a>

图片标签

图片标签用来向当前页面引入一个外部图片
使用img标签来引入外部图片，img是一个自结束标签
src: 外部图片的路径（规则和超连接同样）
alt：图片的描述，默认状况是不显示的，图片在没法加载，或者是没法找到图片
width：指定图片的宽度（单位是像素）
height：指定图片的高度
若是只修改了高度，或者只修改了宽度，默认另外一个等比例缩放（正方形）

搜索引擎也会经过alt的内容来识别图片，若是不写alt，搜索引擎收录

在pc端，不建议修改图片的大小，须要多大，就直接用原生多大的图片，移动端就须要对图片进行缩放（大图缩小，非原生图片）

<img src="http://p9.qhimg.com/bdr/__85/t0199ac0a6f007265ee.jpg" alt="鱼香茄子">

图片格式

jpeg（jpg）：支持颜色比较丰富，不支持动图，通常照片
gif：支持的颜色比较少，支持动图，支持简单透明，通常颜色单一的动图
png：颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片（网页最多）
webp：谷歌新推的专门用来网页中的图片的一种格式，具有上面的三种功能，缺点：老浏览器没法识别
base64：将图片使用base64编码，将图片转成字符，经过字符来引入图片（我认为在持久化数据库很方便啊，一块儿请求就完事了，提升网站的响应速度），通常和网页一块儿加载

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

内联框架（iframe）

src 指定引入的网页的路径
frameborder：指定的内联框架的边框
内联框架中的网页不会被爬虫

<iframe src="https://blog.yxqz.top/" width="800" height="600" frameborder="0"></iframe>

音视频

audio：用来向页面中引入一个外部的音频文件，也是一个替换标签
音视频文件引入的时候，默认状况下是不能让用户本身控制播放的
controls：是否用户控制播放（控制器），是判断这个属性是否存在。
autoplay：音频自动播放，若是设置了autoplay ，则音乐在打开页面后就自动播放，大部分浏览器都不会自动播放
loop：循环播放

<audio src="./resource/audio.mp3" controls loop autoplay></audio>

除了经过src指定外部文件，能够经过source标签的src来指定

source

使用soruce能够控制版本问题
source能够解决引入多个资源的问题
在第一个source标签中的资源没法使用时候，那么就能够执行下一个source标签资源
使用source标签，能够在以前只使用src的基础上使用多个src（例如一个音频，多个格式，mp3,ogg，mp3不支持，就使用source其余的音频格式）
适合在浏览器版本的适配或者资源格式适配
source也是一种替换标签
使用source标签引入资源的时候，若是有同种资源，同种格式，只要浏览已经识别了，那么其余相同的source引入的资源就不会被识别了。embed也是相似，例以下面的mp3格式，有两个相同格式的资源，可是只会解析一个资源

<audio controls>
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.ogg" >
    </audio>

其实如今使用src直接引入或者source标签引入，不兼容的时候都会有友好的提示的

embed

兼容老版本ie
须要指定type的文件类型: audio/mp3 这里的audio 表明的是音频资源格式是mp3
通常和source搭配使用

例以下面的代码。在某个ie版本或其余浏览器版本没法识别到ogg格式的时候，则会读取embed中的资源

<audio controls>
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.ogg" >
        <embed src="./resource/audio.ogg" type="audio/ogg">
    </audio>

video

引入视频文件