首页 > 程序开发 > web前端 > HTML 5 >

HTML+CSS3-》第2阶段:HTML5基础和HTML语义化 下

2016-06-14

第2阶段:HTML5基础和HTML语义化 下 31前端开发基础视频-表& 26684;标签的使用 创建表& 26684; -在HTML网页中,要想创建表& 26684;,就需要使用表& 26684;相关的标记。创建表& 26684;的基本语法& 266

第2阶段:HTML5基础和HTML语义化下

31前端开发基础视频-表格标签的使用

创建表格

-在HTML网页中,要想创建表格,就需要使用表格相关的标记。创建表格的基本语法格式如下:

……

……

单元格内的文字

示例程序:

表格标签

在HTML网页中,要想创建表格,就需要使用表格相关的标记。创建表格的基本语法格式如下:

表头1 表头2

第1+2行
第1列

第一行
第2列

第一行
第3列

第二行
第2+3列

31前端开发基础视频-表格标签的使用.tiff

33前端开发基础视频-div和span标签的应用

表格标签

div1

div2

div3

span1

span2

span3

在HTML网页中,要想创建表格,就需要使用表格相关的标记。创建表格的基本语法格式如下:

表头1 表头2

第1+2行
第1列

第一行
第2列

第一行
第3列

第二行
第2+3列

33前端开发基础视频-div和span标签的应用.tiff

34前端开发基础视频-表单标签form-input-select-textarea

表单

-在HTML中,一个完整的表单通常由表单控件、提示信息、表单域3个部分构成。

34前端开发基础视频-表单标签form-input-select-textarea.tiff

表格标签

密码:

用户名:

性别:男

性别:男

表头1 表头2

第1+2行
第1列

第一行
第2列

第一行
第3列

第二行
第2+3列

34前端开发基础视频-表单标签form-input-select-textarea 习题

34前端开发基础视频-表单标签form-input-select-textarea 作业.tiff

34前端开发基础视频-表单标签form-input-select-textarea 作业

注册账号

昵称:

密码:

确认密码:

性别:

生日:

同时开通QQ空间

我已阅读并同意相关条款

效果如下:

34前端开发基础视频-表单标签form-input-select-textarea 习题.tiff

35前端开发基础视频-QQ注册案例

QQ表单联系

昵称:
密码:
性别:

已婚:

生日

同时开通QQ空间

效果如下:

35前端开发基础视频-QQ注册案例.tiff

36前端开发基础视频-表单分组标签

表单组合标签

表单组合标签

用户名1:


密码1:


|?led??nd| 传说、铭文组合标签标题

用户名2:


密码2:

用户名3:


密码3:

Pasted Graphic.tiff

37前端开发基础视频-表单标签总结

表单

-在HTML中,一个完整的表单通常由表单控件、提示信息和表单域3个部分构成,如下图所示,即为一个简单的HTML表单界面及其构成:

37前端开发基础视频-表单标签总结.tiff

form标签:

包裹标签,包裹所有表单,其action属性指向动作

input标签:

文本框、单选按钮、多选按钮、button等,由input按钮实现

Label标签:

for属性指向需要提供的标签的id值。也可直接包裹标签。

表单组合标签


密码1:

组合标签标题

用户名2:


密码2:

用户名3:


密码3:

Pasted Graphic_1.tiff

38前端开发基础视频-内联框架标签iframe使用

内联框架[了解内容]

iframe标签,元素会创建包含另外一个文档的的内连框架(即行内框架)

iframe的name属性配合超级链接的target属性,让iframe框架页面跳转,尽量不要用,不利于网站SEO

<iframe frameborder="0px" height="170" src="http://blog.csdn.net/u014222687/article/details/20150415060448.html" width="1500"></iframe>

内连框架标签示例

<iframe frameborder="0px" height="170" src="http://blog.csdn.net/u014222687/article/details/20150415060448.html" width="1500"></iframe>

<iframe frameborder="10px" height="170" src="https://www.baidu.com" width="1500"></iframe>

Pasted Graphic_2.tiff

39前端开发基础视频-其他标签补充

meta标签:

网站SEO 关键词和描述

link标签:

引入css

script标签

引入js

a标签补充:

锚定

target属性补充:blank _parent _self _top framename

base标签

其他标签补充

<iframe frameborder="10px" height="100" src="https://www.baidu.com" width="150"></iframe>

a

b c

Pasted Graphic_3.tiff

40前端开发基础视频-字符实体HTML特殊符号处理

Pasted Graphic_4.tiff

如何在html页面中显示HTML代码,比如显示:

body标签的写法

其他标签补充

<HTML5>

<body>body标签的写法</body>

Pasted Graphic 1.tiff

41前端开发基础视频-HTML语义化

HTML语义化:

Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

标签与语义相结合,尽量不要使用没有语义的标签。

42前端开发基础视频-HTML标签的显示模式

标签的类型(显示模式)

-HTML标记一般分为块标记和行内标记两种类型,他们也称为快元素和行内元素。具体如下:

块元素:

每个快元素通常都会独自占据一整行和多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页构造的搭建。

常见的块元素有

~

    1. 等,其中
      标记是最典型的元素。

      行内标签:

      行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

      常见的行内元素有等,其中标记最典型的行内元素。

相关文章
最新文章
热点推荐