• 网页元素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>

菜鸟教程

W3School

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

  1. Web最最基础

    web 网站网页一个网站是由多个网页组成的一个网页=网页元素(文字.图片.超链接.文本框.按钮.下拉框ext.) +样式+用户交互 一个网页=(网页元素)html+(样式)CSS+(用户交互)Java ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  4. [置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  5. 从头编写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 基础框架: 第 ...

  6. 20155324《网络对抗技术》web安全基础实践

    20155324<网络对抗技术>web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 实验问答 SQL注入攻击原理,如何防御 ①SQL注入攻击是攻击者在 ...

  7. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  8. #WEB安全基础 : HTTP协议 | 文章索引

    本系列讲解WEB安全所需要的HTTP协议 #WEB安全基础 : HTTP协议 | 0x0 TCP/IP四层结构 #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信 #WEB安全基础 : ...

  9. 2017-2018-2 20155228 《网络对抗技术》 实验九：Web安全基础

    2017-2018-2 20155228 <网络对抗技术> 实验九:Web安全基础 1. 实践内容 1.1 标理解常用网络攻击技术的基本原理 1.2 在Webgoat实验环境下实践相关实验 ...

随机推荐

  1. JavaScript动画实例：炸开的小球

    1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...

  2. Docker初探之常用命令

    在正式使用Docker之前,我们先来熟悉下Docker中常用的命令,因为对Docker的操作就如同操作Linux一样,大部分操作通过命令完成. 一.登录 为什么要使用登录? 因为我们使用Docker, ...

  3. java_抽象类、接口、多态的使用

    抽象类 抽象类:包含抽象方法的类. 抽象方法 : 没有方法体的方法. 使用 abstract关键字修饰方法,该方法就成了抽象方法,抽象方法只包含一个方法名,而没有方法体. 格式为:修饰符 abstra ...

  4. 商业分析-04行为&业务相关数据指标

    [访问深度]用户对产品的了解程度 [弹出率] 弹出率是基于访问回话的 而不是基于页面的,上图中1 4 6 是属于弹出

  5. Android 内部存储读写介绍

    内部存储读写 内容介绍 Android系统允许应用程序创建仅能够自身访问的私有文件,文件保存在设备的内部存储器上,在Linux系统下的/data/data//files目录中 Android系统不仅支 ...

  6. ldap登录验证的通用步骤

    和利用数据库进行验证类似,LDAP中也是利用登陆名和密码进行验证,LDAP中会定义一个属性password,用来存放用户密码,而登陆名使用较多的都是mail地址.那怎么样才能正确的用LDAP进行身份验 ...

  7. node mssql 无法连接sql server

    mssql无法连接sql server主要有两种原因: Sql server使用的是Windows身份验证 Sql server并没有打开网络连接功能 1.打开Sql Server身份验证 参考这篇文 ...

  8. python 在目标位置建立文件夹

    import os path = r'D:\pywork\12' # 指定位置 if not os.path.exists(path + '/' + '任务集'): #如果目标位置 不存在该文件夹“任 ...

  9. Mapreduce学习（一）

    MapReduce 介绍 简单介绍: MapReduce思想在生活中处处可见.或多或少都曾接触过这种思想.MapReduce的思想核心是“分而治之”,适用于大量复杂的任务处理场景(大规模数据处理场景) ...

  10. 深入源码理解Spark RDD的数据分区原理

    通过内存创建RDD的分区设置 1.示例代码 在创建RDD的时候,我们可以从内存中进行创建:输出保存为文件.为了演示效果,我们的示例代码如下: import org.apache.spark.{Spar ...