一.web页面的组成

1. 常用：HTML + CSS + Javascript

2. HTML：定义页面的呈现内容

3. CSS：Cascading Style Sheets，层叠样式表

控制你的网页如何呈现，即布局设置。比如字体颜色、字体大小、在页面呈现的大小等

4. Javascript：如果你希望你的网页依据不同的情形做不同的事情呢？需要一门编程语言，javascript就是其中一种

二. HTML

1. 什么是HTML？

HTML是用来描述网页的一种语言
HTML指的是超文本标记语言(HyperText Markup Language)
HTML不是一种编程语言，而是一种标记语言(markup language)
标记语言包含一套标记标标签(markup tag)，HTML使用标记标签描述网页
HTML文档后缀名为.html或.htm

2. HTML标签

HTML标记标签通常被称为HTML标签(HTML tag)
HTML标签是由尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，不如<b>和</b>
标签对中第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签

3. 常用标签对

标签	描述
<html>	定义HTML文档
<body>	定义文档的主体
<head>	定义文档的信息
<title>	定义文档的标题
<meta>	定义文档中的元数据
<link>	定义一个文档和外部资源之间的关系(引用)
<body>	定义文档的主体
<p>	定义一个段落
<h1>-<h6>	定义标题
<a>	定义一个超链接
<img>	定义图像
<div>	定义文档的区域，块级
<table> tr td	<table>：定义表格，tr：定义表格的行，td：定义表格的单元
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<form>	定义供用户输入的表单
<input type="text"/"password"/"radio"/"checkbox"/"submit"/"file"/"button">	定义输入框
<select>/<option>	<select>：定义下拉列表 <option>：定义下拉列表中的选项
<button>	定义一个点击按钮

4. HTML属性

HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在HTML元素的开始标签中规定

下面列出了适用于大多数HTML元素的属性：

属性	描述
class	规定了元素的类名(类名可以重复)
id	规定了元素的唯一id
style	规定了元素的行内样式(inline style)
title	描述了元素的额外信息(可在工具提示中显示)

5. 实例1：表格

<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>表格</title>
</head>
<body>
　　<table border="1">
　　　　<tr>
　　　　　　<th>内容1</th>
　　　　　　<th>内容2</th>
　　　　</tr>
　　　　<tr>
　　　　　　<td>第一行单元格1</td>
　　　　　　<td>第一行单元格2</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>第二行单元格1</td>
　　　　　　<td>第二行单元格2</td>
　　　　</tr>
　　　</table>
</body></html>

结果：

实例2：输入框

<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>输入框</title>
</head>
<body>
　　<form>
　　　　First name: <input type="text" name="firstname" />
　　　　<br>
　　　　Last name: <input type="text" name="lastname" />
　　</form>
</body>
</html>

结果：

实例3：下拉列表

<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>下拉列表</title>
</head>
<body>
　　<select>
　　　　<option>--请选择一个城市---</option>
　　　　<option>---北京---</option>
　　　　<option>---上海---</option>
　　　　<option>---广州---</option>
　　　　<option>---深圳---</option>
　　</select>
</body>
</html>

结果：

实例4：有序列表和无序列表

<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>有序列表和无序列表</title>
</head>
<body>
　　<ol>
　　　　<li>Coffee</li>
　　　　<li>Milk</li>
　　</ol>
　　<ul>
　　　　<li>Coffee</li>
　　　　<li>Milk</li>
　　</ul>
</body>
</html>

结果：

三. CSS的三种引入方式

1. CSS的三种引入方式：内联样式(行内样式)、内部样式、外部样式

2. 样式优先级：内联样式(行内样式)>内部样式>外部样式

3. 实例1——内联样式：直接在标签内部通过使用style属性添加CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>内联样式(行内样式)</title>
</head>
<body>
    <!--使用内联样式引入CSS-->
    <h1 style="color:blue;">这是一级标题</h1>
    <p style="color:yellow; font-size:30px;">这是段落</p>
</body>
</html>

结果：

实例2——内部样式：在<head>标签里面通过使用<style>标签来引进CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>内部样式</title>
    <!--使用内部样式引入CSS-->
    <style type="text/css">
        h1{
            color:blue;
        }
        p{
            color:yellow;
            font-size:30px;
        }
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <p>这是段落</p>
</body>
</html>

结果：

实例3——外部样式：先在外部新建一个外部样式表，然后在<head>标签里面通过<link>标签或通过导入进行关联

1)、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2)、导入式
<style type="text/css">
@import url("css文件路径");
</style>

样式1：同级目录下的color1.css文件

h1{
    color:blue;
}

样式2：同级目录下的color2.css文件

p{
    color:yellow;
    font-size:30px;
}

html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>外部样式</title>
    <!--使用链接式引入CSS-->
    <link rel="stylesheet" type="text/css" href="color1.css">
    <!--使用导入式引入CSS-->
    <style type="text/css">
        @import url("color2.css");
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <p>这是段落</p>
</body>
</html>

结果：

web自动化：前端页面组成的更多相关文章

web移动前端页面，jquery判断页面滑动方向
/*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...
web前端页面性能优化
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
web前端页面项目经验总结
项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...
web前端页面性能优化小结
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
2017春前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
基于.net EF6 MVC5+WEB Api 的Web系统框架总结（1）-Web前端页面
本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台.本节主要介绍Web前端页面设计与实现.Web前端页面主要分为普通列表页面.树状导航列表页面.普通编辑页面.数据导入页面.向 ...
Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面优化见解. 1. 首先举个例子: ...
Web 前端页面性能监控指标
Web 前端页面性能监控指标性能监控 / 性能指标 / 性能优化白屏时间计算 FCP 白屏时间:从浏览器输入地址并回车后到页面开始有内容的时间: 首屏时间计算 FMP 首屏时间:从浏览器输入地址并 ...
Web自动化---解决登录页面随机验证码问题
一.抛出问题在日常的测试工作中,遇到了这样一个登录页面,如下图: 像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母 ...

随机推荐

处理 Java 的“Cannot allocate memory”错误
今天在配置 DCA 服务器的时候,检验 java 版本的时候忽然遇到了一个 Cannot allocate memory 错误 [root@elcid-prod1 ~]# java -version ...
NodeJS的一些总结
NodeJS的一些总结 Node 公开宣称的目标是 “旨在提供一种简单的构建可伸缩网络程序的方法”. 当前的服务器程序有什么问题?我们来做个数学题. 在 Java™ 和 PHP 这类语言中,每个连接都 ...
0405-服务注册与发现-客户端负载均衡-Ribbon 同Eureka使用，Ribbon脱离Eureka使用
一.Ribbon 同Eureka使用,注意事项前几节一同使用,注意事项: 如果没有其他区域数据源,则根据客户端配置进行猜测(与实例配置相反).能够获取eureka.client.availabili ...
(转)fiddler使用简介--其三
原文地址:http://www.cnblogs.com/miantest/p/7294620.html 我们知道Fiddler是位于客户端和服务器之间的代理,它能够记录客户端和服务器之间的所有 HTT ...
Python之匿名函数（Day18）
匿名函数为了解决那些功能很简单的的需求而设计的一句话函数 #这段代码 def calc(n): return n**n print(calc(10)) #换成匿名函数 calc = lambda n ...
MySQL数据库（3）_MySQL数据库表记录操作语句
附: MYSQL5.7版本sql_mode=only_full_group_by问题 .查询当前sql_mode: select @@sql_mode .查询出来的值为: set @@sql_mode ...
(转)IIS tomcat共用80端口解决一个IP多个域名：使用Nginx反向代理方式使两者兼容
from :http://www.cnblogs.com/wuyou/p/3455619.html 环境: windows server 2003,IIS6服务器,Tomcat7服务器域名有几个: ...
Centos---linux配置集群搭建
网络配置 1.创建虚拟机mini1: 1.1.网络配置 NAT网络模式模式直接修改 /etc/sysconfig/network-script/ifcfg-eth0 输入service netwo ...
gstreamer交叉编译
gstreamer(0.10.36) ./configure --build=i686-linux --host=arm-linux --prefix=/opt/EmbedSky/gcc-4.6.2- ...
python函数模拟mysql增删改查功能
import os list1 = ['staff_id', 'name', 'age', 'phone', 'dept', 'enroll_date'] def staff_info(): #获取员 ...

web自动化：前端页面组成