HTML5定义的网页内容

HTML5结构

<!DOCTYPE html>			//文档类型说明——用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范

<html>				//根标记——用于告知浏览器其自身是一个HTML文档

    <head>			//头部标记——主要用于封装其他位于文档头部的标记，如style、title、meta、link

        <meta charset="utf-8"> <!--声称中文编码-->
		//<meta />标记本身不包含任何内容通过“名称/值”的形式成对的使用其属性可定义页面的相关参数
       	//例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等
        <style type="text/css">
		//<style>标记用于为HTML文档定义样式信息
         <!--定义CSS样式-->  

        </style>

        <title>网站名称</title>

    </head>

    <body>			//主体标记——用于定义HTML文档所要显示的内容，一个HTML文档只能有一个body标记

        网页内容

    </body>

</html>
双标记：
<标记名>内容</标记名>

<标记名>    称为开始标记
</标记名>	 称为结束标记

单标记：
<标记名/>	  指用一个标记符号就能完整地描述某个功能的标记

HTML5的语法

H5语法的宽松性体现在

  1. 标签不区分大小写
  2. 允许属性值不使用引号
有引号：
<input checked="a" type="checkbox"/>
<input readonly="readonly" type="text" />

无引号：
<input checked=a type=checkbox/>
<input readonly=readonly type=text />
  1. 允许部分属性值的属性省略
未省略：
<input checked="checked" type="checkbox"/>
<input readonly="readonly" type="text" />

省略：
<input checked type="checkbox"/>
<input readonly type="text" />

设置页面标题

<title>页面标题名称</title>

用于给网页起名字

定义页面元信息

定义样式信息

style 标记用于为HTML5文档定义样式信息

语法格式：<style 属性="属性值">样式内容<style>

在HTML5中使用该标记，常常定义其属性为type，属性值为text/css，表示使用内嵌式的CSS样式

类比C

HTML

C

作用

< br >

\n

换行

< p>内容< /p>

printf(“内容\n”)

输出内容+换行

< !–内容 -->

/* 内容*/

注释

&nbsp

space

空格

水平线

< hr 属性="属性值"/>

常用属性：

属性名

含义

属性值

align

水平线的对齐方式

left、right、center默认center居中

size

水平线的粗细

像素，默认2px

color

水平线的颜色

单词，十六进制，rgb

width

水平线的宽度

像素值或浏览器窗口的百分比

换行

<br/> 实现强制换行

标题字号

< h1>文本< /h1>

详解：使文本加粗变黑增大，从1–6 字体从大到小

一个页面中只能使用一个h1标记，常常用于网站的Logo部分

粗体

< b> 或者< strong>

b定义粗体文本，strong定义强调文本

<标签名 size=“数字”></标签名>

下划线

< ins> 或者< u>

HTML5不赞成使用u

斜体

< i> 或者< em>

i定义斜体字，em定义强调文本

删除

< s> 或者< del>

HTML5不赞成使用s

图像引用

< img src=“图片URL” >

html5常用标记 html5基础标记_css

图像的替换文本属性alt

若某些原因导致图片没法显示，则可以用alt属性告诉用户该图像的信息

图像的宽高

width/height

通常我们会设置一个，另一个按原图比例显示，若设置两个则可能导致图像变形或失真

路径

  • 相对路径：通常以HTML网页文件为起点，通过层级关系描述目标图像的位置
  • 绝对路径：1.如果图片来源于互联网：鼠标右键点击图片，选择"复制图像链接"
    2.在硬盘上的真正路径，在硬盘中找到，然后拷贝路径或说带有盘符的路径

路径分类

符号

说明

同一文件夹

图像文件位于HTML文件同一级，如：< img src=“图名”>

下一文件夹

/

图像文件位于HTML文件下一级，如：< img src=“/图名”>

上一文件夹

…/

图像文件位于HTML文件上一级，如：< img src=“…/图名”>

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器

源码标记

< meta 文本>

文本内容不会显示在用户界面(可用于标记，例如维护时间)

自动跳转

< meta http-equiv="refresh"content=“数字”;url=“网址”/>

表示在"数字"时间后跳转到"网址"

超链接

< a href="网址"target=“跳转方式”>超链接名称< /a>

target=“跳转方式” 内容如下

‘_blank’

‘_parent’

‘_self’

‘_top’

在新窗口打开

在上一级窗口打开

在当前窗口打开

在整个窗口打开

图片超链接

< a href=“网址”> (未填写超链接名)

< img src=“图片 路径”>< /a>

当然，如果"网址"是一个文件或者压缩包都是可以的(会下载这个文件或压缩包)

如果没有确定链接目标时，可以不填入网址，而当做空链接

锚点链接

点击锚点链接，快速定位到目标内容

<a href="#id名">链接文本</a>

href="#id名"用于指定链接目标的id名称

特殊符号

字符代码

描述

字符

&copy

版权标志

©

&trade

商标标志

™

&lt

小于号

<

&gt

大于号

>

&mdash

下划线

_

&yen

元

¥

&reg

注册标志

®

&nbsp

空格符

&deg

摄氏度

℃

&amp

和号

&

&times/&divide

乘除号

x/÷

颜色

背景颜色

<body bgcolor="颜色">

与CSS样式中的 background-color="颜色" 作用一样

文本

<font color="属性值">文本</font>

对齐方式

<标签名 align=“ 属性值 ”>文本</标签名>

属性值：left(靠左对齐)，right(靠右对齐)，center(居中)

引用外部文件

在<head> 标签中使用<link> 标签可以引用外部文件

语法格式：<link 属性="属性值"/>

属性名

常用属性值

描述

href

URL

指定引用外部文档的地址

rel

stylesheet

指定当前文档与引用外部文档的关系，stylesheet表示定义一个外部样式表

type

text/css或text/JavaScript

引用外部文档的类型分别为CSS样式表或JavaScript脚本