欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 18:32:19
第2阶段:html5基础和html语义化下   31基础视频-表格标签的使用   创建表格 -在html网页中,要想创建表格,就需要使用表格相关的标记...

第2阶段:html5基础和html语义化下

 

31基础视频-表格标签的使用

 

创建表格

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

 

 

 

……

 

 

 

 

 

……

 

 

 

单元格内的文字

 

示例程序:

 

 

 

 

表格标签

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表头1 表头2

 

第1+2行
第1列

 

 

第一行
第2列

 

 

第一行
第3列

 

 

第二行
第2+3列

 

 

 

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

 

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

 

 

 

 

 

表格标签

 

 

 

 

 

 

 

p1

 

 

 

 

p2

 

 

 

 

p3

 

 

span1

 

 

span2

 

 

span3

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表头1 表头2

 

第1+2行
第1列

 

 

第一行
第2列

 

 

第一行
第3列

 

 

第二行
第2+3列

 

 

 

 

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

 

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

表单

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

 

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

 

 

 

 

表格标签

 

 

 

 

 

 

密码:

 

 

 

 

 

用户名:

性别:男

性别:男

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表头1 表头2

 

第1+2行
第1列

 

 

第一行
第2列

 

 

第一行
第3列

 

 

第二行
第2+3列

 

 

 

 

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

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

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

注册账号

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

昵称:

 

 

 

 

 

 

密码:

 

 

 

 

 

 

确认密码:

 

 

 

 

 

 

性别:

 

 

 

 

生日:

 

 

 

 

 

同时开通qq空间

 

 

 

 

我已并同意相关条款

 

 

 

 

效果如下:

 

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

 

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

 

 

 

 

 

qq表单联系

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

昵称:
密码:
性别:

 

男  

 

已婚:

 

  

 

生日

 

 

  同时开通qq空间
 

 

 

 

效果如下:

 

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

 

 

 

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

 

表单组合标签

 

 

 

 

表单组合标签

 

 

 

 

 

 

用户名1:


密码1:

 


 

 

 

 

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

用户名2:


密码2:

 

用户名3:


密码3:

 

 

 

 

 

 

 

 

 

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

 

 

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

表单

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

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

 

 

 

 

form标签:

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

 

input标签:

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

label标签:

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

 

 

 

 

 

表单组合标签

 

 

 

 

 

 

 

 

 

 

 


密码1:

 

 

 

 

 

组合标签标题

用户名2:

 


密码2:

 

用户名3:


密码3:

 

 

 

 

 

 

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

 

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>

 

 

 

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

 

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

 

 

 

 

 

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

 

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

 

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

 

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

 

body标签的写法

 

 

 

 

 

其他标签补充

 

 

 

 

 

 

 

<html5>

 

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

 

 

 

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

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

html语义化:

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

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

 

 

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

标签的类型(显示模式)

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

 

块元素:

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

常见的块元素有

~

    1. 等,其中

      标记是最典型的元素。

       

       

      行内标签:

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

      常见的行内元素有