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: 最简单的函数,表示调用了两次 ...
随机推荐
- MySQL集群MGR架构for多主模式
本文转载自: https://www.93bok.com MGR简介 MySQL Group Replication(简称MGR)是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决 ...
- Git 相关问题分享，git reset与git revert的区别?
1.如果我在git add 后想要撤销操作,该怎么做? 使用 git rm --cache [文件名/ *] 或者 git reset HEAD, 为什么这个命令也会有效果呢,实际上reset将 HE ...
- 微信小程序转化为uni-app项目
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及其的符合我的需求.那么问题 ...
- 论JS函数传参时:值传递与引用传递的区别
什么是值传递:值传递是指在调用函数时将实际参数(实参)复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数. 值传递的总结:也就是说,将实参复制到函数中的这个过程叫值传递 什么是 ...
- iOS开发 - 设立UIButton的Image为Aspect Fit
Button setImage设置的图片默认是会拉伸缩放的,如果我想要Aspect Fit的效果,要如何做呢?一开始我想到了用contentMode属性,很可惜不起作用.后来我发现button有一个i ...
- ggplot2（3） 语法突破
3.1 简介 图形图层语法基于Wilkinson的图形语法,并在其基础上添加了许多新功能,使得图形更有表现力,并能完美地嵌入到R的环境中. 图形图层语法使得图形的重复更新变得简单——每次只更新一个特征 ...
- 转：标签中的href如何调用js
在HTML中,<a>标签的href属性用于指定超链接的目标的URL.在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动 ...
- 聊聊order by rand()
总结写在前面: 1. 不建议直接使用order by rand(),原因是执行代价比较大 2. 介绍了内存临时表,对于内存临时表,由于回表不需要访问磁盘,所以往往是用rowid排序,可以减少参与排序字 ...
- 解决QQ“抱歉，无法发起临时会话，您可以 添加对方为好友以发送消息”
很多网站,目前无法发起临时会话,自己在找网上找到教程,特分享给大家.自从2014年3月1日开始,网站上放置QQ客服代码的网站,在点击联系QQ时,以前可以正常发起临时会话的,现在提示:“抱歉,无法发起临 ...
- MQTT抓包分析
1. 概述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(Publish/Subscribe)模式的轻量级通讯协议,该 ...