HTML（五）列表，区块，布局，表单和输入

HTML 列表

无序列表

Coffee
Tea
Milk

默认是圆点,也可以

有序列表

Coffee
Tea
Milk

Coffee
Tea
Milk

默认是用数字排序
大写字母

自定义列表

Coffee: - black hot drink
Milk: - white cold drink

HTML 区块

HTML
元素

HTML

元素是块级元素，它可用于组合其他 HTML 元素的容器

元素没有特定的含义。除此之外，由于它属于块级元素，
浏览器会在其前后显示折行
如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性

元素的另一个常见的用途是文档布局
它取代了使用表格定义布局的老式方法
使用
元素进行文档布局不是表格的正确用法

元素的作用是显示表格化的数据

HTML 元素

HTML 元素是内联元素，可用作文本的容器
元素也没有特定的含义
当与 CSS 一同使用时，元素可用于为部分文本设置样式属性

HTML
标签

文档中的一个区域将显示为蓝色：

这是一个在 div 元素中的标题

这是一个在 div 元素中的文本

align属性:
left 左对齐内容 right 右对齐内容 center 居中对齐内容
justify 对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)

HTML 标签

使用元素对文本中的一部分进行着色：

我的母亲有蓝色的眼睛

HTML 布局

使用
元素.

div 元素是用于分组 HTML 元素的块级元素

使用表格

使用 HTML

标签是创建布局的一种简单的方式
大多数站点可以使用

或者

元素来创建多列
CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观

HTML 表单和输入

创建文本字段

First name:

Last name:

创建密码字段

Username:

Password:

密码打出来的全是圆点

单选按钮(Radio Buttons)

Male

Female

复选框(Checkboxes)

I have a bike

I have a car

提交按钮(Submit Button)

Username:

简单的下拉列表

Volvo
Saab
Fiat
Audi

预选下拉列表

Volvo
Saab
Fiat
Audi

带边框的表单

Personal information:
Name:

E-mail:

Date of birth:

发送邮件实例

Name:

E-mail:

Comment:

posted @
2019-07-02 20:50 鹏懿如斯阅读(...) 评论(...) 编辑收藏

markdown_highlight();

var allowComments = true, cb_blogId = 465339, cb_blogApp = 'peng8098', cb_blogUserGuid = '0ee38980-082f-4fde-39f0-08d49c352df3';
var cb_entryId = 11123079, cb_entryCreatedDate = '2019-07-02 20:50', cb_postType = 1;
loadViewCount(cb_entryId);

var commentManager = new blogCommentManager();
commentManager.renderComments(0);

刷新评论刷新页面返回顶部

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

googletag.cmd.push(function () {
googletag.defineSlot("/1090369/C1", [300, 250], "div-gpt-ad-1546353474406-0").addService(googletag.pubads());
googletag.defineSlot("/1090369/C2", [468, 60], "div-gpt-ad-1539008685004-0").addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});

if (new Date() >= new Date(2018, 9, 13)) {
googletag.cmd.push(function () { googletag.display("div-gpt-ad-1539008685004-0"); });
}

fixPostBody();
setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
deliverAdT2();
deliverAdC1();
deliverAdC2();
loadNewsAndKb();
loadBlogSignature();
LoadPostCategoriesTags(cb_blogId, cb_entryId); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
loadOptUnderPost();
GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);

loadBlogNews();

loadBlogDefaultCalendar();

loadBlogSideColumn();