11.20 HTML及CSS
<div>用于分组HTML元素的块级元素
HTML表单，用于收集不同类型的用户输入
<input type='radio'>:定义了表单的单选框按钮
<input type='checkbox'>:定义了表单的复选框按钮，用户需要从若干给定的选项中选取一个或若干选项
<input type='submit'>:提交按钮，单击按钮时，表单的内容会被传送到另一个文件，表单的动作属性定义了目的文件的文件名
<div id="container" style="width: 500px">
<div id="header" style="background-color: aquamarine">
<h1 style="margin-bottom: 0px;">This is a story</h1></div>
<div id="menu" style="background-color: burlywood;height: 200px;width: 100px;float:left;">
java<br>
python<br>
html<br>
cs<br>
js<br>
</div>
<div id="content" style="background-color: darkgray;height: 200px;width: 400px;float: left">this is a content</div>
<div id="footer" style="background-color: crimson;text-align: center">
this is the end
</div>
</div>
<fieldset></fieldset>:定义一块区域
<legend></legend>:区域的标题
<vale>的值，是标识这个元素的名称，用户可以看到的值
<fieldset>
<legend>title one</legend>
shuru:<input type="text" name="123" id="123" size="30" placeholder="input data">
</fieldset>
<iframe name="abc">
<p><a href="www.baidu.com">this is a link</a></p>
</iframe>
HTML框架，通过使用框架，在同一个浏览器窗口显示不止一个页面
颜色用16进制表示：最小值0：#00，最大值255：#FF。表示RGB三种颜色的组合。
JavaScript使得HTML具有更强的动态性和交互性，常用于图片操作，表单提交和内容动态更新。
<script>用户定义客户端脚本，既可以包含脚本语句，也可以通过src属性指向外部脚本文件
这是怎样的一种状态，孤独是多么的无敌，我不想在这虚度光阴啊。
核心组网交换技术
上升通道打开，股价上涨
HTML字符实体：某些字符是预留的，要显示预留字符，就要使用字符实体。表示：&实体名
空格
> >
< <
& &
URL:是一个网页地址，Web浏览器通过URL从Web服务器请求页面。1）可以由字母组成；2）互联网协议IP地址组成
统一资源定位符用于定位万维网上的文档
HTML基本文档（HTML Basic Document）
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
基本标签(Basic Tags)
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->
文本格式化（Formatting）
<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
链接（Links）
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
图片（Images）
<img src="URL" alt="Alternate Text" height="42" width="42">
样式（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
Tables
<table border="1">
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>
表单（Forms）
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
HTML
CSS
JavaScript
最后，在自己的服务器上托管网站
CSS：层叠样式表，同时控制多重网页的样式和布局，一般在<head>中设置<style>进行样式设定。
作用：1）定义如何显示HTML元素；2）从长存储在样式表中
3）外部样式表通常存储在CSS文件中 4）多个样式可层叠为一
<head>
<meta charset="UTF-8" content="This is a meta data" name="dengyexun">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="home.html">
<style>
body {
background-color: darkgray;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
h1 {
color: cornflowerblue;
text-align: center;
}
</style>
</head>
CSS规则由两部分构成：选择器(selector)，以及一条或多条声明
selector {declaration;declaration...}
h1 {color:blue; font-size:20px}
选择器通常是需要改变样式的HTML元素，每一条声明由一个属性和一个值构成，属性和值被冒号分开
CSS语法：
要在HTML中设置CSS的样式，需要在元素中设置id和class选择器
1）id选择器：为标有特定id的HTML元素指定特定的样式，在CSS中id选择器以“#”来定义
2）class选择器：用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
class选择器在HTML中以class属性表示，在css中，类选择器以“.”表示
在以下的例子中，所有拥有center类的HTML元素均为居中：
.center{text-align:center;}
CSS的创建
当读入一个css表时，浏览器会根据他来格式化HTML文档
插入样式表的三种方法：
1）外部样式表：需要对应于很多页面时，需要外部式样表，这样就可以通过改变一个外部文件来改变整个站点的外观
每个使用<link>标签链接到样式表，<link>标签在文档的头部。
<head>
<link rel='stylesheet' type='text/css href='mystyle.css'>
</head>
浏览器会从mystyle.css中读取样式声明，并根据他来格式文档
外部样式表内容不能包含html文档，文件的后缀为.css，如下样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
2）内部样式表：单个文档需要特殊样式，使用<style>标签在头部进行定义，如：
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3）内联样式：表现和内容混杂在一起，慎用这种方式
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS背景属性用于定义HTML背景：
background-color:背景颜色，在body的选择器中
body {background-color:'#ff0000';}
颜色定义的方式：1）十六进制：'#ff0000';2）RGB，如'rgb(255,0,0)';3)颜色名称,如'red'
background-image:背景图像，默认平铺重复显示，以覆盖整个元素实体
body {
background-image: url('/static/img/dyx.png');
// 水平方向平铺
background-repeat: repeat-x;
background-position:right top;
}
文本text;
text-align
letter-sapcing:字符之间的间隔
line-height:行与行之间的间隔
{direction:rtl;}文本的方向
文本阴影：参数1：水平偏移；参数2：垂直偏移；参数3：阴影颜色
#hcolor {
color: aquamarine;
letter-spacing: 2px;
text-align: center;
text-shadow: 2px 2px #FF0000;
}
11.20 HTML及CSS的更多相关文章
- 11个实用的CSS学习工具
1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...
- 11.20 CSS定位智博星网页制作
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu ...
- 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)
11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...
- 11个实用的CSS学习工具[转载收藏]
1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...
- 20道C#练习题（二）11——20题
11.一个游戏,前20关是每一关自身的分数,1-30关每一关是10分,31-40关,每一关是20分,1-49关,每一关是30分,第50关是100分,输入你现在闯到的关卡数,求你现在拥有的分数.利用if ...
- 11款最轻量级的CSS框架
日子一去不复返了HTML用于造型的网页.今天,CSS规则,很难想象没有它的任何网页设计.CSS在最近非常先进,用于创建复杂的Web设计和风格.那么,我们为什么要使用CSS框架?答案很简单.CSS框架主 ...
- 剑桥offer（11~20）
11.题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. class Solution { public: int NumberOf1(int n) { ; unsigned ...
- 软件工程项目组Z.XML会议记录 2013/11/20
软件工程项目组Z.XML会议记录 [例会时间]2013年11月20日星期三21:00-22:00 [例会形式]小组讨论 [例会地点]学生公寓3号楼会客厅 [例会主持]李孟 [会议记录]李孟 会议整体流 ...
- 用IBM WebSphere DataStage进行数据整合: 第 1 部分 分类： H2_ORACLE 2013-08-23 11:20 688人阅读 评论(0) 收藏
转自:http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0602zhoudp/ 引言 传统的数据整合方式需要大量的手工 ...
随机推荐
- SpringBoot------使用Fastjson解析Json数据
方法一: 1.在pom.xml文件下添加依赖包 <dependency> <groupId>com.alibaba</groupId> <artifactId ...
- 手机APP支付--整合支付宝支付控件
长话短说,本文根据支付宝官方说明文档,简单总结下,并且说明下开发过程碰到的问题以及该如何解决. 整合步骤: 1 登录商家服务网站,下载开发包,地址:https://b.alipay.com/order ...
- Dubbo -- 系统学习 笔记 -- 成熟度
Dubbo -- 系统学习 笔记 -- 目录 成熟度 功能成熟度 策略成熟度 啦啦啦
- [AX]AX2012 R2 HR Jobs, Positions, Department和Workers
部门.作业(Job的官方翻译)和位置(Position的官方翻译)是AX人力资源管理的基本组织元素,Job和Position在AX有的地方又称作工作和职位,其实这个翻译更为恰当. Job定义的是一个工 ...
- centos7安装python-3.5
sudo yum install gcc wget https://www.python.org/ftp/python/3.5.0/Python-3.5.0.tgz sudo cp Python-.t ...
- springboot测试service层的单元测试
package com.test.service; import com.task.Application;import com.task.model.po.TaskRecordDo;import o ...
- 使用librtmp进行H264与AAC直播
libx264 版本是 128libfaac 版本是 1.28 1.帧的划分 1.1 H.264 帧 对于 H.264 而言每帧的界定符为 00 00 00 01 或者 00 00 01. 比如下面的 ...
- Ansible 使用 Playbook 管理 Nginx 配置文件
前面我们已经安装完 Nginx,但是在日常维护中经常需要修改配置文件,并重新加载配置文件,因此来写一个管理 Nginx 配置文件的 Playbook: [root@localhost ~]$ mkdi ...
- 第四篇：MapReduce计算模型
前言 本文讲解Hadoop中的编程及计算模型MapReduce,并将给出在MapReduce模型下编程的基本套路. 模型架构 在Hadoop中,用于执行计算任务(MapReduce任务)的机器有两个角 ...
- It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing ___Error Installing APK
一 : 根据以下路径,找到Instant Run中的选项 File —— Settings——Build,Execution,Deployment——Instant Run ...