HTML 基础（五）
一、列表
- 有序列表
- 无序列表
- 自定义列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点进行标记
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
显示如下：
自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
显示如下：
其他类型的有序列表
大写字母列表
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
显示如下：
小写字母列表：
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
显示如下：
罗马数字列表
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
显示如下：
嵌套列表
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
显示如下：
二、区块
区块元素：
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
内联元素：
内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>。
<div> 元素：
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<span> 元素：
<span> 元素是内联元素，可用作文本的容器
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
示例如下：
将文档区域显示为蓝色：
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
显示如下：
使用 <span> 元素对文本中的一部分进行着色：
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
显示如下：
三、布局
网站布局：
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
注意：虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的，表格不是布局工具。
使用 <div> 元素布局：
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © cnblogs.com/yytest/</div> </div>
显示如下：
四、表单
表单用于收集不同类型的用户输入，用 <form> 来设置。
<form>
.
input 元素
.
</form>
多数情况下被用到的表单标签是输入标签 <input> ，输入类型是由类型属性 type 定义的
文本域
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
效果如下：
密码字段
密码字段通过标签<input type="password"> 来定义
密码字段中的字符是隐藏的(显示为星号或圆圈
<form>
Password: <input type="password" name="pwd">
</form>
效果如下：
单选按钮
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
显示如下：
复选框
<input type="checkbox"> 定义了复选框，用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
显示如下：
提交按钮
<input type="submit"> 定义了提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
显示如下：
如果在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。
带边框的表单
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
显示如下：
发送邮件：
<body>
<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>
</body>
显示如下：
五、框架
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
iframe 语法：
<iframe src="URL"></iframe>
其中 URL 指向不同的网页
设置高度与宽度
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
显示如下：
移除边框
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">
显示如下：
使用 iframe 来显示目标链接页面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
显示如下：
点击链接：
四、颜色
HTML 颜色是由红色、绿色、蓝色混合而成。由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
rgb(0,0,0) 是黑色，rgb(255,255,255) 是白色。
HTML 基础（五）的更多相关文章
- Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...
- C#_02.14_基础五_.NET类
C#_02.14_基础五_.NET类 一.类实例: 我们前面说过类是一个模板,我们通过类创建一个又一个的实例,通常情况下类当中的变量是每一个实例都各有一份的,互相不影响,而静态字段是除外的,静态字段是 ...
- day 70 Django基础五之django模型层(二)多表操作
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...
- day 69 Django基础五之django模型层(一)单表操作
Django基础五之django模型层(一)单表操作 本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现 ...
- day 57 Django基础五之django模型层之关联管理器
Django基础五之django模型层之关联管理器 class RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况 ...
- day 56 Django基础五之django模型层(二)多表操作
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...
- day 55 Django基础五之django模型层(一)单表操作
Django基础五之django模型层(一)单表操作 本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它 ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
- 爬虫基础(五)-----scrapy框架简介
---------------------------------------------------摆脱穷人思维 <五> :拓展自己的视野,适当做一些眼前''无用''的事情,防止进入只关 ...
- Python基础(五) python装饰器使用
这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 # -*- coding:gbk -*- '''示例1: 最简单的函数,表示调用了两次 ...
随机推荐
- 7-41 jmu-python-最佳身高 (10 分)
最佳的情侣身高差遵循着一个公式:(女方的身高)×1.09 =(男方的身高).下面就请你写个程序,为任意一位用户计算他/她的情侣的最佳身高. 输入格式: 输入第一行给出正整数N(≤10),为前来查询的用 ...
- Vue 项目分环境打包
我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 packa ...
- EventEmitter：从命令式 JavaScript class 到声明函数式的华丽转身
新书终于截稿,今天稍有空闲,为大家奉献一篇关于 JavaScript 语言风格的文章,主角是函数声明式. 灵活的 JavaScript 及其 multiparadigm 相信"函数式&quo ...
- 前端javascript知识（二）
documen.write和 innerHTML的区别 document.write只能重绘整个页面 innerHTML可以重绘页面的一部分 浏览器检测通过什么? (1) navigator.user ...
- Apache Druid 的集群设计与工作流程
导读:本文将描述 Apache Druid 的基本集群架构,说明架构中各进程的作用.并从数据写入和数据查询两个角度来说明 Druid 架构的工作流程. 关注公众号 MageByte,设置星标点「在看」 ...
- Java实现生产者消费者（一）
问题描述:生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,生产者往存储空间中添加产品,消费者从存储空间中取走产品,当存储空间为空时,消费者阻塞,当存储空间满时 ...
- angular root在css和less的写法
背景:angular7项目,angular cli创建了一个模板 新建了一个common.css 本身modle会有一个专属的less文件 写样式 父组件下的子组件样式修改 什么情况下用:root ...
- 逐浪web无障碍与国际化以及全民族语言支持白皮书
北京时间2019年5月10日,领先的门户网站与WEB内核服务厂商--上海Zoomla!逐浪CMS团队发布其年度重榜产品:逐浪CMS全民族语言与国际版,体验站点:http://demo2.z01.com ...
- django使用户名和邮箱都能登录
为了能够让邮箱也能登录,需要重新定义认证功能,需要把email添加成username用于认证 定义的class继承ModelBackend,使用Q方法并集 然后在settings.py里面添加 这样既 ...
- 第16个算法 - leetcode-二叉树的层次遍历
二叉树的层次遍历 参考:https://www.cnblogs.com/patatoforsyj/p/9496127.html 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有 ...