Justin-刘清政的博客

python/前端/2-HTML5常用标签

2020-11-03

1、HTML文档结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>

</body>
</html>
  1. 声明为HTML5文档。
  2. 、是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
  3. 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
  4. 定义了网页标题,在浏览器标题栏显示。
  5. 、之间的文本是可见的网页主体内容。

*注意:对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 。*

1、 文档声明

你可使用此声明在 Internet Explorer 6 及以后版本中切换为严格的标准兼容模式。

1
2
3
4
5
6
7
# HTML 5
<!DOCTYPE html>
# HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
# XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2、主体结构标签

  • <html></html> 此元素可告知浏览器其自身是一个 HTML 文档。
  • <head></head> 用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
  • <body></doby> 定义文档的主体

几个很重要的属性:

  • id:定义标签的唯一ID,HTML文档树中唯一
  • class:为html元素定义一个或多个类名(classname)(CSS样式类名)
  • style:规定元素的行内样式(CSS样式)

3、HEAD头部标签

  • <title></title> 定义文档标题
  • <base/> 标签为页面上的所有链接规定默认地址或默认目标
1
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。标签永远位于 head 元素内部。
  • <link></link> 标签定义文档与外部资源的关系。
1
2
<link rel="stylesheet" type="text/css"  href="style.css"></link>
<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
  • <style></style>签用于为 HTML 文档定义样式信息。

  • <script></script> 标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

4、meta元信息

  • 元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
  • 标签位于文档的头部,不包含任何内容。
  • 提供的信息是用户不可见的。

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

1
2
3
4
5
6
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址,注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

1
2
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

5 Body内常用标签

5.1 基本标签(块级标签和内联标签)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--
b,i,u,s,p,h1--h6,br,hr
-->

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

5.2 div标签和span标签

div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别

1
2
3
4
5
6
7
8
9
10
11
12
# 块级标签:独占一行(h1~h6	p div)
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
3 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
4 如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
# 行内标签:自身文本多大就占多大(i u s b span)
1 行内标签不能嵌套块儿级标签 可以嵌套行内标签

# 总结:
1 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
2 但是p标签只能嵌套行内标签,不能包含块级标签,p标签也不能包含p标签(HTML书写规范)
3 内联元素不能包含块级元素,它只能包含其它内联元素

div和span

1
2
3
4
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签

5.3 img标签

1
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

5.4 a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

1
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址可以有几种类型:

  • 绝对URL - 指向另一个站点(比如 href=”http://www.jd.com)
  • 相对URL - 指当前站点中确切的路径(href=”index.htm”)
  • 锚URL - 指向页面中的锚(href=”#top”)

target:

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

5.5 列表

1.无序列表

1
2
3
4
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表

1
2
3
4
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

1
2
3
4
5
6
7
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

5.6 表格

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

5.7 form表单

功能

表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

表单元素

基本概念:
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
from django.conf.urls import url
from django.shortcuts import HttpResponse

def upload(request):
print("request.GET:", request.GET)
print("request.POST:", request.POST)

if request.FILES:
filename = request.FILES["file"].name
with open(filename, 'wb') as f:
for chunk in request.FILES['file'].chunks():
f.write(chunk)
return HttpResponse('上传成功')
return HttpResponse("收到了!")

urlpatterns = [
url(r'^upload/', upload),
]

5.8 input

元素会根据不同的 type 属性,变化为多种形态。

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text” />
password 密码输入框
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮
reset 重置按钮
button 普通按钮
hidden 隐藏输入框
file 文本选择框

属性说明:

  • name:表单提交时的“键”,注意和id的区别
  • value:表单提交时对应项的值
    • type=”button”, “reset”, “submit”时,为按钮上显示的文本年内容
    • type=”text”,”password”,”hidden”时,为输入框的初始值
    • type=”checkbox”, “radio”, “file”,为输入相关联的值
  • checked:radio和checkbox默认被选中的项
  • readonly:text和password设置只读
  • disabled:所有input均适用

5.9 select标签

1
2
3
4
5
6
7
8
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>

属性说明:

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

5.10 label标签

定义:

  1. label 元素不会向用户呈现任何特殊效果。
1
2
3
4
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>

5.11 textarea多行文本

1
2
3
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>

属性说明:

  • name:名称
  • rows:行数
  • cols:列数
  • disabled:禁用

6 其他了解

6.1 格式排版标签

  • <br/> 换行标签,完成文字的紧凑显示。可以使用连续多个<br/>标签来换行
  • <hr/> 水平分割线标签,用于段落与段落之间的分割
  • <p></p>段落标签,里面可以加入文字,列表,表格等,可以

    使用

  • <pre></pre>按原文显示标签,可以把原文件中的空格,回车,换行,tab键表现出来
  • <hn></hn> 标题字标签,n为1-6,定义六级标题,而且会自动换行插入一个空行
  • <div></div> 没有任何语义的标签

6.2 文本标签

  • <em></em> 表示强调,通常为斜体字
  • <strong></strong> 表示强调(语气更强),通常为粗体字
  • <del></del> 标签定义文档中已删除的文本。
  • <ins></ins> 标签定义已经被插入文档中的文本
  • <sub></sub> 文字下标字体标签
  • <sup></sup> 文字上标字体标签
  • <mark></mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面
  • <ruby></ruby> H5新增 标签定义 ruby 注释(中文注音或字符) 在东亚使用,显示的是东亚字符的发音。
  • <rt></rt> H5新增 标签定义字符(中文注音或字符)的解释或发音
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--一下文本标签  作为了解-->
<cite> 用于引证、举例、(标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题)通常为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来,对它们加以强调的极少情况下,才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性 (IE6以上)
<bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl
<var> 定义变量。您可以将此标签与 <pre><code> 标签配合使用。
<small> 标签定义小型文本(和旁注)
<b> 粗体字标签 根据 HTML 5 的规范,<b> 标签应该做为最后的选择,只有在没有其他标记比较合适时才使用它。
<i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u> 下划线字体标签 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线,用户会把它混淆为一个超链接。
<q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素
<font> H5已删除 字体标签,可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> H5已删除 打字机文字
<big> H5已删除 大型字体标签
<strike> H5已删除 添加删除线
<acronym> H5已删除 首字母缩写 请使用<abbr>代替
<bdi> H5新增 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用)
<mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面
<meter> H5新增 定义预定义范围的度量
<progress> H5新增 标签标示任务的进度(进程)
<time> H5新增 定义时间和日期
<wbr> H5新增 规定在文本中的何处适合添加换行符。Word Break Opportunity
使用支付宝打赏
使用微信打赏

点击上方按钮,请我喝杯咖啡!

扫描二维码,分享此文章