• 网页元素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. 群晖系统如何通过Video Station套件管理NAS中的视频

    一.PC端观看视频 1.在NAS套件中心找到Video Station套件,安装套件 2.设置video套件别名,便于后期使用,控制面板----应用程序门户----video Station 3.选中 ...

  2. 学会这些Python美图技巧，就等着女朋友夸你吧

    一.前言 Python中有许多用于图像处理的库,像是Pillow,或者是OpenCV.而很多时候感觉学完了这些图像处理模块没有什么用,其实只是你不知道怎么用罢了.今天就给大家带了一些美图技巧,让你的图 ...

  3. 5 年 Python 的我，总结了这 90 条写 Python 程序的建议

    自己写 Python 也有四五年了,一直是用自己的“强迫症”在维持自己代码的质量.都有去看Google的Python代码规范,对这几年的工作经验,做个简单的笔记,如果你也在学pythpn,准备要学习p ...

  4. （数据科学学习手札92）利用query()与eval()优化pandas代码

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 利用pandas进行数据分析的过程,不仅仅是计算 ...

  5. Redis服务之Redis5集群相关命令说明

    上一篇博客主要聊了下redis.trib.rb这个工具来管理redis3/4 cluster 中的节点,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13456 ...

  6. windows下的Redis安装：

    windows下的Redis安装: 百度网盘地址:https://pan.baidu.com/s/1yYED2pXLWolPXvWaABtF2Q 提取密码:xshu 1.解压文件并且创建start.b ...

  7. GaussDB基本操作

    列出所有数据库 \l 切换数据库 \c ${databaseName} 列出当前数据库下的表 \d 列出表的所有字段 \d ${tableName} 查看指定表的基本情况 \d+ ${tableNam ...

  8. Golang 解析Yaml格式

    Golang官方并没有提供Yaml解析包,所以需要使用第三方包.可用的第三方包有不少,这里选择的是 gopkg.in/yaml.v2,这个包在github上有不少的star,也的确挺好用.其使用的是A ...

  9. 【原创】Linux虚拟化KVM-Qemu分析（一）

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: KVM版本:5.9 ...

  10. js、jQuery、ajax面试题

    1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...