• 网页元素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. phpredis 扩展之操作 Redis，记下来记下来！

    phpredis 是 redis 的 php 的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系很有用 $redis = new Redis(); $redis->connect ...

  2. 当面试官问我ArrayList和LinkedList哪个更占空间时，我这么答让他眼前一亮

    前言 今天介绍一下Java的两个集合类,ArrayList和LinkedList,这两个集合的知识点几乎可以说面试必问的. 对于这两个集合类,相信大家都不陌生,ArrayList可以说是日常开发中用的 ...

  3. 033_go语言中的打点器

    代码演示 package main import "fmt" import "time" func main() { ticker := time.NewTic ...

  4. 001_centos7下比特币源码编译安装

    今天我们介绍比特币的源码安装过程,是利用编译安装的 首先安装依赖 yum install -y boost-devel qt-devel protobuf-devel qrencode-devel l ...

  5. 在centOS7上安装一套java运行环境

    前提:更换centos的默认yum源,提高下载速度. 备份系统自带的yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS- ...

  6. C#LeetCode刷题之#226-翻转二叉树（Invert Binary Tree）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4080 访问. 翻转一棵二叉树. 输入: 4    /   \   ...

  7. JDK8 String类知识总结

    一.概述 java的String类可以说是日常实用的最多的类,但是大多数时候都只是简单的拼接或者调用API,今天决定深入点了解一下String类. 要第一时间了解一个类,没有什么比官方的javaDoc ...

  8. day6 函数

    1.关键字参数     给实参对应的形参   调用函数时 设置关键字参数,形参=实参,把实参固定给那个形参 2.元组的可变(不定长参数)的使用      可变参数可以接收任意数量的普通的形参,并且组包 ...

  9. Vue3 + Element ui 后台管理系统

    Vue3 + Element ui  后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...

  10. 剑指offer数组中重复的数字

    package 数组; /*在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的. 也不知道每个数字重复几次.请找出数组中任意一个重复的数字. ...