第一次测试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 ...
随机推荐
- python 凸包(经纬度) ＋ 面积［近似］
def cross(A,B): return A[0] * B[1] - A[1] * B[0] def vectorMinus( a , b): return ( (a[0] - b[0] )*10 ...
- linux上安装配置vsftpd(转)
转自:http://www.webarch.org/category/linux生产环境是Centos5.6,由于需要提供ftp服务,就找了一款比较小巧的ftp服务器端软件,vsftpd(vsftpd ...
- 【原创翻译】认识MVC设计模式：web应用开发的基础（实际编码篇）
原文地址:http://www.larryullman.com/2009/10/15/understanding-mvc-part-3/ 全系列INDEX [原创翻译]认识MVC设计模式:web应用开 ...
- PhoneGap 开发与应用 上传 App Store 在
几个简单的归纳过程,前提是你有一个开发者账户,而且必须有Mac 虚拟机或真机.尽管WIndows 也可以上载证书.但最终也必须用于上传应用程序 Xcode 要么 Application Loader ...
- 2014在百度之星程序设计大赛 - 资格 第四个问题 Labyrinth
小记:dfs暂停,不是决定性的 思维:由于只有三个方向向上和向下和向右,然后,我对待每列从左至右.然后,当在下一列的上一列的处理再加工每个值去获得正确的值,保存各坐标的数组格你可以得到最大值.每处理完 ...
- BZOJ 3236 AHOI 2013 作业 莫队算法
题目大意:给出一些数,问在一个区间中不同的数值有多少种,和在一个区间中不同的数值有多少个. 思路:因为没有改动,所以就想到了莫队算法.然后我写了5K+的曼哈顿距离最小生成树,然后果断T了.(100s的 ...
- 8.Eclipse中创建Maven Web项目
第一步: 创建maven webproject 注意以下一步: 第二步: 继承parent 改动pom.xml文件例如以下 <projectxmlns="http://maven ...
- 谈论json - json经常使用的功能
json经常使用的功能有JSON.parse().JSON.stringify(),供json对象和字符串之间的相互转换. 1.JSON.parse() 将 JavaScript 对象符号 (JSON ...
- 使用axis公布weblogic(一个)
1.在MyEclipse创建一个新的Web Project.新类,声明函数名称.参数,为了不写功能实体. 2.将java2wsdl.bat将文件复制到classes目录,据内部参数更改自己的实际情况 ...
- RH133读书 笔记(5) - Lab 5 User and Group Administration
Lab 5 User and Group Administration Goal: To build skills for user and group administration. Estimat ...