Web最最基础2

HEREISDAVID 2024-11-09 15:04:46 原文

网页元素HTML
- 列表

(1)无序列表

<ul>
　　<li>****</li>
　　<li>***</li>
</ul>

更多样式：<ul type="circle|square">

(2)有序列表

<ol start="100">
　　<li>****</li>
　　<li>***</li>
</ol>

更多样式：<ol type="A|a|i|I">

- 表单元素

(1)文本框

　　<input type="text" maxlength="20" placeholder="请输入用户名...">

(2)密码框

　　<input type="password" maxlength="16" >

(3)单选按钮

　　<input type="radio" name="sex" checked>男</input>

　　<input type="radio" name="sex">女</input>

(4)下拉列表

　　<select>

　　　　<option>请选择--</option>

　　　　<option>北京</option>

　　　　<option>广东</option>

　　</select>

(5)复选框

<input type="checkbox" name="jiuye">游戏测试</input>

<input type="checkbox" name="jiuye">银行测试</input>

(6)多行文本框

<textarea rows="8" cols="30">

包括教育背景、工作经验、性格特征等

</textarea>

(7)上传文件

<input type="file">

(8)按钮

<button>确定提交</button>

<input type="submit" value="注册">

<input type="reset" value="重置">

二、CSS美化网页

1、CSS选择器

(1)Html标签选择器：当前网页中同一种标签会设置成指定的样式

(2)class标签选择器：当前网页中相同的class处会设置成指定的样式

(3)id标签选择器：当前网页中某一处需要设置成唯一的样式

2、CSS样式的应用方法

(1)行内：位于<body>中的某个标签内，只对该标签生效。

(2)内嵌：位于<head></head>,针对该html文件生效

(3)外部样式：将样式代码单独存在css文件中，在html文件的head中使用link链接法将css文件与网页文件进行绑定

<link rel="stylesheet" type="text/css" href="gushi.css">

三、框架

1、上下结构：

<html>

<head></head>

    <frameset rows="20%,*" bordercolor="#0000FF" border="5">

        <frame name="top" src=“1.html">

        <frame name="bottom" src=“2.html">

    </frameset>

</html>

2、左右结构

<html>

<head></head>

    <frameset cols="20%,*" bordercolor="#0000FF" border="5">

        <frame name="left" src=“1.html">

        <frame name="right" src=“2.html">

    </frameset>

</html>

3、上中下结构

<html>

<head></head>

    <frameset rows="20%,*,10%" bordercolor="#0000FF" border="5">

        <frame name="top" src=“1.html">

        <frame name="middle" src=“2.html">

        <frame name="bottom" src=“3.html">

    </frameset>

</html>

4、上下结构，下面又分成左中右两部分

<html>

<head></head>

    <frameset rows="20%,*" bordercolor="#0000FF" border="5">

        <frame name="top" src=“1.html">

        <frameset cols="20%,*,10%" bordercolor="#0000FF" border="5">

            <frame name="left" src=“1.html">

            <frame name="right" src=“1.html">

            <frame name="right" src=“1.html">

        </frameset>

    </frameset>

</html>

5、上中下结构，中间拆分成左中右三部分

<html>

<head></head>

    <frameset rows="10%,*,10%" bordercolor="#0000FF" border="5">

        <frame name="top" src=“1.html">

        <frameset cols="20%,*,10%" bordercolor="#0000FF" border="5">

            <frame name="left" src=“1.html">

            <frame name="middle" src=“1.html">

            <frame name="right" src=“1.html">

        </frameset>

        <frame name="bottom" src=“1.html">

    </frameset>

</html>

Web最最基础2的更多相关文章

Web最最基础
web 网站网页一个网站是由多个网页组成的一个网页=网页元素(文字.图片.超链接.文本框.按钮.下拉框ext.) +样式+用户交互一个网页=(网页元素)html+(样式)CSS+(用户交互)Java ...
Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
[置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现
Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
从头编写asp.net core 2.0 web api 基础框架 (5) + 使用Identity Server 4建立Authorization Server (7) 可运行前后台源码
前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第 ...
20155324《网络对抗技术》web安全基础实践
20155324<网络对抗技术>web安全基础实践实验内容使用webgoat进行XSS攻击.CSRF攻击.SQL注入实验问答 SQL注入攻击原理,如何防御 ①SQL注入攻击是攻击者在 ...
#WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
#WEB安全基础 : HTTP协议 | 文章索引
本系列讲解WEB安全所需要的HTTP协议 #WEB安全基础 : HTTP协议 | 0x0 TCP/IP四层结构 #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信 #WEB安全基础 : ...
2017-2018-2 20155228 《网络对抗技术》实验九：Web安全基础
2017-2018-2 20155228 <网络对抗技术> 实验九:Web安全基础 1. 实践内容 1.1 标理解常用网络攻击技术的基本原理 1.2 在Webgoat实验环境下实践相关实验 ...

随机推荐

【BZOJ3307】雨天的尾巴题解（树链剖分+树上差分）
题目链接题目大意:给定一颗含有$n$个结点的树,每次选择两个结点$x$和$y$,对从$x$到$y$的路径上发放一带$z$类型的物品.问完成所有操作后每个结点发放最多的时哪种物品. 普通的树链剖分貌似 ...
springboot集成mongodb实现动态切换数据源
主要实现原理,利用spring的aop 在切入点执行db操作之前将数据库切换: 本例子采用aop在controller进行拦截拦截到MongoTemplate.class 切换数据源后重新放回去 ...
8月份Python招聘情况怎么样？Python爬取招聘数据，并进行分析
前言拉勾招聘是专业的互联网求职招聘平台.致力于提供真实可靠的互联网招聘求职找工作信息.今天我们一起使用 python 采集拉钩的 python 招聘信息,分析一下找到高薪工作需要掌握哪些技术开发环 ...
说说Spring中的 @RestController 和 @Controller
Spring MVC执行流程已是JAVA面试中老生常谈的问题,相信各位小伙伴也是信手拈来.今天我们来谈谈另一个面试中必会必知的问题: @RestController和@Controller的区别? S ...
spring data jpa 之通用接口
园主这一阵子接到一个需求,就是将spring data jpa再进行封装,实现通过调用一个baseRepository,来实现每个类的增删改查操作,结合spring data jpa 原有的便捷操作, ...
Java 设置、删除、获取Word文档背景（基于Spire.Cloud.SDK for Java）
本文介绍使用Spire.Cloud.SDK for Java 提供的BackgroundApi接口来操作Word文档背景的方法,可设置背景,包括设置颜色背景setBackgroundColor().图 ...
cudnn加速计算
cudnn加速运算 torch.backends.cudnn.enabled = True torch.backends.cudnn.benchmark = True 第一句话是说,使用的是非确定性算 ...
Vue 生成条形码 jsbarcode的使用
安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import JsBarcode from 'jsbarcode' 定义img标签和id <img i ...
python设计模式之外观模式
python设计模式之外观模式系统会随着演化变得非常复杂,最终形成大量的(并且有时是令人迷惑的)类和交互,这种情况并不少见.许多情况下,我们并不想把这种复杂性暴露给客户端.外观设计模式有助于隐藏系统 ...
【HDU3038】How Many Answers Are Wrong - 带权并查集
描述 TT and FF are ... friends. Uh... very very good friends -________-b FF is a bad boy, he is always ...