HTML基础知识-CSDN博客

本文链接：https://blog.csdn.net/wangxiaochaoc/article/details/105134947

Web前端三大核心

HTML：结构层
CSS：样式层
JavaScript：行为层

基本语法

语法由标签组成。
有成对的标签，也有单一的。
不区分大小写，一般小写。
创建网页文件：.html .htm

常用前端开发工具

Dreamweaver
Hbuilder
WebStorm
SublineText
VScode

HTML文件基本结构

<html>
<head>文档设置</head>
<body>网页内容</body>
</html>

属性：对标签的具体设置，每个标签都有若干个属性。
属性的语法：<标签名属性=“属性值” …/>

字符编码

ACSII:0~127用来表示键盘上128个字符
GB2312：简体中文，大概支持6000个汉字
BIG5：简体中文，港澳台等用
GBK：大概支持20000个汉字。包含Gb2312
Unicode：全球统一编码0~65535来表示全球所有官方语言，其中最常用的就是UTF-8。

<meta charset="UTF-8"> 设置网页编码格式。

注释

在源代码中做出解释说明：
用或者ctrl+/

文字相关标签

修饰文字颜色、字号、字体等。

 <font size="字号" color="颜色" face="字体"></font>

加粗

<b></b>或者<strong></strong>

下划线

<u></u>

删除线

<strike></strike>

斜体

<i></i>或者<em></em>

下标

<sub></sub>

上标

<sup></sup>

段落标签

<p align="方向属性" style="width:100px;text-indent:2em;overflow:auto">xxx</p>

text-indent:首行缩进
overflow：auto 设置滚动条

超链接

超级链接

<a href="url" target="xx"></a>

href连接的url
target：打开方式
_self：默认在当前窗口中打开
_blank：新窗口中打开
_title：鼠标悬停提示文字

锚点链接

作用：
链接到网页具体位置。例如：回到顶部或者回到底部

方法一
设置一个锚点链接<a href="#mao">xxx</a> 注意：href属性的属性值前要加#
在页面中需要的位置设置锚点<a name="mao"></a>
方法二
设置一个锚点链接<a href="#miao">xxx</a> 注意：href属性的属性值前要加#
设置锚点位置，在要跳转到的位置的标签中添加一个ID属性

图片标签

<img src="" alt="alt标签的值"/>

src引入图片
alt 替代文字做搜索引擎的

hr水平线

<hr size="" color="" align="" noshade width=""/>

size设置大小
color颜色
align对齐方式
width设置宽度
noshade去掉阴影

格式化

作用：
保留源代码格式在浏览器中显示，预格式化文本。保留空格和换行

<pre>xxxxxx</pre>

常用转译符号

< &lt
> &gt
&nbsp 空格
&copy 版权

列表

自定义列表
```
     dl列表  dt标题  dd内容
```
无序列表
```
      ul列表  li内容
```
有序列表
```
      ol列表  li内容
```

元素分类

块级元素：

每个块级元素都可以独占一行或者多行，可以对其设置高度、宽度以及对齐等属性，常见的块级元素有：<h1>~<h6>,<p>,<div>,
块级元素的特点：
块级元素会独占一行
高度、行高、外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素

内联元素inline-element

修复著名的IE双倍浮动边界问题
内联元素特点
和其他元素都在一行上
高度，行高和顶以及底边距都不可改变
宽度就是它的文字或图片的宽度，不可改变
常见的内联元素有：<a>,<b>,<br>,<em>等

内联块元素

多个元素占一行，可以设置宽度和高度。例如：img图片

表格

table 表格 tr行 td 列
border 外边框
width height 宽度和高度
align 对齐方式
cellpadding 内边距
cellspacing 外边距
colspan 单元格跨列合并
rowspan 单元格跨行合并
标头标签th:把第一行或第一列中的td换成th
表格结构
头：<thead></thead>
主体：<tbody></tbody>
表格标题<caption></caption>

form表单和input按钮组

form表单
一个表单由多个元素组成(表单域，提示文本，表单控件)
action：提交目标的url
method属性：提交数据方式 post get 默认get

get请求：会把数据追加到url后url？参数名称=参数值&参数名称2=参数值2。get不安全，传输数据量小，中文传递困难。
post请求：把数据放在请求正文中发送，请求是安全的，传输数据量大小几乎没有限定，中文传递简单。

文本框

<input value="默认值" name="" disabled="disabled" readonly=""readonly" placeholder=""/>

placeholder 提示文字
readonly 只读，当前的值传到服务器
disabled 禁用，当前的值不能传输到服务器
密码框

<input type="password"/>

文本区

<textarea></textarea>

单选按钮

<input type="radio"/>

name一组单选按钮，name必须相同，checked默认选中
复选按钮

<input type="checkbox"/>

属性同单选按钮
下拉菜单

<select>
<option></option>
<option></option>
<option></option>
</select>

文件上传

<input type="file"/>

三种按钮

<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>和ajax连用

框架

就是把浏览器窗口进行拆分，每一个窗口都是一个独立的页面可以单独显示网页，框架没有自己的内容，不需要
框架集：框架集中可以有多个框架
cols:按列进行拆分
rows：按行进行拆分
framborder:框架边框线

base标签

一、标签定义及用法
在html中，标签是使用来为页面中的所有相对链接指定默认地址（目录）或默认属性（target属性），通常是用在那些有深度嵌套目录的页面。使用该标签后，之后的相对链接就可以从标签指定的目录为基础开始写，就简短多了。

标签是针对所有的标签起作用，如标签和` `标签都有target属性，那么遵循就近原则，最终效果取决于` `标签中的属性。二、标签语法格式说明：标签必须在标签中使用；标签全局地址（href指定的地址）是针对相对链接的标签起作用；标签全局属性（target属性）是针对所有没有设置该属性（target属性）的标签起作用；标签全局地址（href指定的地址）也可以是相对地址；

三、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中<base>标签的详细介绍</title>
<base href="image/base/images/" target="_blank">
</head>
<body bgcolor="burlywood">
<a href="1.png"><h3>第一个a标签，相对于base标签指定的目录</h3></a><br/>
<a href="2.png" target="_self"><h3>第二个a标签，相对于base标签指定的目录</h3></a><br/>
<a href="/image/base/images/3.png"><h3>第三个a标签，相对于根目录</h3></a>
</body>
</html>

实例说明：
实例中三个标签的实际地址都是“根目录/image/base/images/x.png”，建议用前两个的方式，比较简短；实例中第一个标签和第三个标签的target属性值都是“_blank”，即从新窗口打开；而第二个标签的target属性值是“_self”，即从当前窗口打开；

HTML标签语义化

白话：所谓的标签语义化就是标签的含义
优点：

方便代码的阅读和维护
同时让浏览器或网络爬虫可以很好的解析，从而更好分析其中的内容
使用语义化标签会具有更好的搜索引擎优化

核心：

合适的地方给一个最合适的标签
语义是否良好：当我们去掉css后网页结构依然组织有序，并具有良好的可读性
遵循的原则：选确定语义的HTML，再选合适的css

HTML5

一、什么是 HTML5

HTML5 的概念与定义

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML

两个概念：

是一个新版本的 HTML 语言，定义了新的标签、特性和属性。

拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

HTML5 拓展了哪些内容

语义化标签
本地存储
兼容特性
2D、3D
动画、过渡
CSS3 特性
性能与集成

HTML5 的现状

绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，
总的来说：HTML5 已经是大势所趋

多媒体音频标签

多媒体标签有两个，分别是

音频 – audio
视频 – video

audio 标签说明

可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
但是：播放格式是有限的
audio 支持的音频格式
audio 目前支持三种格式
在这里插入图片描述

audio 的参数
在这里插入图片描述

<body>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

<!--
  因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
  -->
<audio controls>
  <source src="./media/snow.mp3" type="audio/mpeg" />
  <source src="./media/snow.ogg" type="audio/ogg" />   
</audio>
</body>

多媒体视频标签

video 视频标签
目前支持三种格式
在这里插入图片描述
语法格式

<video src="./media/video.mp4" controls="controls"></video>

video 参数
在这里插入图片描述
video 代码演示

<body>
 <!-- <video src="./media/video.mp4" controls="controls"></video> -->

 <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
 <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
   <source src="./media/video.mp4" type="video/mp4">
   <source src="./media/video.ogg" type="video/ogg">
 </video>
</body>