滚动屏幕显示隐藏div_HTML结构-常用标签:a·img·table·form·input·iframe·div

news/2024/7/5 2:30:19

学习目标:

  • 掌握html的结构,head与body的区别
  • 掌握常用标签
  • 掌握a标签,img标签
  • 掌握table标签
  • 掌握form标签,input标签
  • 掌握iframe 和frameSet标签
  • 掌握div标签

互联网的三大基石

互联网中的三大基石是什么?

HTML:超文本标记语言
HTTP:超文本传输协议
URL:统一资源定位符

如何理解HTML、CSS、JS之间的关系,简单说明?

HTML相当于网页的基本骨架,HTML+CSS相当于一个有血有肉的人
HTML+CSS+JS:JS的作用实现了网页的动态效果。

HTML入门

HTML的作用是什么?

HTML是一种专门对网页信息进行规范化展示的语言。

谈谈你如何理解HTML的

HTML:超文本标记语言(网页的基本框架语言)
超文本:文本信息、音频、视频、超链接
标记:标签的体现

请问HTML中<meta charset="utf-8" />标签的作用

告诉浏览器采用utf-8的形式解析该网页
Head中的子标签

请简述<!DOCTYPE html>标签的作用

HTML文档的声明

请简述什么样的标签写head ,什么样的标签写到body中

Head:配置信息: 1. <meta/>标签:2.<title></title>标签
浏览器解析网页编码格式:
<meta charset=”utf-8”/>搜索引擎优化:
<meta name=”author”content=”朱志清”/>
<meta name=”description”content=”盼望着盼望着东风来了”/>
<meta name=”keywords” content=”盼望,东风”/>自动刷新网页:
<meta http-equiv=”refresh”content=”5;http://www.bjsxt.com”/>禁止网页缓存(了解):
<meta http-equiv=”Pragma” content=”no-cache”/>
<meta http-equiv=” Cache-Control” content=”no-cache”/>
<meta http-equiv=”expires” content=”0”/>
Body:展现给用户的信息标题标签:<h></h>标签:
字体自动加粗加黑,自动换行。从h1-h6字体逐渐变小。属性:align:调整标签的位置,left、center、right默认是left分割线标签:<hr/>属性:
Width:水平宽度
color:颜色
align:位置(默认center)
size:垂直方向大小段落标签:<p> </p>
空格:&nbsp;
换行标签:<br/>
预文本标签: <pre></pre>
字体标签:
<font></font> color:颜色 size:大小 face:指定字体的风格
<span></span> 
跑马灯标签:
<marquee></marquee>  滚动方向;direction 滚动像素:scrollamount 

基本标签一

请列举标题标签常用的属性并说明含义

标题标签:<h></h>标签:
字体自动加粗加黑,自动换行。从h1-h6字体逐渐变小。属性:align:调整标签的位置,left、center、right默认是left请列举分割线标常用的属性并说明含义
分割线标签:<hr></hr> 实现内容分割
属性:align:位置(默认center)
Width:宽度Color:颜色Size:垂直方向的大小

基本标签二

请列举常用的列表标签

列表标签 :有序列表、无序列表、自定义列表
有序列表:
<ol type=”1”>
<li>中国</li>
<li>美国</li>
</ol>
无序列表:
<ul type=”A”>
<li>语文</li>
<li>数学</li>
</ul>
自定义列表:作用:树形菜单、导航栏布局
<dl><dt>java</dt><dd>javaSE</dd>
<dd>javaEE</dd>
<dd>javaME</dd>
</dl>

请说出小标签的作用和特点

下划线:<u></u>
斜体标签:<i></i>
加粗加黑标签:<b></b>
删除线标签:<del></del>
上标标签:2<sup>3</sup>         
下标标签:log<sub>7</sub>
字体变小标签:<small></small>            
字体放大标签:<big></big>

超链接标签

请简述超链接标签的作用和用法

注:超链接标签不会自动换行
Href属性:指定跳转到目标资源的位置
Target属性:打开网页方式
作用:
实现不同页面之间的跳转:href属性:跳转本地资源位置、跳转网络资源位置
<a href=”02常用小标签.html” target=”blank”>02小标签</a>
<a href=”http://www.bjsxt.com”>北京尚学堂</a>实现锚点功能
出现滚动条:增加<br/> ,快速写br标签:br*50+“tab”键
返回底部:<a href=”#bottom” name=”top”>返回底部</a>
返回顶部:<a href=”#top” name=”bottom”>返回顶部</a>
图片标签

请说出图片标签中src这个属性可以书写的路径有几种

注释:img  (不会自动的换行)
Src :
作用:引入图片位置 
引入方式:
相对路径:引入图片标签:<img src=”img.2.jpg”/>
绝对路径:<img src="C:UsersmyDocumentsHBuilderProjects01HTMLimg1.jpg" />把h-builder html文件放在桌面加载
网络路径:<imgsrc="https://www.baidu.com/img/bd_logo1.png"/>

请说出图片标签的几个常用属性和属性的作用

Title:图片标题
Width:宽度
Height:高度 当只指定宽度或者高度时,图片会等比例放大或缩小
Border:边框
Alt:图片无法显示的时候显示错误
Align:需要把图片放在<p>标签里,和文本作为参照显示
如果需要图片链接,需要把图片嵌套在<a>标签里

表格标签

请列举table标签的常用的属性和对应的作用

行标签:<tr></tr1>:height行高
列标签:<td></td>/<th></th>:width:列宽<th>标题列自动加宽加粗,自动居中
Cellpadding:内容和单元格的距离
Cellspacing:单元格和单元格之间的距离
自动生为三行三列的表格:table>tr*3>th*3+”table”键
<th colspan=”2”></th>列合并,去掉一个行
<th rowspan=”2”></th>行合并,去掉一个列
Bgcolor属性:背景颜色

表单标签1

form表单中action属性的作用?

Action:表单提交的位置http://www.baidu.com/s
Method:表单提交的方式get/post

提交方式GET 和POST 的区别是什么?

Get:参数会依附于url地址之后,利用get方式提交数据,数据长度有限制提交数据不安全
Post:请求不会依附于地址,利用post处理参数不受限制,提交数据安全。

表单标签2

列举出 常用的表单项的属性

Type:
普通文本框:
Text
Password单选框:radio checked默认选择 name名字一致才能达到单选的效果多选框:checkbox文件选择框:file隐藏框:hidden多行文本框:<textarea rows=”” cols=””></textarea>
Submit:提交
清空:reset
下拉框:selected:默认都选
<select><option></option>
</select> 
Name 
Value
请输出type=”button“ 和 type=”submit“的区别type=”submit“:向action提交
type=”button“普通按钮,没有提交功能。结合js事件动态使用

IFrame 标签

请写出ifram标签的作用

列表:ul>li>*3>a+”table”键
一个网页中嵌套另一个网页,网页实现链接共同打开的窗口框架 
Frameset 标签

请简述 frameset 的作用?

对网页进行布局划分

d4e7885713a5e12a9dc21a11fb0f8b18.png

如果我想让新建好的 frameset 中每一个网页大小不可改变应该调整哪一个属性?

Noresize=”Noresize”属性

div标签

请简述div标签的作用

对网页进行布局、模块划分
<!--头部模块--> 
<div class="top"></div> 
<!--中间提示--> 
<div class="tips"></div> 
<!--中间的展现--> 
<div class="center"> 
<div class="login"> 
</div> 
</div> 
<!--底部模块--> 
<div class="bottom"></div>

@杜程程 BjSXT百战卓越鏖战第三十四天


http://lihuaxi.xjx100.cn/news/245846.html

相关文章

如何更快速加载你的JS页面

确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具&#xff0c;只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 尽量减少DOM访问 使用JavaScript访问DOM元…

Android APP全面屏适配技术要点

全面屏的概念 为什么先要解释一下全面屏&#xff0c;因为这个词在现在来讲就是一个伪命题。全面屏字面意思就是手机的正面全部都是屏幕&#xff0c;100%的屏占比。但是现在推出所谓“全面屏”手机的厂商没有一个能达到全面的。 那么下面来说一下Android开发领域对全面屏的理解和…

mgr未同步 mysql_MySQL Group Replication(多主同步复制MGR)

开启replication配置&#xff1a;server-id1 #标识服务器唯一log-binmysql-bin #二进制日志开启enforce_gtid_consistency ON #GTID模式是组复制的基础技术binlog-formatrow#必须是ROW模式gtid-modeON …

Java三大主流框架概述

Struts、Hibernate和Spring是我们Java开发中的常用关键&#xff0c;他们分别针对不同的应用场景给出最合适的解决方案。但你是否知道&#xff0c;这些知名框架最初是怎样产生的?我们知道&#xff0c;传统的Java Web应用程序是采用JSPServletJavabean来实现的&#xff0c;这种模…

Cacti Weathermap添加主机在线状态图示检测

Weathermap 中文名称翻译为 气象图weathermap版本支持&#xff1a;0.94及最新版1、首先添加气象图 图例像这样。编辑需要添加图例的气象图配置文件 (气象图配置文件默认在/var/www/html/plugins/weathermap/configs/ 目录中)其中 KEYPOS指定全局图例名称以及 图例位置和 图例标…

zookeeper脑裂

出现&#xff1a; 在搭建hadoop的HA集群环境后&#xff0c;由于两个namenode的状态不一&#xff0c;当active的namenode由于网络等原因出现假死状态&#xff0c;standby接收不到active的心跳&#xff0c;因此判断active的namenode宕机&#xff0c;但实际上active并没有死亡。此…

5 修改request对象变量_【总结】前端5大常见设计模式,代码一看你就懂!

前言今天主要介绍一下我们平常会经常用到的设计模式&#xff0c;设计模式总的来说有23种&#xff0c;而设计模式在前端中又该怎么运用呢&#xff0c;接下来主要对比较前端中常见的设计模式做一个介绍。设计模式的定义设计模式是在面向对象软件设计过程中针对特定问题的简洁而优…

第一章 Mysql 简介及安装和配置

Mysql是最流行的关系型数据库管理系统&#xff0c;在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System&#xff1a;关系数据库管理系统)应用软件之一。第一节&#xff1a;Mysql 简介 百度百科看下 Mysql简介第二节&#xff1a;Mysql 安装及配置 1&#x…