• 网页元素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. 基于深度学习的人脸识别系统Win10 环境安装与配置（python+opencv+tensorflow）

    一.需要下载的软件.环境及文件 (由于之前见识短浅,对Anaconda这个工具不了解,所以需要对安装过程做出改变:就是Python3.7.2的下载安装是可选的,因为Anaconda已经为我们解决Pyt ...

  2. node根据excel批量更名

    程序预览 index.js var xlsx = require('node-xlsx'); var fs = require('fs'); process.stdin.setEncoding('ut ...

  3. 改改Python代码，运行速度还能提升6万倍

    这份最新研究指出,在后摩尔定律时代,人类所获得的的算力提升将更大程度上来源于计算堆栈的「顶层」,即软件.算法和硬件架构,这将成为一个新的历史趋势. 很多人学习python,不知道从何学起.很多人学习p ...

  4. Flask 框架小记

    Flask 框架小记 Flask 实例 创建示例的代码 from flask import Flask # __name__ 是模块名, 用于反射导入模块 app = Flask(__name__, ...

  5. 7、Prototype 原型模式 通过复制创造实例 创造型模式

    2020-07-19 发哥讲 发哥讲 其实上一节的末尾讲到如何去生成对象,其中有一个关于clone的,这其实就是Prototype原型模式. 通过克隆(拷贝)的方式生成对象 1.了解Prototype ...

  6. FTP服务器搭建及自动备份设置

    本次随笔内容主要是FTP服务器搭建. 其实去年十月服务器就搭建完了.当时写了个PPT保存了一下,准备以后写博客,结果时隔快一年我自己都快要看不懂我自己写的PPT了  ( = o = ) 不过还是尽量尝 ...

  7. Jmeter(二十一) - 从入门到精通 - JMeter断言 - 上篇（详解教程）

    1.简介 最近由于宏哥在搭建自己的个人博客可能更新的有点慢.断言组件用来对服务器的响应数据做验证,常用的断言是响应断言,其支持正则表达式.虽然我们的通过响应断言能够完成绝大多数的结果验证工作,但是JM ...

  8. 解析Class文件之创建InstanceKlass对象

    ClassFileParser::parseClassFile()方法会将解析Class文件的大部分结果保存到instanceKlass对象中.创建instanceKlass对象的代码如下: int ...

  9. Mybatis中List传值

    Mybatis遇到List传值时常用方法. 1. List<E>,E为基本数据类型和String Mapper类文件: List<User> selectByIds(List& ...

  10. Ng-Matero V10 正式发布！

    Angular v10 在六月下旬就悄无声息的发布了,虽然 v9 的发布延期了两个月,但是 v10 并没有受影响,仍然如期而至. 相比 v9 的重量级发布,v10 并没有颠覆性的变化,主要还是 bug ...