第一次测试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 ...
随机推荐
- _00013 一致性哈希算法 Consistent Hashing 新的讨论，并出现相应的解决
笔者博文:妳那伊抹微笑 博客地址:http://blog.csdn.net/u012185296 个性签名:世界上最遥远的距离不是天涯,也不是海角,而是我站在妳的面前.妳却感觉不到我的存在 技术方向: ...
- Docker镜像与容器命令（转）
Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...
- 北邮iptv用WindowsMediaplayer打不开的解决的方法
前言:之前我的iptv能够用,可是有次我安装了realplayer,它就偷偷把iptv文件的默认打开方式给篡改了,卸载了 realplayer之后,iptv不能直接用 ...
- jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览（模拟异步上传）
在web开发中,最纠结的一项就是文件上传,最近由于项目需要前后摸索了四天在这里分享给大家.如有不足,望指出!! 前台:jquery.easyui.html 后台:thinkphp 主要涉及语言:jqu ...
- iOS的图表显示的实现
在app通常有家居展览的照片,显示广告.或者头条新闻.通常网易新闻client 如图,红框框的位置就是一个典型的图展, 熟悉iOS的人肯定知道,这个是个UIScrollview,里面加几张图片就可以实 ...
- 杭电1171 Big Event in HDU（母函数+多重背包解法）
Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- （ArcGIS API For Silverlight ）QueryTask 跨层查询，和监控完整的查询！
(ArcGIS API For Silverlight )QueryTask 跨层查询,和监控完整的查询! 直接在源代码: 定义全局变量: int index=0; /// & ...
- JavaScript IDE
哪些JavaScript IDE最好用? 阅读本文之前,分享大家一张图片,看图会发现JavaScript开发需求最高,占比达到42.84%,因此掌握JavaScript语言好工作就不愁啦,工欲善其 ...
- php+sqlite 最佳web服务器
1 wampserver 支持mysql.每次都启动mysql,可以手动停止.但是运行时有时会很慢. 放弃 2 APS绿色版(Apache+PHP+SQLite) 组件环境:Apache2.2. ...
- Windows 8本地化多语言支持
原文:Windows 8本地化多语言支持 在Win8平台处理本地化多语言的支持相对比较容易的,但比WP8稍微复杂一点,并不像WP8平台那样大部分工作都有VS IDE处理,Win8平台的操作基本需要开发 ...