HTML(超文本标记语言)

最新推荐文章于 2022-07-20 11:30:55 发布

BF-LoneSilverWind

最新推荐文章于 2022-07-20 11:30:55 发布

阅读量625

点赞数

分类专栏： web 前端_基础文章标签： HTML

本文链接：https://blog.csdn.net/digua930126/article/details/93054195

版权

web 前端_基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML(超文本标记语言)

定义:

超文本标记语言
（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
</head>
<body>
    </body>
</html>

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大更新版本。

前端开发工具:

WebStorm hbuilder …
HTML文档文件的后缀名 .html 或 .htm (过去使用)

搜索引擎

根据一定算法搜集数据的平台，比如谷歌、百度等。

爬虫

是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本程序。

爬虫指的是搜索引擎用于自动抓取网页的程序（或叫机器人）。这个就是从某一个网址为起点，去访问，然后把网页存回到数据库中，如此不断循环。只要有链接指向我们的网页，爬虫就会自动提取我们的网页。

创建工程的规范

一个工程下，通常会把资源文件分类放在不同的文件夹中。图片会单独放在一个文件夹，样式表会放在一个文件夹。图片文件夹通常会起名“img”“images”

一个项目的入口文件，通常为 index.html，如果你下载了项目源码看，要明白，index.html 是整个项目的入口。

基本概念

元素: 标签加内容

块级元素: 块级大多为结构性标记
行内元素: 行内大多为描述性标记

块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素

行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素

HTML 属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，属性名='属性值'
例如：name="value" 也可用单引号 '' 。

HTML 标签

超文本标记语言（HTML）标记标签通常被称为HTML标签,是HTML语言中最基本的单位,最重要组成部分。

标签分类:
单标签: 自闭合标签
双标签: 闭合标签

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送 form-data 的 HTTP 方法
name	Form_name	规定表单的名称
target	_blank _self _parent _top framename	分别规定在何处打开 action URL

get是从服务器上获取数据，post是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
get安全性非常低，post安全性较高。

表单文件上传

enctype 如果表单中有文件上传multipart/form-data
encodetype 编码类型
表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded(只能上传文本格式的文件)，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.

enctype： 规定了form表单在发送到服务器时候编码方式，有如下的三个值。

application/x-www-form-urlencoded。默认的编码方式。但是在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下。
multipart/form-data 。指定传输数据为二进制类型，比如图片、mp3、文件。
text/plain。纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码

<form action="Test.html" name="awsl" method="get"></form>
<form action="www.baidu.com" name="周树人" method="post"></form>

常用属性:
id 定义前台唯一元素 js用的多
name 表单用的多后台区分前台的唯一标识
class css用的多
value 定义表单元素的值
name=value 传输 value提交值
https://www.baidu.com/s?wd=001
后面省略
当前正用百度搜索001 直接修改001 再搜素能达到与用百度搜索一样的效果

表单元素:

input元素

<input>
<input type=submit ...>

input元素是最重要的表单元素。
input元素有很多形态，根据不同的 type 属性。
常用属性:
input type =属性不同的值代表不同作用的表单元素

属性	值	描述
alt	text	定义图像输入的替代文本。
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
readonly	readonly	硬性规定输入字段为只读。
maxlength	number	规定输入字段中的字符的最大长度。
value	value	规定 input 元素的值。
下面都是type	button	按钮
	checkbox	复选框 checked默认选中;
	file	文件上传
	hidden	隐藏域
	image	图像形按钮
	password	密码
	fieldset	带框的域
	radio	单选框一组内容只能选择一个 name属性相同划分为一组; checked默认选中;
	reset	重置按钮
	submit	提交按钮
	text	文本普通文本输入框
	select	下拉框 option 下拉框选项; selected 默认选中;
	textarea	多行文本域 placeholder 提示; required 必填; readonly 只读可以提交; disabled 禁用不能修改不能提交; maxlength 最大字符个数;

注意：
1.没有name属性的属性是无法提交到后台的！！！！
2.Radio单选按钮以name相同为一组。
3.Checkbox复选按钮以name相同为一组。

框架标签

未整理

图像标签

img 图像标签

<img>

img标签常用属性

属性	描述
src	图片地址 (分为相对路径和绝对路径)
alt	当图片无法正常显示时的提示字
title	当鼠标悬停在内容上时显示的提示字
width	宽度 px像素值
height	高度
border	边框宽度默认黑色

代码及示例:

<img src="https://i-blog.csdnimg.cn/blog_migrate/5f8dcf06d74b796a51269303a0d2e07b.png" alt="" title="百度logo图片" width="100px" border="3">
<img src="img/bd_logo1123.png" alt="图片已失效..">

Audio/Video标签

未整理

链接标签

a 超链接标签

a标签常用属性:

属性	描述
href	链接路径 (绝对路径:https://www.baidu.com 相对路径:相对项目)
title	悬停提示 :鼠标悬停在上面时的提示
target	打开方式

在这里插入图片描述

详细解释:

_self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。	
_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
_top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
_parent这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

注意:不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

代码及示例:

<a href="https://www.baidu.com/" title="点击" target="_blank">百度</a>

百度

a标签的特点:
未访问:蓝色
已访问:紫色
自带下划线
属于行内元素

a 锚点|锚链接
1). 先在页面的某个位置定点标签上id值
2). a标签的href值= #+定点的id值点击a标签跳转到定点所在位置补充代码

列表

ul 无序列表

type属性表示 ---- 列表项前面的标记

type属性对应值	意义
desc	实心圆点
circle	空心圆圈
square	实心方块

li ---- 表示列表的具体列表项

代码及效果示例:

<ul type="squal">		
    <li>qwer</li>
    <li>asdf</li>
    <li>zxcv</li>
    <li>uiop</li>
</ul>

qwer
asdf
zxcv
uiop

ol 有序列表

type属性表示 ---- 列表项前面的标记

type属性的具体值对应排序的方式
排序方式有 a A i I 1 几种

ul 和 ol 直接子元素只能是li标签, li 可以嵌套任意标签

代码及效果示例:

<ol  type="1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

表格标签

table 标签定义表格

<table></table>

table标签中的一些标签:
tr 标签 ---- 行
td 标签 ---- 表格体单元格
th 标签 ---- 表格头单元格加粗居中

各标签常用属性:

属性	意义
border	变框
bordercolor	变框颜色
align	对其方式
width	宽度
height	高度
cellspadding	单元格内边距
cellspacing	单元格外边距
bgcolor	背景颜色
style=“border-collapse: collapse”	双线变单线
rowspan	跨行
colspan	跨列

样式/节

div 块

<div>

块元素
正常显示

元信息

meta标签用于定义关于 HTML 文档的元信息。

<meta charset="UTF-8">
<meta charset="UTF-8"/>

编码格式|默认字符集不写则默认gbk 默认字符集与实际格式一致则不会乱码

HTML 参考手册- (HTML5 标准)

标签	描述
基础
<!DOCTYPE>	定义文档类型。
< html >	定义一个 HTML 文档
< title >	为文档定义一个标题
< body >	定义文档的主体
< h1 > to < h6 >	定义 HTML 标题
< p >	定义一个段落
< br >	定义简单的折行。
< hr >	定义水平线。
< !–…-- >	定义一个注释
格式
< acronym >	HTML5不再支持。定义只取首字母的缩写。
< abbr >	定义一个缩写。
< address >	定义文档作者或拥有者的联系信息。
< b >	定义粗体文本。
< bdi >	允许您设置一段文本，使其脱离其父元素的文本方向设置。
< bdo >	定义文本的方向。
< big >	HTML5不再支持。定义大号文本。
< blockquote >	定义块引用。
< center >	HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
< cite >	定义引用(citation)。
< code >	定义计算机代码文本。
< del >	定义被删除文本。
< dfn >	定义定义项目。
< em >	定义强调文本。
< font >	HTML5不再支持。 HTML 4.01 已废弃。定义文本的字体、尺寸和颜色
< i >	定义斜体文本。
< ins >	定义被插入文本。
< kbd >	定义键盘文本。
< mark >	定义带有记号的文本。
< meter >	定义度量衡。仅用于已知最大和最小值的度量。
< pre >	定义预格式文本
< progress >	定义运行中的任务进度（进程）。
< q >	定义短的引用。
< rp >	定义不支持 ruby 元素的浏览器所显示的内容。
< rt >	定义字符（中文注音或字符）的解释或发音。
< ruby >	定义 ruby 注释（中文注音或字符）。
< s >	定义加删除线的文本。
< samp >	定义计算机代码样本。
< small >	定义小号文本。
< strike >	HTML5不再支持。 HTML 4.01 已废弃。定义加删除线的文本。
< strong >	定义语气更为强烈的强调文本。
< sub >	定义下标文本。
< sup >	定义上标文本。
< time >	定义一个日期/时间
< tt >	HTML5不再支持。定义打字机文本。
< u >	定义下划线文本。
< var >	定义文本的变量部分。
< wbr >	规定在文本中的何处适合添加换行符。
表单
< form >	定义一个 HTML 表单，用于用户输入。
< input >	定义一个输入控件
< textarea >	定义多行的文本输入控件。
< button >	定义按钮。
< select >	定义选择列表（下拉列表）。
< optgroup >	定义选择列表中相关选项的组合。
< option >	定义选择列表中的选项。
< label >	定义 input 元素的标注。
< fieldset >	定义围绕表单中元素的边框。
< legend >	定义 fieldset 元素的标题。
< datalist >	规定了 input 元素可能的选项列表。
< keygen >	规定用于表单的密钥对生成器字段。
< output >	定义一个计算的结果
框架
< frame >	HTML5不再支持。定义框架集的窗口或框架。
< frameset >	HTML5不再支持。定义框架集。
< noframes >	HTML5不再支持。定义针对不支持框架的用户的替代内容。
< iframe >	定义内联框架。
图像
< img >	定义图像。
< map >	定义图像映射。
< area >	定义图像地图内部的区域。
< canvas >	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
< figcaption>	定义一个 caption for a < figure > element
< figure >	figure 标签用于对元素进行组合。
Audio/Video
< audio >	定义声音，比如音乐或其他音频流。
< source >	定义media元素 ( 和 )的媒体资源。media
< track >	为媒体(< video > 和 < audio >)元素定义外部文本轨道。
< video >	定义一个音频或者视频
链接
< a >	定义一个链接
< link >	定义文档与外部资源的关系。
< nav >	定义导航链接
列表
< ul >	定义一个无序列表
< ol >	定义一个有序列表
< li >	定义一个列表项
< dir >	HTML5不再支持。 HTML 4.01 已废弃。定义目录列表。
< dl >	定义一个定义列表
< dt >	定义一个定义定义列表中的项目。
< dd >	定义定义列表中项目的描述。
< menu >	定义菜单列表。
< command >	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格
< table >	定义一个表格
< caption >	定义表格标题。
< th >	定义表格中的表头单元格。
< tr >	定义表格中的行。
< td >	定义表格中的单元。
< thead >	定义表格中的表头内容。
< tbody >	定义表格中的主体内容。
< tfoot >	定义表格中的表注内容（脚注）。
< col >	定义表格中一个或多个列的属性值。
< colgroup >	定义表格中供格式化的列组。
样式/节
< style >	定义文档的样式信息。
< div >	定义文档中的节。
< span >	定义文档中的节。
< header >	定义一个文档头部部分
< footer >	定义一个文档底部
< section >	定义了文档的某个区域
< article >	定义一个文章内容
< aside >	定义其所处内容之外的内容。
< details >	定义了用户可见的或者隐藏的需求的补充细节。
< dialog >	定义一个对话框或者窗口
< summary >	定义一个可见的标题。当用户点击标题时会显示出详细信息。
元信息
< head >	定义关于文档的信息
< meta >	定义关于 HTML 文档的元信息。
< base >	定义页面中所有链接的默认地址或默认目标。
< basefont >	HTML5不再支持。 HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸。
程序
< script >	定义客户端脚本。
< noscript >	定义针对不支持客户端脚本的用户的替代内容。
< applet >	HTML5不再支持。 HTML 4.01 已废弃。
< embed >	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
< object >	定义嵌入的对象。
< param >	定义对象的参数。