【前端】【HTML】基础知识_html的-程序员宅基地

技术标签： html5 前端

HTML 基础知识

一. 什么是HTML？
二. 基本语法
三. 标签关系
- (一) 包含关系
- (二) 并列关系
四. HTML基本结构标签
五. 特殊字符
六. HTML常用标签
七. 语义化标签
八. 多媒体标签及其控制函数

一. 什么是HTML？

HTML指的是超文本语言，它是用来描述网页的的一种语言。
HTML不是编程语言，而是一种标记语言。
标记语言是一套标记标签。

二. 基本语法

HTML标签是由尖括号包围的关键词，例如：<dr/>
HTML标签通常是成对出现的，例如：<html>和</html>,称之为双标签；第一个是开始标签，第二个是结束标签。
有些特殊的标签必须是单标签，例如：<br/>,称之为单标签。

三. 标签关系

(一) 包含关系

<html>
	<title></title>
</html>

(二) 并列关系

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

四. HTML基本结构标签

1.<html></html>：页面中最大的标签，称之为根标签。
2.<head></head>：注意在head标签中我们必须要设置的标签是title标签。
3.<title></title>：让页面拥有一个属于自己的网页标题。
4.<body></body>：页面中的内容基本都放到body里面。

(一) 以下三个代码vscode自动生成基本不需要我们重写

1. `<!DOCTYPE html>`文档类型声明标签

1）告诉浏览器使用HTML5版本来显示网页；
2）声明位于文档中最前面的位置，处于html标签之前；
3）不是HTML标签，而是文档声明标签；

2. `<html lang="en">`lang语言种类

1）用来定义当前文档显示的语言；
2）定义为en的就是英文网页，定义为zh-CN就是中文网页；

3. `<meta charset="UTF-8">`字符集

1）必须写，采取UTF-8来保存文字，如果不写就会乱码；

(二) HTML网页大至骨架如下

（输入<kbd>！</kbd>按下<kbd>tab</kbd>键，就可以直接生成）

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>网页标题</title>
	</head>
	<body>
		网页全部内容……
	</body>
</html>

五. 特殊字符

特殊字符	字符代码	特殊字符	字符代码
空格符( )	&nbsp；	和号(&)	&amp；
大于号(>)	&gt；	小于号(<)	&lt；
人民币(￥)	&yen；	版权()	&copy；
注册商标()	&reg；	摄氏度(℃)	&deg；
正负号(±)	&plusmn；	乘号(×)	&times；
除号(÷)	&divide；	平方(²)	&sup2；
立方(³)	&sup3；

六. HTML常用标签

(一) 标题标签

<h1>我是一个一级标题标签</h1>

一个标题独占一行；
标题标签里的文字会加粗，字号h1至h6依次变小；

(二) 段落标签

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

它用于定义段落，可以将整个网页分为若干个段落；

(三) 文本格式化标签

<strong></strong>或<b></b>	粗体字
<big></big>					大号字
<small></small>				小号字
<em></em>或<i></i>			斜体字
<strong></strong>			加重语气
<del></del>或<s></s>		删除线
<ins></ins>或<u></u>		下划线

<hr/>						水平线标签
<br/>						换行标签
<!--注释语句-->              注解（Ctrl+/）

不推荐使用这些文本格式化标签，后面会通过CSS实现这些标签的功能；

(四) 盒子标签

<div>我是大盒子，表示分割，分区</div>
<span>我是小盒子，表示跨度，跨距</span>

大盒子标签用来布局，一行只能放一个大盒子；
小盒子标签用来布局，一行可以放多个小盒子；

(五) 图像标签

<img src="图像路径"/>

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

1. 图片标签的属性

`src`	图片路径(必须属性)
`alt`	替换文本。图像不显示时，显示文字
`title`	提示文本。鼠标放到图像上时，显示的文字
`width`	宽度 px（像素）
`height`	高度 px（像素）

图像标签可以有多个属性，必须写在标签名的后面；
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开；

2. 图片路径

图片路径：相对于HTML文件的路径

路径	示例
根路径	`<img src="/baidu.jpg"/>`
同一路径	`<img src="./baidu.jpg"/>`
上一级路径	`<img src="../baidu.jpg"/>`

(六) 超链接标签

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

1. 超链接标签属性

`href`	用于指定链接目标的url地址，当为标签应用href属性时，它具有了超链接的功能
`target`	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新的窗口中打开方式

2. 链接分类

外部链接	跳转到其他链接： `<a href="http//www.baidu.com">百度</a>`
内部链接	网站内部页面之间的相互链接，直接链接内部页面的名称即可； `<a href="./index.html">首页</a>`
空连接	没有确定链接目标时； `<a href="#">首页</a>`
下载链接	地址是文件和压缩包时，会下载文件： `<a href="img.zip">下载文件</a>`
网页元素链接	点击网页元素时，跳转到目标链接； `<a href="www.baidu.com"><img src="img.jpg"></a>`
锚点链接	点击链接，可以快速定位到页面中的位置： 1) 在链接文本的href属性中，设置属性值为`#名字`的形式；`<a href="#two">第二季</a>` 2) 找到目标的位置标签，里面添加一个id属性，属性值和href属性值一样；`<h3 id="two">第二季</h3>`

使用 download 属性后，打开链接会触发浏览器的下载行为，而不是显式链接内容。
<a href="dog.jpg" download>下载图片</a>

<a href="dog.jpg" download="puppy.jpg">下载图片</a>

(七) 表格标签

表格用于显示数据，展示数据；

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

<table></table>标签：用于定义表格的标签；
<tr></tr>标签：用于定义表格中的行，必须嵌套在<table></table>标签中；
<td></td>标签：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中；

1. 表头单元格标签

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

<th></th>标签：使表头文字加粗，变大；

表格标签属性
(这些属性要写到表格标签<table>里面去)

属性名	属性值	描述
align	left, center, right	规定表格相对周围元素的对其方式
border	1或""	规定表格单元是否拥有边框，默认”“，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度
bgcolor	#fff	设置背景颜色

2. 表格结构标签

<thead>表格的头部区域</thead>：用于定义表格的头部，其内部必须有<tr>标签；
<tbody>表格的主题区域</tbody>：用于定义表格的主体；
以上标签都是放在<table></table>标签中；

3. 合并单元格方式

跨行合并： rowspan=“合并单元格的个数”
跨列合并： colspan=“合并单元格的个数”
写到<td>里面去；

(八) 列表标签

列表是用来布局页面的；

1. 无序列表

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

type属性值：

属性值	解释
none	没有列表符号
circle	空心圆
disc	实心圆
square	实心正方形

2. 有序列表

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

type属性值：

属性值	解释
1	数字 1，2，3……
a/A	小/大写英文字母
i/I	小/大写罗马数字

3. 自定义列表

<dl>
	<dt>列表标题</dt>
	<dd>列表内容</dd>
	……
</dl>

(九) 表单标签

表单是用于收集用户信息的；

1. 表单域

<from>标签用于定义表单域；
<from>标签会把它范围内的表单元素信息提交给服务器；

<form  method="post" action="xxx.html"></form>

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其其取值为get或post
name	名称	用于指定表单名称，以区分一个页面中多个表单域

2. 表单控件(表单元素)

1) `label`标签

<input type="checkbox" name="ghoby" id="b"/> 
<label for="b">学习</label>

用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或选择对应表单元素上，用来增加用户体验。

2) `input`输入表单元素

<input type="属性值"/>

input常用属性：

属性	作用
type=“text”	设置表单控件类型
name=“biaoDan”	设置input元素时的名称
value=“2”	设置input元素的值
checked=“checked”	设置input元素首次加载时应当被选中
maxlength=“12”	规定输入字段中的文字的最大长度
required="required "	表示其内容不能不能为空
placeholder=“提示文本”	提示信息
readonly=“readonly”	只读
disabled=“disabled”	禁用
autofocus=“autofocus”	自动聚焦到指定表单元素
autocomplete="off "	显示以前填入的值 autocomplete="on"打开 autocomplete="off"关闭
multiple=“mulitple”	可以多选文件提交

type属性值及描述：

属性值	描述	属性值	描述
text	文本框	password	密码框
file	文件选择	button	普通按钮
checkbox	复选框可以实现多选：要有相同的name值	radio	单选按钮可以实现多选一：要有相同的name值
reset	重置按钮	image	图像形式的提交按钮
submit	提交按钮	email	Email类型
url	URL类型	date	日期类型
time	时间类型	month	月类型
week	周类型	number	数字类型
tel	手机号码	search	搜索框
color	颜色选择	hidden	隐藏域

type="file"时，input 元素加 multiple 属性，可以选择多个文件；

3) `select`下拉表单元素

<select>
	<option>选项1</option>
	<option>选项1</option>
	……
</select>

使用场景：如果有多个选项让用户选择，可以使用<select>标签；
在<open>中定义selected="selected"时，当前项为默认项；

属性	解析
multiple	select 加该属性，可选中多个选项

4) `textarea`文本域元素

<textarea rows="3" cols="20" maxlength="50" name="demo">
	文本内容
</textarea>

使用场景：当用户输入内容较多的情况下，可以使用<textarea>标签；
<textarea>用于定义多行文本输入的控件；

七. 语义化标签

️<header>: 头部标签
️<nav>: 导航标签
️<article>: 内容标签
️<section>: 定义文档某个区域
️<aside>: 侧边栏标签
️<footer>: 尾部标签
这些语义化标主要是针对搜索引擎的；
这些新标签页面中可以使用多次；

八. 多媒体标签及其控制函数

(一) 音频`<audio>`

当前的<video>元素支持三种视频格式(MP3, Wav, Ogg)：尽量使用mp3格式；
语法：
<audio src="文件地址" controls="controls"></audio>

1. 音频`<audio>` ——常见属性

属性	描述
autoplay	自动播放
controls	向用户显示播放控件
loop	循环播放
width/height	设置播放器宽度/高度
preload	auto(预先加载视频) none(不应加载视频) 规定是否加载视频(如果有了autoplay 就忽略该属性)
src	视频url地址
poster	加载等待的画面图片
muted	静音播放

(二) 视频`<video>`

当前的<video>元素支持三种视频格式(MP4, WebM, Ogg)：尽量使用mp4格式；
语法：
<video src="文件地址" controls="controls"></video>
属性：

属性解析

poster=“cover.png” 用于设置视频的预览图

controls 向用户显示播放组件

属性	解析
poster=“cover.png”	用于设置视频的预览图
controls	向用户显示播放组件

href 属性
href属性指定解析文档时相对URL需要使用到的基准URL例：

<a href="/f?kw=二手笔记本&fr=index&fp=0&ie=utf-8">贴吧</a>

target属性
target属性告诉浏览器如何打开URL

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

用元数据说明文档
meta元素用来定义HTML文档的元数据，每个meta元素只能用于一种用途。如果想要使用的特性不止一个，应该使用多个meta元素

1) 指定名值的数据对
当meta用名/值对定义元数据时需要使用name和content属性例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

代码中name名viewport表示为视口初始大小提供指示,只用于移动设备
content值width=device-width表示宽度与设备宽度一致，initial-scale=1.0表示设备宽度(与横屏竖屏相关)与视口大小之间的比例时1.0。

2) 声明字符编码
代码中声明该文档使用的是UTF-8字符编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3) 模拟http响应标头
http-equiv用途是指定所要模拟标头字段的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="5">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

refresh定义文档刷新间隔，上面代码表示文档每隔5秒刷新一次

media属性
表明文档在什么情况下可以使用该元素定义的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示</title>
		<style media="screen">
			div {
      
				width: 200px;
				height: 200px;
				background-color: #ffc0cb;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

上面screen表示只用于计算机显示屏幕。默认是all

link属性
用来在HTMl文档和外部资源之间建立联系。常用属性有

href：link元素指向的资源URL
hreflang：说明关联资源使用的语言
media：说明关联资源用于那种设备
rel：说明文档与关联资源的关系类型
sizes：指定图标大小
type：指定关联资源的MIME类型

1) 载入样式表

<link rel="stylesheet" href="./CSS/base.css">

stylesheet：载入外部样式表 href：载入地址

2) 定义网站标志

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

大多数浏览器会自动请求favicon.icon文件。所以当网站图标与此同名时可以不用写

3) 预先获取资源

<link rel="prefetch" href="/pae2.html">

prefetch表示预先获取资源

本文链接：https://blog.csdn.net/qq_51712954/article/details/123319639

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

SonarQube简介及客户端集成_sonar的客户端区别-程序员宅基地

文章浏览阅读1k次。SonarQube是一个代码质量管理平台，可以扫描监测代码并给出质量评价及修改建议，通过插件机制支持25+中开发语言，可以很容易与gradle\maven\jenkins等工具进行集成，是非常流行的代码质量管控平台。通CheckStyle、findbugs等工具定位不同，SonarQube定位于平台，有完善的管理机制及强大的管理页面，并通过插件支持checkstyle及findbugs等既有的流..._sonar的客户端区别

元学习系列（六）：神经图灵机详细分析_神经图灵机方法改进-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏27次。神经图灵机是LSTM、GRU的改进版本，本质上依然包含一个外部记忆结构、可对记忆进行读写操作，主要针对读写操作进行了改进，或者说提出了一种新的读写操作思路。神经图灵机之所以叫这个名字是因为它通过深度学习模型模拟了图灵机，但是我觉得如果先去介绍图灵机的概念，就会搞得很混乱，所以这里主要从神经图灵机改进了LSTM的哪些方面入手进行讲解，同时，由于模型的结构比较复杂，为了让思路更清晰，这次也会分开几..._神经图灵机方法改进

【机器学习】机器学习模型迭代方法(Python)-程序员宅基地

文章浏览阅读2.8k次。一、模型迭代方法机器学习模型在实际应用的场景，通常要根据新增的数据下进行模型的迭代，常见的模型迭代方法有以下几种：1、全量数据重新训练一个模型，直接合并历史训练数据与新增的数据，模型直接离线学习全量数据，学习得到一个全新的模型。优缺点：这也是实际最为常见的模型迭代方式，通常模型效果也是最好的，但这样模型迭代比较耗时，资源耗费比较多，实时性较差，特别是在大数据场景更为困难；2、模型融合的方法，将旧模..._模型迭代

base64图片打成Zip包上传，以及服务端解压的简单实现_base64可以装换zip吗-程序员宅基地

文章浏览阅读2.3k次。1、前言上传图片一般采用异步上传的方式，但是异步上传带来不好的地方，就如果图片有改变或者删除，图片服务器端就会造成浪费。所以有时候就会和参数同步提交。笔者喜欢base64图片一起上传，但是图片过多时就会出现数据丢失等异常。因为tomcat的post请求默认是2M的长度限制。2、解决办法有两种：① 修改tomcat的servel.xml的配置文件，设置 maxPostSize=..._base64可以装换zip吗

Opencv自然场景文本识别系统（源码＆教程）_opencv自然场景实时识别文字-程序员宅基地

文章浏览阅读1k次，点赞17次，收藏22次。Opencv自然场景文本识别系统（源码＆教程）_opencv自然场景实时识别文字

Android-MediaCodec详解_system.err: at android.media.mediacodec.releaseout-程序员宅基地

文章浏览阅读9.6k次，点赞3次，收藏24次。前言:安卓中播放视频一般有两个接口，一个是mediaplayer，一个是mediacodec，其中mediaplayer是对mediacodec / genericsource / render 的封装，对APP而言使用比较方便。相比而言mediacodec留给用户发挥的空间更多，APP可以自己实现很多功能。目前只有MXplayer使用的是mediaplayer接口，其他APP一般都是使用的m..._system.err: at android.media.mediacodec.releaseoutputbuffer(native method)

随便推点

4.朴素贝叶斯分类器实现－matlab_朴素贝叶斯 matlab训练和测试输出-程序员宅基地

文章浏览阅读3.1k次，点赞2次，收藏12次。实现朴素贝叶斯分类器，并且根据李航《统计机器学习》第四章提供的数据训练与测试，结果与书中一致分别实现了朴素贝叶斯以及带有laplace平滑的朴素贝叶斯%书中例题实现朴素贝叶斯%特征1的取值集合A1=[1;2;3];%特征2的取值集合A2=[4;5;6];%S M LAValues={A1;A2};%Y的取值集合YValue=[-1;1];%数据集和T=[ 1,4,-1;..._朴素贝叶斯 matlab训练和测试输出

Markdown 文本换行_markdowntext 换行-程序员宅基地

文章浏览阅读1.6k次。Markdown 文本换行_markdowntext 换行

错误:0xC0000022 在运行 Microsoft Windows 非核心版本的计算机上,运行”slui.exe 0x2a 0xC0000022″以显示错误文本_错误: 0xc0000022 在运行 microsoft windows 非核心版本的计算机上,运行-程序员宅基地

文章浏览阅读6.7w次，点赞2次，收藏37次。win10 2016长期服务版激活错误解决方法：打开“注册表编辑器”；（Windows + R然后输入Regedit）修改SkipRearm的值为1：（在HKEY_LOCAL_MACHINE–》SOFTWARE–》Microsoft–》Windows NT–》CurrentVersion–》SoftwareProtectionPlatform里面，将SkipRearm的值修改为1）重..._错误: 0xc0000022 在运行 microsoft windows 非核心版本的计算机上,运行“slui.ex