HTML语义化标记

最新推荐文章于 2022-01-09 13:13:38 发布

chiza4954

最新推荐文章于 2022-01-09 13:13:38 发布

阅读量211

点赞数

文章标签：人工智能

原文链接：https://my.oschina.net/u/3240534/blog/831070

版权

HTML语义化

一、HTML基本标记

头部标记——<head></head>

标题标记——<title></title>

元信息标记——<meta>

<meta charset="UTF-8">
<meta name="keywords" content="输入具体的关键字">
<meta name="description" content="设置页面说明">
<meta name="generator" content="编辑软件的名称">
<meta name="author" content="作者的姓名">
<meta http-equiv="content-type" content="text/html;charset=字符集类型"/>
<meta http-equiv="refresh" content="跳转的时间；URL=跳转到的地址">

主体标记——<body></body>

页面注释标记——

二、文字与段落标记

标题字标记

<h1>标题字</h1>

<h2>标题字</h2>

<h3>标题字</h3>

<h4>标题字</h4>

<h5>标题字</h5>

<h6>标题字</h6>

文本格式化标记：

粗体标记——<b></b>

斜体标记——<i></i>、<em></em>、<cite></cite>

上标标记——<sup></sup>

下标标记——<sub></sub>

大字号标记——<big></big>

小字号标记——<small></small>

下画线标记——<u></u>

段落标记

段落标记——<p></p>

换行标记——<br>

不换行标记——<nobr></nobr>

水平线标记

水平线标记——<hr>

其它标记

插入空格——&nbsp

插入特殊符号：

<——&lt

>——&gt

&——&amp

“——&quot

三、使用图像

图像格式——GIF、JPEG、PNG

插入图像

<img src="images/car.jpg" alt="BMW"/>

图像的超链接

<a href="#"><img src="images/car.jpg" alt="BMW"/></a>

图像的热区链接

<img src="图像地址" usemap="映射图像名称">

<map name="映射图像名称">

    <area shape="热区形状" coords="热区坐标" href="链接地址">

</map>

四、使用列表

有序列表

<ol>

    <li>有序列表项</li>

    <li>有序列表项</li>

    <li>有序列表项</li>

    <li>有序列表项</li>

    <li>有序列表项</li>

</ol>

序号类型——type (1、a、A、i、Ι)

有序列表的起始数值——start

无序列表

<ul>

    <li>无序列表项</li>

    <li>无序列表项</li>

    <li>无序列表项</li>

    <li>无序列表项</li>

    <li>无序列表项</li>

</ul>

序号类型——type (Disc、circle、square)

定义列表

<dl>

    <dt>定义条件1</dt>

    <dd>定义描述1</dd>

    <dt>定义条件2</dt>

    <dd>定义描述2</dd>

    <dt>定义条件3</dt>

    <dd>定义描述3</dd>

    <dt>定义条件4</dt>

    <dd>定义描述4</dd>

    <dt>定义条件5</dt>

    <dd>定义描述5</dd>

</dl>

目录列表

<dir>

    <li>目录列表项</li>

    <li>目录列表项</li>

    <li>目录列表项</li>

    <li>目录列表项</li>

    <li>目录列表项</li>

</dir>

菜单列表

<menu>

    <li>菜单列表项</li>

    <li>菜单列表项</li>

    <li>菜单列表项</li>

    <li>菜单列表项</li>

    <li>菜单列表项</li>

</menu>

五、使用表格

常用表格标记

表格标记——<table></table>

行标记——<tr></tr>

单元格标记——<td></td>

表格标题标记——<caption></caption>

表头——<th></th>

水平跨度——colspan

垂直跨度——rowspan

对齐方式——align、valign

表格结构

表首标记——<thead></thead>

表格主体标记——<tbody></tbody>

表格表尾标记——<tfoot></tfoot>

七、建立超连接

内部链接

与自身网站页面有关的链接称为内部链接

<a href="链接地址" target="_blank">...</a>

链接的目标窗口——target(_self、_blank、_top、_parent)

锚点链接

创建锚点

<a name="锚点的名称">...</a>

链接同一页面中的锚点

<a href="#锚点的名称">...</a>

链接到其他页面中的锚点

外部链接

链接到外部网站

<a href="http://.....">....</a>

链接到E-mail

<a href="mailTo:邮件地址">...</a>

链接到FTP

<a href="ftp://ftp地址">...</a>

链接到Telenet

<a href="telnet://地址">...</a>

下载文件

<a href="文件地址">...</a>

八、使用表单

表单标记

表单标记——<form></form>

提交表单——action

表单名称——name

传送方法——method

表单数据被传送到action属性指定的URL，然后这个新URL被送到处理程序（get方法）

表单数据被包含在表单主体中，然后被送到处理程序（post方法）

编码方式——enctype

默认：application/x-www-form-urlencoded

上传文件表单：multipart/form-data

目标显示方式——target(_self、_blank、_top、_parent)

<form action="表单的处理程序" name="表单名称" method="post" enctype="application/x-www-form-urlencoded" target="_self">.....</form>

插入表单对象

文字字段——text

密码域——password

<form action="表单处理程序" method="post" name="form-1" target="_blank">

    <input name="控件名称" type="表单元素" value="文字字段的默认取值" size="控件的长度" maxlength="设置文本框最多可心输入的字符数"/>

</form>

单选按钮——radio

复选框——checkbox

<form action="表单处理程序" method="post" name="form-2" target="_blank">

    <input name="控件名称" type="表单元素" value="按钮的取值" checked/>

</form>

普通铵钮——button

提交按钮——submit

重置按钮——reset

<form action="表单处理程序" method="post" name="form-3" target="_blank">

    <input name="控件名称" type="表单元素" value="按钮的取值"/>

</form>

图像域——image

<input name=”图像域名称" type="image" src="图像路径"/>

文件域——file

<input name="文件域名称" type="file" size="控件的长度" maxlength="最长字符数"/>

隐藏域——hidden

<input name="隐藏域名称" type="hidden" value="隐藏域的取值" />
菜单和列表

下拉菜单——<select></select>、<option></option>

默认项——selected

<form action="index.html" method="post" name="form-01">

    地区：

    <select name="select">

        <option value="北京" selected="selected">北京</option>

        <option value="上海">上海</option>

        <option value="天津">天津</option>

        <option value="山东">山东</option>

        <option value="湖北">湖北</option>

    </select>

</form>

列表项——<select></select>、<option></option>

默认项——selected

页面显示的最多列表数——size

多项列表——multiple

<form action="index.html" method="post" name="form-02">

    地区：

    <select name="select" size="1" multiple="multiple">

        <option value="北京" selected="selected">北京</option>

        <option value="上海">上海</option>

        <option value="天津">天津</option>

        <option value="山东">山东</option>

        <option value="湖北">湖北</option>

    </select>

</form>

文本域标记

文本域标记——textarea

<form action="index.html" method="post" name="form-03">

    留言：

    <textarea name="文本域名称" cols="列数" rows="行数"></textarea>

</form

Id标记

该标记主要用于标示一个惟一的元素。

<id=”元素标识名”>

九、添加多媒体

插入音频和视频

视频——<video></video>

音频——<audio></audio>

属性——src、controls、autoplay

设置背景音乐

背景音乐——<bgsound>

属性——src、loop

设置滚动效果

滚动标记——<marquee>

属性——direction、behavior、scrollamount、scrolldelay、loop、hspace/vspace

十、浮动框架

浮动框架标记——<iframe></iframe>

页面源文件——src

宽与高——width、height

对齐方式——align

浮动框架滚动条显示属性——scrolling(auto、yes、no)

十一、新增语义化标记

片段类元素

标记头部区域——<header></header>

标记尾部区域——<footer></footer>

导航类辅助内容——<nav></nav>

独立的文章内容——<article></article>

相关内容或引文——<aside></aside>

Web页面中的一块区域——<section></section>

HTML5元素分类

内嵌——向文档中添加其他类型的元素

流——在文档和应用中使用的元素

标题——段落标题

交互——与用户交互的内容

元数据——通常出现在页面的head中，设置页面其他部分的表现和行为

短语——文本和文本标记元素

片段——用于定义页面片段的元素

转载于:https://my.oschina.net/u/3240534/blog/831070

chiza4954

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫