HTML(五):总结

1.HTML基本结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
  • <!DOCTYPE html>
    • <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
  • <html>
    • 定义整个HTML文件的内容;所有HTML标签都应该放到这里面。
  • <head>
    • 定义HTML文件的头部,它是所有头部元素的容器。在head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
  • <title>
    • title元素仅可在head元素内使用。位于title开闭标签之内的文本都会在浏览器的标题栏和 Microsoft Windows 的任务栏上显示。对于 Web 页,“Internet Explorer”会被自动追加到标题后。而在 HTML 应用程序(HTA)中,仅会显示指定的标题。
  • <body>
    • body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。

2.标题

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

标题(Heading)是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

3.文本格式化

<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

文本格式化用于定义具有特殊格式的文本,让文本具有不同的表现形式和语义。

4.图像

<img src="URL" width="100" height="100" alt="替代文字" />

<img>标签用于定义图像,通过src属性设置图片的地址,width和height分别设置图像的宽和高,当只设置宽或高时,图像将被等比例缩放,alt属性设置替代文字,当图像无法加载出来时,替代文字将出现在图像原来的位置上以做说明。

5.图像热区

<img src="URL" usemap="#mapname" />
<map name="mapname">
    <area shape="形状" coords="坐标值" href="URL" />
</map>

当页面中引入了一张图片时,可通过设置图像热区定义图像的区域链接。设置图像热区需要将img标签的usemap属性值和map标签的name属性值设置为相同的值,即可关联两个标签,关联之后在map标签里面设置area标签定义图像的热区区域,area标签可设置多个,其中shape属性可设置热区形状,coords可设置热区的各个坐标值,href可设置热区链接。

6.无序列表

<ul type="disc">
  <li>实心圆</li>
</ul>
<ul type="circle">
  <li>空心圆</li>
</ul>
<ul type="square">
  <li>方形</li>
</ul>

<ul> 元素代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。通过设置<ul>元素的type属性来改变无序列表头部的形式。

7.有序列表

<ol start="5">
    <li>默认形式,设置start为5</li>
    <li>默认形式,设置start为5</li>
</ol>
<ol type="a">
    <li>设置type为小写英文字母</li>
    <li>设置type为小写英文字母</li>
</ol>
<ol type="A">
    <li>设置type为大写英文字母</li>
    <li>设置type为大写英文字母</li>
</ol>
<ol type="I">
    <li>设置type为罗马数字</li>
    <li>设置type为罗马数字</li>
</ol>

<ol> 元素表示多个有序列表项。通常情况下,有序列表中显示在项前面的编号(a preceding numbering),可以是任何形式的,如数字,字母或罗马数字甚至简单的点。<ol>同样可以通过设置type属性来改变头部序号标记的形式。同时可以设置start属性来指定排序的起点数值。

8.定义列表

<dl>
    <dt>Coffee</dt>
        <dd>- black hot drink</dd>
    <dt>Milk</dt>
        <dd>- white cold drink</dd>
</dl>

<dl> 元素是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。也可以是用户自定义的数据列表。

9.表格

<table border="1" cellpadding="5" cellspacing="5">
    <tbody>
        <tr>
            <td rowspan="2">单元格1</td>
            <td colspan="2">单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </tbody>
</table>

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。标签 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。同时标签<th>可以定义表头。

<table>标签可设置的各个属性:

10.内嵌框架

<body>
    <iframe src="http://www.baidu.com/" width="1000" height="400" scrolling="auto"></iframe>
</body>

HTML中的<iframe>标签(又称内联框架元素)表示了一个嵌套的浏览上下文(browsing context),实际上是用来在当前页面中内嵌另一个HTML页面。可通过属性设置框架的宽、高、是否显示滚动条和边框。对应的属性名分别为:width、height、scrolling、frameborder。其中scrolling可设置的值有三个:yes(始终显示滚动条)、no(从不显示滚动条)、auto(默认值,在需要的情况下出现滚动条)。

11.表单

<form name="form" action="URL" method="get">
    用户名:<input type="text" name="name" />
    密 码:<input type="password" name="password" />
</form>

<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。form标签的action属性规定当提交表单时向何处发送表单数据,method规定用于发送 form-data 的 HTTP 方法。

12.input

<form>
    <input type="text">
    <input type="password">
    <input type="button">
    <input type="hidden">
    <input type="file">
    <input type="image">
    <input type="submit">
</form>

<input> 标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变,取决于 type 属性。

参考: HTML <input> 标签   input - HTML(超文本标记语言) | MDN

时间: 2024-09-29 00:53:32

HTML(五):总结的相关文章

聚焦新相亲时代:女孩在京有五六套房哭着想嫁富2代

2017-09-20 07:31:00 来源: 中国青年报(北京)        举报 6984 分享到: 易信 微信 QQ空间 微博 更多 用微信扫码二维码 分享至好友和朋友圈 T + - (原标题:中青报聚焦新相亲时代:2亿人及其背后家庭组成的"擂台") 石家庄某相亲角.视觉中国 资料 平均算下来,每一分钟里,国内有22对新人拿着户口本走向民政局,进入婚姻生活:同时,8对夫妻在另外一个窗口签下离婚协议. 根据民政部公布的数字,中国的结婚率和离婚率曲线渐渐逼近一个闭合的大于号.婚姻的

今年黑科技趋势最具的五个看点

CES 2017年人工智能引爆全球最火黑科技盛会 CES 2017 1月5日-8日在美国拉斯维加斯举行,数千家企业.几十万人将参与到这次科技的狂欢秀中.本文为埃森哲技术总监带来的关于本年度CES 的5大看点.他认为:人工智能将统治本年度的CES,变得无处不在.另外,他还分析了智能助理.物联网安全.虚拟现实等多个领域在本届大会上的表现. 2017 年国际消费电子展(CES 2017)将于1月5号拉开帷幕,在这个荒漠之城举办为期5天的展会,保守估计会吸引超过177000名参会者. 这也是一年之中唯一

(十五)PL/SQL事务

数据库事务是一个工作的原子单元,其可以由一个或多个相关的SQL语句组成.所谓的原子性就是数据库的修改所带来的构成事务的SQL语句可以集体被提交,即永久到数据库或从数据库中(撤消)回滚.一个成功执行的SQL语句和提交的事务不一样.即使一个SQL语句执行成功,除非包含该语句的事务被提交,但也可以回滚和声明(S)的所有更改可以撤消. 一.开始事务事务都有开始和结束.事务开始时有下列事件之一:  连接到数据库后执行的第一个SQL语句.  在事务完成之后发出每一个新的SQL语句完成. 二.提交事务事务是通

每周进度条(第十五周)

第十五周进度条   第十五周 所花时间 1h 代码量(行)  100 博客量(篇)  1 学到的知识 对图片的处理 在Android程序中加入图片

201405644 嵌入式程序设计第五周学习总结

嵌入式课程设计第五周学习总结 标准 I/O 编程 标准 I/O 提供流缓冲的目的是尽可能减少使用 read()和 write()等系统调用的数量.标准 I/O 提供了 3 种类型 的缓冲存储.全缓冲.行缓冲.不带缓冲. 打开文件 打开文件有三个标准函数,分别为:fopen().fdopen()和 freopen().其中 fopen()可以指定打开文件的路径和模式,fdopen()可以指定打开的文件描述符和模式,而 freopen() 除可指定打开的文件.模式外,还可指定特定的 I/O 流. f

第五次作业+164+张增进

开发人员代码:http://www.cnblogs.com/wangkunhuang/p/6794401.html 1)被测项目界面. 2)测试用例设计表 等价类 输入条件 有效等价类 编号 无效等价类 编号 年 1912≤year≤2050 ① year<1912 ② Year>2050 ③ 非数字 月 Month= 1,3,5,7,8,10,12 ④ Month<1 ⑤ Month= 4,6,9,11 month>12 ⑥ Month= 2 非数字 日 1≤ day ≤31 ⑦

五分钟上手Git

团队开发中.遵循一个合理.清晰的Git使用流程.是非常重要的.否则,每一个人都提交一堆杂乱无章的commit,项目非常快就会变得难以协调和维护.以下是ThoughtBot 的Git使用规范流程.我从中学到了非常多,推荐你也这样使用Git. 第一步:新建分支 首先,每次开发新功能,都应该新建一个单独的分支(这方面能够參考<Git分支管理策略>). # 获取主干最新代码 $ git checkout master $ git pull # 新建一个开发分支myfeature $ git check

linux中五笔的安装

下载五笔安装包 链接: http://pan.baidu.com/s/1geAtlab 密码: 5z8z 进入解压的路径使用下面命令将文件拷贝到指定目录 cp vissible.db /usr/share/ibus-table/tables             cp vissible.gif /usr/share/ibus-table/icon 重启计算机 在区域与语言中选择Chinese再选择Chinese(vissible)

“黑五”的本土化难题,如何定位、立足?

黑五,或者黑色星期五,对大部分中国人来说都会觉得很陌生,但这个在欧美如同双十一的购物节日已经开始被一部分中国消费者所接受并且积极的进行消费购物.虽然在国内黑五还无法与双十一相提并论,但随着跨境电商的兴起,黑五的本土化氛围正越来越浓. "黑五"关注度持续升温 从特定人群向多元化.年轻化转变 从市场层面的变化来看,这两年跨境电商的持续发展为黑五提供了基本的市场促销环境,虽然国内的黑五发展程度尚不足以与双十一相提并论,但对跨境电商企业而言,这几年已经逐渐向市场传达到了"黑五&quo

QCustomplot使用分享(五) 布局

一.历史对比 关于QCPLayoutElement这个元素的讲解之前,我想先对1.3.2release版本和2.0.0beta版本的该元素做以简单的对比介绍,首先,1.3.2release版本时,鼠标单击时,如果按下的位置是一个布局元素,那么QCustomPlot首先会把这个事件回调给该被点击的元素,并且mouse系列的方法都是这样传递给QCPLayoutElement对象,该布局元素的声明会像这样QPointer<QCPLayoutElement> mMouseEventElement:但是