首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML+CSS3-》第2阶段:HTML5基础和HTML语义化 下
2016-06-14       个评论    来源:u014222687的专栏  
收藏    我要投稿

第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. 等,其中
      标记是最典型的元素。

       

       

      行内标签:

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

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

点击复制链接 与好友分享!回本站首页
相关TAG标签 语义 阶段 基础
上一篇:HTML5独家分享:原生JS学习笔记2——程序流程控制
下一篇:HTML5 canvas画布
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站