文档章节

30 HTML CSS HTTP

恋佳
 恋佳
发布于 2015/07/22 14:05
字数 1078
阅读 2
收藏 0

1. HTML(Hyper Text Markup Language),超文本标记语言。HTML文件的后缀名一般是:.htm,.html




<html>
	<head>

		<title>网页的标题</title>


	</head>

	<body>

		<h1><font color="red">i miss you bingjia</font></h1>
		<a href="www.baidu.com" target="blank">这是一个连接</a>
		<br>
		<br>
		
		<table border="1" align="center" width="80%">
		<!-- tr 一行,td一列,th,居中加粗一列
			<tr>
				<th> i miss you
				</th>
				<td> bb
				</td>
				<td> cc
				</td>
			</tr>
				<td align="center"><b>dd</b>
				</td>
				<td>ee
				</td>
				<td>ff
				</td>
			</tr>
		
		
		</table>

		-->
		
		
		<form>
		<!-- text文本框,password 密码框,checkbox 复选框-->
		username:<input type="text"/>
		<br>
		password:<input type="password"/>
		<br>
		兴趣 学习<input type="checkbox"/>
			 摄影<input type="checkbox"/>
			 旅行<input type="checkbox"/><br>
			 <!--radio 单选框  用name限定组-->
		性别 男<input type="radio" name="gender"/>
			  女<input type="radio" name="gender"/><br>
			  <!--select 下拉表单-->
		学历 <select>
			<option>小学</option>
			<option>中学</option>
			<option>高中</option>
			<option>大学</option>
			 </select><br>
			 <!--textarea-->
	    备注:<textarea></textarea><br>
		文件上传:<input type="file"/>
		<!--图片-->
		图片:<img src="QQ截图20140407195034.jpg"/>
		<!--按钮-->
		<br>
		<br>
		<input type="submit" value="提交"/>   
		<input type="reset"  value="重置"/>
		<input type="button" value="按钮"/>
		
		</form>
	</body>





</html>


2. 表单(form):

3. 浏览器内核:WebKit,trident




4. CSS(层叠样式表)

样式表定义元素怎样去显示.外部样式表能够让你改变所有出现在你WEB中的外观和布局,而仅仅通过编辑一个单独的CSS文档.(原理就是一动多变)

<link rel="stylesheet" type="text/css" href="test.css">

CSS的语法由三部分组成: 一个选择器,一个属性和一个值,例如:
–selector {property: value}

选择器是你希望去定义的HTML元素/标签,每个属性可以有一个值,属性和值由冒号区分开外面用大括号括起来
body {color: black}

如果值为多个单词则用双引号括起来
–p {font-family: "sans serif"}
•注意:如果你想指定多个属性,你就必须将每个属性用分号隔开,下面的例子就演示了怎样定义居中红色文字段落
–p {text-align:center;color:red}

(一)类选择器

(1)用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落:一种是右对齐,另外是居中的。这就告诉你该怎么用样式来做到这点

–p.right {text-align: right}
–p.center {text-align: center}

<p class="right"> This paragraph will be right-aligned. </p>
	<p class="center"> This paragraph will be center-aligned. </p>


(2)也可以省略标签名称直接去定义,这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字:
–.center {text-align: center}


(二)ID选择器


使用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>

(三)插入样式表

(1)外部样式表:使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用

–<head>
–<link rel="stylesheet" type="text/css" href="mystyle.css" />
–</head>
(2)内嵌样式表:

一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式,像这样

<head>
<style type="text/css">
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

(3)行内样式表

在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red

–<p style="color: red; margin-left: 20px"> This is a paragraph </p>

 (4) 超链接样式表

a:link {color:green}
a:visited {color:yellow}
a:hover {color: black}
a:active {color: blue}


5. Http是一个基于请求/响应模式的,无状态的协议(request/response based ,stateless protocol)

© 著作权归作者所有

恋佳
粉丝 0
博文 76
码字总数 62107
作品 0
大连
私信 提问
nginx之缓存和压缩

location /ecshop{ rewrite "goods-(d{1,7}).html" /ecshop/goods.php?id=1; } #有{}正则用“” [root@localhost nginx]# ./sbin/nginx -s stop [root@localhost nginx]# ./sbin/nginx http......

泡海椒
2016/03/04
142
0
Js实现手机端红包雨效果

演示下载地址:http://www.erdangjiade.com/js/1105.html $(document).ready(function() { var win = (parseInt($(".couten").css("width"))) - 60; $(".mo").css("height", $(document).hei......

2当家的
2017/02/08
1K
0
H5+css从入门到精通

这里有个老旧html css代码的对比 这里是新的html css代码 这里我们来发现一个超链接引用css文件的方式和h5里面引用css里面定义的类的一般格式 这里注意了h5 里面的引用超链接有相对路径和绝对...

科技小能手
2017/11/12
0
0
CSS3学习3----举例

1.浏览器支持的四种状态: ①:link → 未访问的 链接 。 ②:visited → 已访问的 链接 。 ③:hover → 鼠标正停在上面的 链接 。 ④:active → 正在点击的链接 eg> link-visited-hover-a...

技术小胖子
2017/11/09
0
0
树形菜单如何设置默认打开?

用户管理 增加用户 删除用户 修改用户信息 子类管理

wakelay
2013/05/16
578
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式-简介

设计模式简介 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案...

HOT_POT
9分钟前
0
0
SpringBoot版

使用外部Tomcat来启动程序,而不是用默认的Application的main()来启动。 因为,使用Application的main()来启动,修改页面的时候,刷新不会立即有反应。而是要make一下(Ctrl+F5) 而且还要加入...

流小文
13分钟前
0
0
Disable Autostart of MySQL Server on Ubuntu

OSC Markdown Editer 真香,笔记一篇,懒得转中文,如有表述问题,请不吝指出,先谢为敬! OS: Ubuntu 19.04 When the MySQL server is installed, it automatically started with the OS. I...

Iridium
35分钟前
2
0
OpenStack RDO + S3

Packstack(RDO) installation "sync db timeout" issue version: openstack-packstack-13.0.0-0.1.0rc1.el7.noarchopenstack-packstack-puppet-13.0.0-0.1.0rc1.el7.noarch add timeout =>......

Firxiao
37分钟前
2
0
java运算符的优先级

https://www.cnblogs.com/zjfjava/p/5996666.html

南桥北木
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部