HTML教程-优快云博客

本文链接：https://blog.youkuaiyun.com/huwhois/article/details/78982631

文章目录

HTML简介
- 实例解析
HTML 标签/元素 (HTML tag)
参考文献

HTML简介

HTML,超文本标记语言(HyperText Markup Language,abb：HTML)是一种用于描述网页的一种语言,运行在浏览器上,由浏览器来解析.

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含 HTML 标签及其文本内容

实例解析

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个title</title>
</head>
<body>
 
<h1>这是一个标题</h1>
 
<p>这是一个段落。</p>
 
</body>
</html>

文档声明,有助于浏览器中正确显示网页(声明不区分大小写)
- 常用doctype声明
- HTML5 <!DOCTYPE html>
- HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文档根元素,是页面所有元素的容器(声明除外),有闭标签
head标签(head元素),包含了文档的元(meta)数据
元数据,一般包含文档字符集/关键字等等的声明
标签包含文档主体, 区域是浏览器中显示内容
<h1></h1>一级标题标签,文档内容标签
<p></p> 段落标签,文档内容标签

HTML 标签/元素 (HTML tag)

由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
有部分特标签是自闭合标签(不是无闭合,又称空标签/空元素), 如<img /><br />
元素包含标签及其里面的内容, 如 <p> 这里是内容 </p>
HTML 标签列表(H5标准)

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 属性

属性是 HTML 元素提供的附加信息

属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
属性和属性值对大小写不敏感, 但建议使用小写.
属性值应该始终被包括在引号内, 常用双引号, 可使用单双引号嵌套

<a href="http://www.runoob.com">这是一个链接</a>

HTML 全局属性	[New] : HTML5 新属性
属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditable[New]	规定是否可编辑元素的内容。
contextmenu [New]	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-* [New]	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggable [New]	指定某个元素是否可以拖动
dropzone [New]	指定是否将数据复制，移动，或链接，或删除
hiddenNew hidden	属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheck [New]	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translate [New]	指定是否一个元素的值在页面载入时是否需要翻译

HTML 注释

 xxx为注释内容

HTML 常用结构标签

<h1> ~~ <h6> 标题(Heading)
- <h1> 定义最大的标题,<h6> 定义最小的标题
- 浏览器会自动地在标题的前后添加空行
- 可生成粗体或大号的文本
- 搜索引擎使用标题编制网页结构和内容的索引
<hr /> 水平线
<body> 文档主体
- 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)
<p> 段落
<br /> 换行
- HTML 代码中, 所有连续的空格或空行(连续的空行)都会被算作一个空格
<div> 无特定的含义, 定义文档的区域, 用于文档布局
<span> 无特定的含义, 组合文档中的行内元素

HTML 文本格式化标签

标签	描述
`<b>`	加粗
`<i>`	斜体
`<strong>`	加粗, 现代标签, 加重语气, 更常用
`<em>`	斜体, 现代标签, 着重文字, 更常用
`<small>`	小号字
`<sub>`	下标字
`<sup>`	上标字
`<ins>`	插入字
`<del>`	删除字(横线从中穿过)

HTML “计算机输出” 标签

标签	描述
`<code>`	计算机代码
`<kbd>`	键盘码
`<samp>`	计算机代码样本
`<var>`	变量
`<pre>`	预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
`<abbr>`	缩写
`<address>`	地址
`<bdo>`	文字方向

<blockquote> 长引用
<q> | 短引用语
<cite>| 引用、引证
<dfn> | 一个定义项目

HTML 超链接(链接)

<a href="" target="" id="">XXXXX</a> "XXXXX"可以是一个字,一个词,一段文字,或者是一幅图像等,通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。

语法:<a href="http://www.baidu.com/" target="_blank">baidu</a>
href 属性来描述链接的地址, 默认链接格式：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
- 设置 css 属性text-decoration:none可去掉默认格式
target 属性定义链接文档打开方式
- 默认,当前窗口打开
- “_blank”, 新窗口打开
- “_top”
id 属性用于创建在一个HTML文档书签标记,其他链接可以指向这个标记
```
<a id="tips">tips</a>

<a href="#tips">当前文档跳转tips</a>

<a href="xxx.com/#tips">其他文档跳转tips</a>
```
- 书签是不以任何特殊的方式显示, 在HTML文档中是不显示的, 所以对于读者来说是隐藏的.
几个常见特殊链接:
- 电子邮件链接：<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 发送邮件 </a>
- 电话链接 <a href="tel:123456798 " >打电话叫人</a>

HTML 图像

<img> 标签定义图像, 是一个空标签,源属性(src)的值指向图像的 URL 即 “source”.

* 语法是：`

` * src 属性, 其值指向图像存储位置, url也可为 base64 格式数据--[如何将图片转换base64格式](http://note.youdao.com/noteshare?id=1f08b0717b3656cd4e4eb5df3616a94d&sub=F1F7C212D990453DB0A50F9AD27AB576). * alt 属性, 用来为图像定义一串预备的可替换的文本, 当图像无法载入时(网络情况不好或资源已不存在)替代文本会显示在图像区域(一个破碎的图片) 替换文本属性的值是用户定义的. * width height , 用于设置图像宽与高, 默认单位 px(像素), - 指定图像的高度和宽度的一个很好的习惯. 如果图像指定了高度宽度, 页面加载时就会保留指定的尺寸. 如果没有指定图片的大小, 加载页面时有可能会破坏HTML页面的整体布局. - html 图像资源是要外部加载的, 当网页文档图片过多或图片过大时, 加载时间会变的很长, 所以: 慎用图片. * ` ` 是几个少数 inline-block 元素之一, 既可以指定宽高, 又在一行内排列, 行内位置默认为 "bottom", 底部对齐, 可在 ==[css](http://note.youdao.com/noteshare?id=f82bea3b0e35c68c133dbdf330f2dc1d&sub=E96106A9702540EE81D8152A6781E4D2)== 中通过对 'align' 属性设置来指定: - align:bottom; 底部对齐 - align:middle; 居中对齐 - align:top; 顶部对齐 - float 特性可以使图像漂浮在指定方向(css中介绍) * 图像映射 ``` Planets

```

HTML 列表

HTML 列表分为有序、无序和自定义列表
实例

<ul>
  <li>坚果</li>
  <li>水果
    <ul>
      <li>浆果类</li>
      <li>核果类
        <ol>
          <li>桃</li>
          <li>李子</li>
        </ol>
      </li>
    </ul>
  </li>
  <li>蔬菜</li>
</ul>

浏览器中显示:

坚果
水果
- 浆果类
- 核果类
  1. 桃
  2. 李子
蔬菜

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表
`<dt>`	自定义列表项目
`<dd>`	定义自定列表项的描述

<li> 在ul, ol中都是表示列表项的.
<ul> 无序列表是使用粗体圆点（典型的小黑圆圈）进行标记的项目列表. ul标记类型可由 “type” 指定, 默认 type=“disc”.
- type=“disc”: ●
- type=“circle”: ○
- type=“square”: ■
<ol> 有序列表是使用 “阿拉伯数字/罗马数字/英文字母” 等可表序号的元素进行标记的项目列表, 标记类型可由 “type” 指定, 默认阿拉伯数字.
- 不设置 type: 阿拉伯数字(1,2,3…)
- type=“A”: 大写字母(A,B,C…)
- type=“a”: 小写写字母(a,b,c…)
- type=“I”: 大写罗马数字(Ⅰ,Ⅱ,Ⅲ…)
- type=“i”: 小写罗马数字(ⅰ,ⅱ,ⅲ…)
自定义列表中:
- <dl> 列表开始/结束标签
- <dt> 自定义列表项
- <dd> 自定义列表项的定义(描述)

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

HTML 表格

<table> 标签定义表格. <tr> 标签定义表格行, <td> 标签定义单元格. 字母 td 指表格数据(table data), 即数据单元格内容, 可以包含文本、图片、列表、段落、表单、水平线、表格等等.

表格实例

<table border="1">
    <caption> example </caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下:

example
Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

border 边框属性, 一般设置边框线条虚实,粗细,颜色等等特性(css中详解)
如果不定义边框属性, 表格将不显示边框, 如下.

  Header 1	    Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

cellspacing 属性, 单元格之间的边距,默认有值,一般设为0; cellpadding 属性, 单元格内距,默认有值,一般设为0
colspan, 横向合并多行; rowspan, 纵向合并多列;注意删除队应行列多余的 <td> 以保证表格完整性
<th> 标签定义表头, 大多数浏览器会把表头显示为粗体居中的文本
<caption> 标签定义表格标题
表格内亦可嵌套其他标签(元素)

HTML 表单(form)

<form action="" method="post" enctype="multipart/form-data>

表单用于收集用户输入, 包含不同类型的 input 元素、复选框、单选按钮、提交按钮等等

action 属性, 设置表单提交地址(url), 默认: 当前页面
method 属性, 设置表单提交HTTP 方法, 默认: get 提交
enctype 属性, 设置表单的MIME编码.默认: application/x-www-form-urlencoded, 不能用于文件上传;设置enctype="multipart/form-data",即可让表单传递文件数据.
disabled 属性, 限制该表单元素不可用
name 属性, 设置表单元素提交的name, 不设置name的元素无法将值提交到处理页面

标签	描述
	供用户输入的表单
	输入域
	文本域 (一个多行的输入控件)
	用来包裹input和对应文字,起到点击文字选中input的效果
	使用外框包裹一组相关的表单元素
	元素的标题
	下拉选项列表(multiple允许多选)
	选项组
	下拉列表中的选项(selected默认选中)
	点击按钮
	指定一个预先定义的输入控件选项列表
	表单的密钥对生成器字段
	计算结果

元素根据不同的 type 属性有很多不同形态

单行文本框

type 属性	input形态
text	单行文本框
password	密码框
radio	单选按钮 //checked默认选中,name一致限定单选
checkbox	复选框 //checked默认选中
file	图片等文件上传
hidden	隐藏表单
submit	提交按钮
reset	重置按钮
button	按钮

这些都是行内元素,如要换行记得加<br />
多个 radio 使用相同 name 属性, 可以实现单选唯一按钮
多个同类 checkbox 使用 name=“check[]” 数组命名, 可以实现同类复选框以数组形式提交数据

表单发送邮件(弹出系统邮件处理程序)

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

HTML 块级元素与内联元素(行级)

大多数 HTML 元素被定义为块级元素或内联元素, 它们是完成页面布局的重要组成部分

块级元素: 在浏览器显示时, 通常会以新行来开始(和结束). 常见块级元素:<div> <h1>~~<h6> <p> <ul> <li> <ol> <dl> <dt> <dd> <table> <tr> <form>
内联元素: 内联元素在显示时通常不会以新行开始. 常见内联元素: <a> <b> <i> <span> <strong> <em> <img> <form> <input> <select> <option> <textarea> <label> <td> <th> <font>(H5不支持)
块级元素和内联元素可以各自嵌套使用,也可以相互嵌套, 注意嵌套的顺序(对应好闭合标签的位置)
常见空元素:<br /> <hr />  <meta /> <link />