第一次测试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 ...
随机推荐
- SSH证书登录方式（无password验证登录)
经常在工作中须要在各个Linux机间进行跳转,每次password的输入成了麻烦,并且也不安全.在实际使用中,在windows下常使用secureCRT工具或teraterm工具进行SSH登录.以及实 ...
- 使用 Cordova+Visual Studio 创建跨平台移动应用（2）
目前开发移动应用有三种模式:Native.Hybird.Web,若要开发跨平台的移动应用,又希望与本地API交互,那么Hybird是一个非常好的选择. 作为一个.Net程序员,可以使用熟悉 ...
- Codeforces 385B Bear and Strings
题目链接:Codeforces 385B Bear and Strings 记录下每一个bear的起始位置和终止位置,然后扫一遍记录下来的结构体数组,过程中用一个变量记录上一个扫过的位置,用来去重. ...
- linux如何执行后台进程
linux直接执行一个过程.电流指令结束后.或者关闭掉shell形成过程将结束. 如何在后台执行的处理 办法1 采用nohup命令,nohup命令本身的意思no hung up他说,他们将不会收到sh ...
- USB OTG简要
1 介绍 随着USB2.0发布版本号,USB更受欢迎.它已成为一种标准接口.现在,USB它支持三种速度:低速(1.5Mb/s).全速(12Mb/s)速(480Mb/s),四种传输类型:块传输.同步传输 ...
- HDU 1815， POJ 2749 Building roads（2-sat）
HDU 1815, POJ 2749 Building roads pid=1815" target="_blank" style="">题目链 ...
- cocos2dx3.1-lua移植android流程
我很懒惰,写这篇博客只是为了能够转出后,当忘记查看,所以我写了下面非常简单的内容.假设完全没有经验的学生请找另一篇文章 一.环境配置(win7): 用户变量如下面: ANDROID_SDK_ROOT: ...
- SICP-2锻炼.34
[锻炼2.34] 为x给定值,找到一个多项式x的值,它也可以被形式化为累积. 下多项式的值: an*x^n + an-1*x^n-1 + .... + a1*x + a0 採用著名的Horner规则, ...
- java javaEE javaWEB J2EE程序猿猿程序是脑损伤，终身工作程序猿
这几天我越来越郁闷.程序员现在很火----特javaEE员. 但我觉得火只是给人们的工作程序员. 原因 javaweb该项目是非常大的.没听过那个码农能单独接到什么项目.仅仅能被人剥削. 有人不信,我 ...
- asp.net弹出层实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...