HTML

程序员文章站 2022-01-15 19:34:54

参考学习视频 https://www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44 W3C 1994年伯纳斯李创建了w3c w3c为了制定网页开发的标准。使用同一个网页在不同的浏览器中有相同的效果结构、表现、行为三个部分构成一个网页网页的结构结构html ......

参考学习视频

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

w3c

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

HTML

网页的结构

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

标签中的属性

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

网页的基本结构

网页的迭代

html4.0
xhtml2.0
html5

文档声明（doctype）

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

关于进制

数数的方式

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

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

关于编码

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

乱码问题

如果编码和解码采用的字符集不同，则会出现乱码，常见的就是ascii、iso8591、 gb2312、utf- 8(万国码)

设置字符集

<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中，我们不能直接书写一些特殊符号，比如大于小于号
如果我们需要在网页中，不想要浏览器将这些特殊符号进行转义了则需要使用转义字符
实体的语法： &实体的名字;
```
&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>

HTML

强调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编码，将图片转成字符，通过字符来引入图片（我认为在持久化数据库很方便啊，一起请求就完事了，提高网站的响应速度），一般和网页一起加载

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

推荐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>

HTML

其实现在使用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

引入视频文件

上一篇：前端常用模板引擎- artTemplate

下一篇： Canvas三种动态画圆实现方法说明(小结)

HTML

参考学习视频

w3c

网页的结构

标签中的属性

网页的基本结构

网页的迭代

文档声明（doctype）

关于进制

关于编码

乱码问题

设置字符集

html文档规范

vscode插件推荐

实体

meta

重定向

语义化标签

块元素

标题组hgroup

em语调加重

强调strong

blockquote长引用

q短引用

相对路径

超链接

图片标签

图片格式

内联框架（iframe）

音视频

source

embed

video

js 动态生成html 触发事件传参字符转义的实例

借助dw软件对html编码转换的方法(dw设置编码)

python处理“”开头加数字的html字符方法

Java Web使用Html5 FormData实现多文件上传功能

html文件中jquery与velocity变量中的$冲突的解决方法

jquery中常用的SET和GET$(”#msg”).html循环介绍

利用HTML5+CSS3实现3D转换效果实例详解

sublime text怎么使用快捷键运行浏览web/html页面?

HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能

HTML5声音录制/播放功能的实现代码