HTML

1HTML概述

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。（不是编程语言）可以使用HTML创建站点。

1.1声明

<!DOCTYPE html>
# 确定HTML版本，有助于浏览器中正确显示网页。此处使用的是HTML5

1.2head

# 头部元素：包含文档的元数据，title
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
# 元数据（如）：
<meta charset='utf-8'>
# title
<title> title </title>

1.3body

<body>
	content
</body>

1.4HTML标签/元素

  • 又尖括号包围的关键词，如：
  • 成对出现，有开始标签和结束标签

1.5Web浏览器

  • 用于读取HTML文件，并显示。但是不直接显示HTML标签，而是用标签决定如何展示HTML页面给用户（即渲染）
  • 多个连续空格或空行会被显示为一个空格

2HTML元素

2.1语法（XHTML）

  • 标签：有开始标签和结束标签
  • content：是开始标签和结束标签之间的内容
  • emptycontent：某些HTML元素有空内容（empty content），xhtml强制关闭空元素
  • 属性：大多数HTML元素可有属性，一般位于开始标签，以名称/值对的形式出现，xhtml属性值必须添加引号
  • 嵌套：大多数HTML元素可以嵌套
  • 大小写：现阶段不区分大小写，xhtml强制使用小写
<html (属性) >
	content
    
#####(empty content)#####换行
<br/>

</html>

2.2常用元素

  • 补充

2.3图片&列表&表格&超链接

元素 描述
h1~h6 六级标题：浏览器会自动在标题后方添加空行
hr/ 水平线：空元素，在页面中创建水平线
p/br/ 段落：浏览器会自动在段落前后加空行/拆行：不产生新段落的情况下进行换行
div/span 区块：用于HTML布局。块级元素（以新行开始或结束）/内联元素（not新行）
属性 描述
img/ 图像
table/tr/td/th 表格/行/单元格/表格表头
ul/ol/li 有序列表/无序列表/定义列表项目
  • img属性
属性 描述
src 源属性，指向外部脚本文件/url地址
alt 图片无法显示时，定义替换文本
width/height 高度和宽度
title 鼠标停留在图片上，显示的文字属性
  • 表格属性
属性 描述
caption 表格标题
border 表格边框
width/height 高度和宽度
cellspacing 单元格之间距离
cellpadding 表格内容与边框距离
align="center" 表格在网页中的位置
  • 列表
属性 描述
style = disc/circle/square/none 圆点标识/空心圆点/方块儿标识/不显示标识
type = 1/A/a/I/i 阿拉伯/大写字母/小写字母/大写罗马字母/小写罗马字母
  • 超链接
属性 描述
href = "https://##" 链接
target="_self/_blank" 当前窗口打开网页/新窗口

2.4表单

属性 描述
form 表单：交互控件，用于收集用户的输入信息
input 输入信息框
select/option 下拉框
textarea 可拉伸框，用于输入多行信息
  • 表单属性
属性 描述
（form）action/method 表单提交url地址/get或post
（input）type = "text/password/checkbox/radio/submit"/name="" 单行文本框/密码/复选框/单选框/定义一个提交按钮//名称
（select）name/（option多个）value 下拉框信息
（textarea）name=""/rows=""/cols="" 名称/可输入的可见行数/每行可见输入长度
  • 实现交互：
    • 要将input/select+option/textarea放在form内部
    • 需要type=submit按钮或者用bootstrap的btn
    • 内部用户标签必须有name属性，form标签必须有：action（提交地址），method（提交方式）

2.5补充

元素 描述
html 定义html文档
!-- -- 注释
head 头部：可以添加title，style，meta，link，base
body 定义文档的主体
属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
  • head
元素 描述
head 头部：可以添加title，style，meta，link，base
title 标题：工具栏标签
base 基本链接地址
link 通常用于链接样式表
style 可以直接添加样式来渲染HTML文档
meta 基本元数据：不会显示在页面上。PS：元数据：网页的描述，关键词，文件最后修改时间，作者
  • body
元素 描述
iframe html框架，在一个窗口显示多个页面
stript 用于加载脚本文件
nostript 浏览器不支持脚本的时候才会显示

2.6文本格式化

1.HTML 文本格式化标签
标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
2.HTML "计算机输出" 标签
标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
3.HTML 引文, 引用, 及标签定义
标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。