第一次测试HTML和CSS
<html> <head>
<title>这是一个标题</title>
</head> <body>
这是网页显示的内容
<h1>这是网页显示的内容</h1>
<h1><font color="red">这是网页显示的内容</font></h1>
<a href="http://www.baidu.com">这是一个链接</a> <table border=1 align="center" width="80%">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<th>cc</th>
<th>dd</th>
</tr>
</table> </body> </html>
2、关于表单的HTML标签的介绍
Text
Textarea
Radio
Checkbox
Select
File
Hidden
Submit
Reset
Button
image
1 <html>
2 <head>
3 <title>网页标题</title>
4 </head>
5 <body>
6 <form>
7
8 username: <input type="text" value="hello world"><br>
9 password: <input type="password"><br>
10 兴趣：学习<input type="checkbox">
11 旅游<input type="checkbox">
12 睡觉<input type="checkbox"><br>
13 性别：男<input type="radio" name="gender">
14 女<input type="radio" name="gender"><br>
15 学历：<select>
16 <option>小学</option>
17 <option>初中</option>
18 <option>高中</option>
19 <option>大学</option>
20 </select><br>
21
22 评论：<textarea>
23 </textarea><br>
24
25 图片：<img src="http://www.baidu.com/img/bdlogo.gif"><br>
26 文件上传：<input type="file"><br>
27
28 <input type="submit" value="submit">
29 <input type="reset" value="reset">
30 <input type="button" value="button" onclick="javascript:alert('hello world');">
31
32 </form>
33 </body>
34 </html>
注：上面的代码。<br>代表换行， 代表空格。h1到h6代表六级标题。
3、浏览器内核：Webkit（较快），trident（IE用）
4、CSS是什么
CSS stands for Cascading Style Sheets
– CSS 意思就是 层叠样式表
• Styles define how to display HTML elements
– 样式定义了HTML元素如何去显示
• Styles are normally stored in Style Sheets
– 样式一般存储在样式表中
• Styles were added to HTML 4.0 to solve a problem
– 样式加入到HTML4.0中用来解决这个问题
• External Style Sheets can save you a lot of work
– 利用外部样式表能够提高你的工作效率
• External Style Sheets are stored in CSS files
– 外部样式表存储在CSS文件里
• With CSS, your HTML documents can be displayed using different output styles
– 使用CSS。你的HTML文档能够用不同的样式输出来显示
5、样式的优先级
一般说来全部样式有以下的规则(第四个
最有优先性)
1. Browser default
浏览器默认
2. External style sheet
外部样式表
3. Internal style sheet (inside the <head> tag)
内嵌样式表(在<head>标签内)
4. Inline style (inside an HTML element)
行内样式(在一HTML元素内)
6、CSS语法
The CSS syntax is made up of three parts: a selector, a property and a value:
CSS的语法由三部分组成: 一个选择器。一个属性和一个值，比如：
selector {property: value}
选择器是你希望去定义的HTML元素/标签，每一个属性能够有一个值，属性和值由冒号隔开。外面用大括号括起来。
如：body {color: black}
a）
假设值为多个单词则用双引號括起来
p {font-family: "sans serif"}
b）
假设你想指定多个属性，你就必须将每一个属性用分号隔开，以下的样例就演示了如何定义居中红色文字段落
p {text-align:center;color:red}
c）
为了让样式定义更有可读性。你能够像这样分行描写叙述属性
p{
text-align: center;
color: black;
font-family: arial
}
d）
你能够将选择器组合。用逗号分隔每一个选择器。下的样例将全部的标题元素组合起来，它们的颜色都变为绿色
h1,h2,h3,h4,h5,h6 { color: green }
e）
用选择器类你能够将同一类型的HTML元素定义出不同的样式。 比方你想在你的文档中有两种不相同式的段落：一种是右对齐，另外是居中的。这就告诉你该怎么用样式来做到这点
p.right {text-align: right}
p.center {text-align: center}
你必须在你的HTML文档中使用类属性（才能显示出效果）
<p class="right"> This paragraph will be
right-aligned. </p>
<p class="center"> This paragraph will be
center-aligned. </p>
注意：每一个HTML元素仅仅能有一个类属性，以下的样例是不符合规范的
<p class="right" class="center">
This is a paragraph.
</p>
f）
你也能够省略标签名称直接去定义，这样就能够在全部的HTML元素中使用了。以下的样例就能让全部HTML中全部带class="center"的元素居中文字：
.center {text-align: center}
g）
以下的代码中H1和P元素都有class="center"。 这就意味着这两个元素都将遵循选择器"center"的规则
<h1 class="center"> This heading will be
center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
请不要用以数字开头为名称的类，在Mozilla/Firefox中不能正常运作。
h）
使用id 选择器你能够为不同的HTML元素定义同样的样式以下的样式规则对不论什么一个带有id属性值为"green"的元素都是匹配的
#green {color: green}
上面的规则将匹配h1和p元素
<h1 id="green">Some text</h1>
<p id="green">Some text</p>
以下的样式规则将匹配不论什么一个带有id属性值为"green"的p元素
p#green {color: green}
上面的规则与h1元素不匹配（也就是说不会产生样式效果）
<h1 id="green">Some text</h1>
和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了。
j）
你能够在CSS中增加解释代码用的凝视，这样可以方便你以后又一次编辑代码。浏览器会忽略凝视。凝视一般以"/*"开头"*/"做结尾。像这样：
/* This is a comment */
p {
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
7、如何插入样式表
有三种方法能够插入样式表。
• 外部样式表（External Style Sheet）
• 内嵌样式表（Internal Style Sheet）
• 行内样式（Inline Styles）
a）外部样式表
使用外部样式表是使样式应用于多张网页的理想
方法。 通过这种方法你仅仅需修改一个文件就能改变整个站点的外观。使用<link>标签让每一个页面都连接到样式表。<link>标签在head区域使用
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
浏览器将从mystyle.css文件里读取样式定义信息。并
根据它来格式化文档外部样式表能够用不论什么一个文字编辑器来书写。文件不应该包括不论什么的html标签。
并保存为一个后缀为.css的文件。以下是一
个样式表文件的内容
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
注意：请不要在属性值和其单位间加上空
格！ 假设你用"margin-left: 20 px“来代替"margin-left: 20px"的话，这或许在IE6中能正常工作,但在Mozilla/Firefox或Netscape中就无法正常显示了
b）内嵌样式表
一份内嵌样式表应该在当有单独文档有特殊样式
的时候使用。使用<style>标签在head区域内定义样式，像这样
<head>
<style type="text/css">
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
• 浏览器将马上读取样式定义，并根据它来
格式化文档。注意：浏览器通常会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略<style>标签。但<style>里的内容会显示在页面上。在HTML凝视元素中隐藏它能够来避免这类情况在老的浏览器中发生
<head>
<style type="text/css">
<!-- hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")} -->
</style>
</head>
c）行内样式
使用行内样式就失去了样式表的优势而将
内容和形式相混淆了。一般这类方法在个别元素须要改变样式的时候使用。
在相关的标签上用style属性来增加行内样式。样式属性能够包括不论什么CSS属性。例子中将展示如何给一个段落加上左间距并将颜色改为red
<p style="color: red; margin-left: 20px"> This
is a paragraph </p>
8、超链接的样式
例：
a:link { color : green} /* 没有动作时是绿色的 */
a:visited { color : yellow } /* 訪问过之后是黄色的 */
a:hover { color : black } /* 鼠标放上去是黑色的 */
a:active { color : orange} /* 鼠标点下去了但没有松开是橘黄色的 */
版权声明：本文博客原创文章，博客，未经同意，不得转载。
第一次测试HTML和CSS的更多相关文章
- 2018.10.19浪在ACM 集训队第一次测试赛
2018.10.19浪在ACM 集训队第一次测试赛 待参考资料: [1]:https://blog.csdn.net/XLno_name/article/details/78559973?utm_so ...
- Python+Selenium 自动化实现实例-获取测试对象的Css属性
#coding:utf-8 '''获取测试对象的css属性场景 当你的测试用例纠结细枝末节的时候,你就需要通过判断元素的css属性来验证你的操作是否达到了预期的效果.比如你可以通过判断页面上的标题字号 ...
- python网络爬虫。第一次测试-有道翻译
2018-03-0720:53:56 成功的效果如下 代码备份 # -*- coding: UTF-8 -*- from urllib import request from urllib impor ...
- Hibernate的第一次测试解析
解析:此题目考查的是对Hibernate中交叉连接的理解.HQL支持SQL风格的交叉连接查询,交叉连接适用于两个类之间没有定义任何关联时.在where字句中,通过属性作为筛选条件,如统计报表数据.使用 ...
- Python脚本控制的WebDriver 常用操作 <十八> 获取测试对象的css属性
测试用例场景 当你的测试用例纠结细枝末节的时候,你就需要通过判断元素的css属性来验证你的操作是否达到了预期的效果.比如你可以通过判断页面上的标题字号以字体来验证页面的显示是否符合预期.当然,这个是强 ...
- partOneJava学习卷土重来-----第一次测试题目介绍
石家庄铁道大学2021年秋季 2020 级课堂测试试卷(一)(15分) 课程名称: JAVA语言程序设计 任课教师: 王建民 考试时间: 150 分钟 一.考试要求: 1.按照测试 ...
- PWN! 第一次测试答案及讲解
题目链接:https://vjudge.net/contest/279567#overview 题目密码:190118 1.A+B:(考察点:EOF输入.加法运算) Topic: Calculate ...
- #C++初学记录 (第一次测试)（A - 复习时间 ）
练习题目一 (A-复习时间) 为了能过个好年,xhd开始复习了,于是每天晚上背着书往教室跑.xhd复习有个习惯,在复习完一门课后,他总是挑一门更简单的课进行复习,而他复习这门课的效率为两门课的难度差的 ...
- 开学JAVA第一次测试
定义 ScoreInformation 类,其中包括七个私有变量(stunumber,name, mathematicsscore, englishiscore,networkscore, datab ...
随机推荐
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
- 读取 raspberrypi 的cpu和gpu温度
#!/usr/bin/env python # -*- coding: utf-8 -*- import requests import json import time import command ...
- 离PACKET_INp获取信息acket data
于Floodlight模块假设要packet in消息,就对对应的消息类型进行监听就可以.然后在receive方法中就能够操纵这个上传上来的packet_in. 关键代码: E ...
- 开源Math.NET基础数学类库使用(06)数值分析之线性方程组直接求解
原文:[原创]开源Math.NET基础数学类库使用(06)数值分析之线性方程组直接求解 开源Math.NET基础数学类库使用系列文章总目录: 1.开源.NET基础数学计算组件Math.NET(一) ...
- Jafka来源分析——Processor
Jafka Acceptor接受client而建立后的连接请求,Acceptor会将Socket连接交给Processor进行处理.Processor通过下面的处理步骤进行client请求的处理: 1 ...
- MFC 盾webBrowser打开弹出的页面
void CansDlg::NewWindow3Explorer1(LPDISPATCH* ppDisp, BOOL* Cancel, unsigned long dwFlags, LPCTSTR b ...
- 多快好省的做个app开发
从技术经理的角度算一算,如何可以多快好省的做个app [导读]前端时间,一篇“从产品经理的角度算一算,做个app需要多少钱”的文章在网上疯传,可见大家对互联网创业的热情!这次,从一名技术经理的角度再给 ...
- Codeforces Round #261 (Div. 2) E. Pashmak and Graph DP
http://codeforces.com/contest/459/problem/E 不明确的是我的代码为啥AC不了,我的是记录we[i]以i为结尾的点的最大权值得边,然后wa在第35 36组数据 ...
- MEF初体验之七：Using Catalogs
MEF特性化编程模型的价值主张之一是通过catalogs动态发现部件的能力.Catalogs允许应用程序很容易地消费那些通过[Export]已经自我注册的exports. Assembly Catal ...
- Error opening zip file or JAR manifest missing : D:\play-1.2.5/framework/play-1.2.5.jar
play框架写的项目,在eclipse中导入.build-path中全部jar包都加入.执行程序,出现: Error occurred during initialization of VM agen ...