前端开发 - HTML - 陈陈菌博客

HTML : 超文本标记语言.是用于构建页面的基础骨架。下面这是一个常见的 HTML 结构。它由许多的标签组成。

<标签>意味着标签的开始</标签>意味着标签的结束。

其中则代表注释的结束。

HTML骨架中可以存在脚本和样式。样式由<style>标签表示，脚本由<script>标签表示。标签里面则是相应的代码

不过最值得注意的是 <html>标签，因为它是html的主要父级。以及它的子级<head>（头信息）、<body>（主体内容）

<!DOCTYPE>
<html>
    <head>
        <title>Web前端开发<title>
        <meta http-equiv="content-type" content="text/html" charset="utf-8">
        <meta name="viewport" content="网页描述">
        <meta name="keywords" content="网页关键字">
        <meta name="description" content="网页主要内容">
        <meta name="author" content="网页的作者">
        <style>
            /** 样式表 **/
        </style>
        <script>
            /** 脚本 **/
        </script>
    </head>
    
    <body>
        <!-- 网页主体内容 -->
    </body>
</html>

基本结构总结：

<!DOCTYPE> ：声明文档类型
<html> ：网页的根框架
<head> ：用于定义HTML文档头
<title> ：定义HTML网页标题
<base> ：为HTML页面所有链接设置一个默认的目标地址
<link> ：定义HTML文档与外部资源的关系
<meta> ：提供关于HTML文档的元数据（描述等）给服务器和搜索引擎
<style> ：用于为 HTML 文档定义 CSS 样式信息
<body> ：网页的主体显示内容

SEO

对于我们的HTML页面，与搜索引擎有关。就需要以下内容便让搜索引擎检索。

<meta> 的主要属性：

keywords （用于告诉搜索引擎网页的关键字）
description （用于告诉搜索引擎该网页的主要内容）
robots （用于告诉搜索引擎该网页是否需要被收录索引）

robots 参数	说明
all	索引网页包括链接
index	索引此网页
none	将此网页忽略
noindex	不索引此网页
follow	允许通过链接索引其他网页
nofollow	不允许通过链接索引其他网页

author (用于声明网页作者)
generator （用于标注该网页由什么软件编写）
copyright （用于标注版权信息）
revisit-after （设置爬虫的访问时间）
如 <meta name="revisit-after" content="10 days">
content-Type （设置网页字符集和编码格式）

浏览器

no-cache （先发送请求与服务器确定资源是否更改，如果未更改则使用缓存）
public （不允许缓存）
private （只为单个用户缓存）
max-age （响应该在多久内能被缓存和重用而不去服务器重新缓存）
expires （用于设置网页的到期时间，过期后必须到服务器上重新访问）
refresh （网页将在设置的时间内自动刷新跳转到指定网页）
Set-Cookie （用于设置网页过期时间，过期后将删除本地 Cookie。此处使用 GMT 时间）

格式化元素

<b>: 定义加粗文本 (与<strong>一致)
<strong>: 定义加重语气（与<b>一致）
<em>: 定义重文字（与<i>一致）
<i>: 定义斜体字（与<em>一致）
<big>: 定义大号字
<small>: 定义小号字
<sub>: 定义下标字
<sup>: 定义上标字
<ins>: 定义带下划线的字
<del>: 定义带删除线的字
<h1>: 定义一级标题
<h2>: 定义二级标题
<h3>: 定义三级标题
<h4>: 定义四级标题
<h5>: 定义五级标题
<h6>: 定义六级标题

计算机输出

<code>: 定义计算机代码
<kbd>: 定义键盘输出样式
<samp>: 定义计算机代码样本
<tt>: 定义打字机输入样式
<var>: 定义变量
<pre>: 定义预格式文本(独占一行 , 常用于定义代码)
<abbr>: 定义缩写
<acronym>: 定义首字母缩写
<address>: 定义地址
<bdo>: 定义文字序列显示方向(使用 dir 属性 ltr[左] 和 rtl[右]- )
<blockquote>: 定义长的文字引用 (独占一行)
<q>: 定义短的文字引用 (双引号)
<cite>: 定义作者引用、著作等
<dfn>: 定义一个概念（与 cite 类似）
<br> （换行符）
<hr> （水平线）

转义字符

  （空格）
& （&）
< （<）
> （>）
" （”）

实体字符

¥ （¥ 人民币）
€ （€ 欧元）
© （© 版权）
® （® 商标）
™ （™ 商标）
× （× 乘号）
÷ （÷ 除号）

列表

<ui> （无序列表）
<ol> （有序列表）
<dl> （自定义列表）
<dt> （自定义列表的顶级项）
<dd> （自定义列表的子项）
<li> （有序和无需列表的子项）

盒子

<div> （块级盒子，独占一行）
<span> （行级盒子，一行可排列多个）
<header> （为了阅读方便的顶部盒子）
<footer> （为了阅读方便的底部盒子）
<nav> （常用于导航链接的盒子）

表单

当我们需要提交数据时就需要用到表单。表单里面是表单组件。HTML提供了一些原始的组件。

标签	描述
form	提交表单元素的区域

属性	属性值	作用
action	url地址	指定接收并处理表单数据的后台url地址
method	get/post	表单的提交方式
name	名称	用于区分不同的表单域

表单控件的 input 属性

type （表单类型）
value （元素值）
name （表单名称）
checked （设置默认选中）
maxlength （最大长度）
placeholder （提示内容）

input 类型

<input type="button"> （按钮）
<input type="radio"> （单选框）
<input type="checkbox"> （复选框）
<input type="file"> （文件上传）
<input type="hidden"> （隐藏输入框）
<input type="image"> （图像按钮）
<input type="reset"> （重置按钮）
<input type="submit"> （提交按钮）
<input type="text"> （文本输入框）
<input type="password"> （密码输入框）

下拉表单

<select> （下拉表单）
<option> （下拉表单的元素）
<optgroup> （下拉表单标题）

select 属性

selected （设置默认选中的元素）

文本域

textarea (文本域标签)

textarea 属性

cols (长度)
rows (高度)

Label

在HTML页面中，Label 可作为某一输入控件的焦点。

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label for="i">点我选中文本框</label><br><br>
    <input id="i" type="text">
</body>

</html>

标签	描述
label	用于绑定1个表单元素的焦点选择

label 属性	描述
for	指定的表单元素的 ID

媒体

在HTTML5之前网页播放音频和视频都需要采用 flash 来实现，在HTML5出行后。改变了这个现状。

<audio> 定义音频

属性：
src （定义音频路径）
controls （设置是否使用播放控制条）

1	<audio src="#" controls="controls"></audio>

<video> 定义视频

属性：
src （定义视频路径）
controls （设置是否使用播放控制条）

1	<video src="#" controls="controls"></video>

表格

表格常用于梳理内容，这在HTML里很常见。

标签	说明
table	定义1个表格
thead	表格头区域
tbody	表格主体区域
tr	表格行(包含在头和主体内)
th	表格的头单元格(包含在tr里面)
td	表格的子单元格(包含在tr里面)

属性	属性值	说明
align	left、center、right	对齐方式
border	数字	边框粗细
cellpadding	像素值	内边距距离
cellspacing	像素值	边框大小
width	像素值/百分比	表格宽度
height	像素值/百分比	表格高度
rowspan	单元格个数	跨行合并单元格
colspan	单元格个数	跨列合并单元格

框架

html 可以存在套娃行为（笑）也就是 html 里套 html。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<!--	<frameset cols="300px" rows="100px">
		<frame src="https://blog.glumi.cn" scrolling="yes" noresize="noresize" frameborder="1px"  marginheight="20px"/>
		<noframes>
			<body>
				你的浏览器无法处理该内容
			</body>
		</noframes>
	</frameset> 
-->
	<body>
		<frameset cols="300px" rows="100px">
			<iframe width="500px" height="500px" src="https://blog.glumi.cn" scrolling="yes" noresize="noresize" frameborder="1px"  marginheight="20px"/>
			<noframes>
				<body>
					你的浏览器无法处理该内容
				</body>
			</noframes>
		</frameset>
	</body>
</html>

<frameset> （定义一个框架集）

属性：
cols (定义框架列的个数)
rows (定义框架行的个数)

<frame> （定义于body外的框架）

属性：
src （显示的网页）
scrolling （是否显示滚动条）
frameborder （边框）
marginheight （上下外边距）
marginwidth （左右外边距）

<iframe> （定于body内的框架）

属性：
src （显示的网页）
scrolling （是否显示滚动条）
frameborder （边框）
marginheight （上下外边距）
marginwidth （左右外边距）
height （定义高度）
width （定义宽度）

<noframe> （不支持框架集时，显示的内容）

<body> 你的浏览器无法处理该内容 </body>

需要注意：

<frame> 和 <iframe> 框架的主要区别在于 <iframe> 可以定义框架宽高而<frame>不行

结尾

HTML的基本内容就此结束了，对于 HTML 更的内容，我将后续补充。

前端开发 - HTML