码迷，mamicode.com
首页 > Web开发 > 详细

html基础

时间：2016-06-12 23:13:53      阅读：190      评论：0      收藏：0      [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html_test</title>

</head>
<body>
<p><em>斜体</em></p>
<p><h2><strong>加粗</strong></h2></p>
<style>
span{color:blue}
</style>
<span>蓝色</span>
<p><q>短文本引用，如引用一句别人的话</q><p>
<blockquote>长文本引用，如在文章中引用大段文字</blockquote>
<p>换行<br />显示<br />的示例</p>
<p>空&nbsp格&nbsp操&nbsp&nbsp作</p>
<hr /><center>水平横线</center><hr />
<address>地址标签:<a href="www.baidu.com">百度</a></address>为网页加入地址信息
<br /><code>(显示一行代码)var i = i++;</code>
<br /><pre><strong>加入大段代码</strong>
String name ="小明";
int i = 0;
for(i = 0;i<10;i++){
System.out.println("name");
}
</pre>
<div><span>div把一些独立的逻辑部分划分出来</span></div>
<div id="hotList">
<ul>
<li>信息列表1</li>
<li>信息列表2</li>
<li>信息列表3</li>
</ul>
</div>
<div>
<ol>
<div id="learninglnstructed">
<li>信息列表1</li></div>
<li>信息列表2</li>
<li>信息列表3</li>
</ol>
</div>

<style type="text/css">
.list{
	font-weight:bold;
	background:#69f;
	color:#ffffff;
	border:1px solid #ffffff;
	white-space:nowrap;
	height:26px;
	line-height:26px;
	vertical-align:middle;
}
td{
font-family:宋体;
	font-size:12px;
	border:1px solid #333333;
	background:#f0f0f0;
	padding:8px;
	line-height:120%;
}
</style>
<table summary="摘要内容，不会在浏览器中显示出来，增加表格的可读性">
<caption>标题</caption>
<th>表头</th><th>表头</th><th>表头</th><th>表头</th>
<tr class="list"><td>11</td><td>11</td><td>11</td><td>11</td></tr>
<tr class="list"><td>11</td><td>11</td><td>11</td></tr>
<tr class="list"><td>11</td><td>11</td></tr>
<tr class="list"><td>11</td><td>11</td><td>11</td><td>11</td></tr>
</table>

<br />
<style type="text/css">a{color:red}</style>
<a href="www.baidu.com" title="鼠标滑过显示的文本">click here</a><br />
<a href="www.baidu.com" target="_blank">click here(在新的浏览器窗口中打开)</a><br />
<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&subject=主题&body=邮件内容">发送(链接email地址)</a>

<br /><br />
<img src="G:\壁纸\1.jpg"alt="图片加载失败"title="这是一张图片" />

<br /><br /><br />
<form method="post" action="save.jsp">
<label for="username">username:</label>
<input type="text" name="username" id="username" value="输入名字" />
<label for="password">password:</label>
<input type="password" name="password" id="password" value="输入密码" />
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset">
</form>
<form method="post" action="">
<label>connect us</label>
<textarea cols="10" rows="5">entery the content in there...  cols(列数)rows（行数）</textarea>
</form>

<br /><br />
<form name="inform" method="post" action="xxx.do">
<input type="radio" name="ra" value="va1" checked="checked">单选框0（默认选中）
<input type="radio" name="ra" value="va2" checked="">单选框1
<input type="radio" name="ra" value="va3" >单选框2
<br />
<input type="checkbox" name="ra" value="va1" checked="checked">复选框0（默认选中）
<input type="checkbox" name="ra" value="va2" checked="">复选框1
<input type="checkbox" name="ra" value="va3" >复选框2
<br /><br />
<label>下拉列表：</label>
<select>
	<option value="read">read</option>
	<option value="sport">sport</option>
	<option value="music">music</option>
	<option value="shopping" selected="selected">shopping</option>
</select>
<label>下拉列表进行多选：</label>
<select multiple="multiple">
	<option value="read">read</option>
	<option value="sport">sport</option>
	<option value="music">music</option>
	<option value="shopping" selected="selected">shopping</option>
</select><label>Ctrl+单击</label>
<br />
<label for="id1">标签1(id名必须相同)</label><input id="id1" type="radio" value="va" name="na"></input>&nbsp
<label for="id2">标签2(id名必须相同)</label><input id="id2" type="radio" value="va"name="na"></input>&nbsp
<label for="id3">标签3(id名必须相同)</label><input id="id3" type="radio" value="va"name="na"></input>&nbsp
<br />
<input type="submit" value="提交" name="button">
<input type="reset" value="重置" name="reset">
</form>
<br />


<p>********<span>css</span>样式（嵌入式）********</p>
<style type="text/css">
p{	color:red;
	font-size:20px;/*字号*/
	font-weight:bold;/*加粗*/
	}
span{color:#00f0ff;}
</style>

<p style="color:#00f000;font-size=15px">内联css样式，直接写在现有的html标签中</p>

外部式css样式，写在单独的文件中。
<!--这个css样式文件以".css"为扩展名，
<link href="xx.css" rel="stylesheet" type="text/css" />
<link>标签一般写在<head>标签之内
-->
三种样式的优先级：内联式 > 嵌入式 > 外部式 

<br /><br />
<style type="text/css">
.str{font-weight:bold;color:red;}
</style>
<span class="str">类选择器</span>


<br /><br />
<style type="text/css">
#setGreen{color:green;}
</style>
<span id="setGreen">ID选择器</span>
<br />
<!--
类选择器和ID选择器的区别
1.ID选择器只能在文档中使用一次，类选择器可以使用多次
2.可以使用类选择器词列表方法为一个元素同时设置多个样式，ID不可以
-->
<style type="text/css">
.a{color:red;}
.b{font-size:20px}
</style>
<span class="a b">类选择器和ID选择器的区别</span>


<br /><br />
<style type="text/css">
.first>span{border:1px solid red; color:green}
</style>
<p class="first"><span>子选择器</span>的使用方法示例</p>



<br /><br />
<style type="text/css">
.first>span{border:1px solid red; color:green}
.food>li{color:#023143}
</style>
<p class="first">
	<span>后代（包含）选择器</span>的使用<span>方法</span>示例
</p>
<ul class="food">
	<li>实例1---
	<ul>
	<li>实例---</li><li>实例---</li><li>实例---</li>
	</ul>
	</li>
	
	<li>实例2---
	<ul>
	<li>实例---</li><li>实例---</li><li>实例---</li>
	</ul>
	</li>
</ul>
<!--后代选择器与子选择器的区别：
子选择器仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代。
后代选择器是作用于所有子后代元素
后代通过空格进行选择；子通过">"进行选择
-->


<br />
<em><span title="使用（*）号指定，使所有的标签都实现这个样式">通用选择器的使用</span></em>
<style type="text/css">
	/*使用（*）号指定，使所有的标签都实现这个样式
*{color:yellow;}
	*/
</style>


<br />
<br />
<style type="text/css">
a:hover{color:yellow;}
</style>
<a href="xxxx">伪类选择符（鼠标滑过显示黄色）</a>


<br />
<span>分组选择符</span>
<style type="text/css"> 
/*
h1,span{color:red;}
相当于
h1{color:red;}
span{color:red;}
*/
</style>

<br />
标签的权值为1，类选择器的权值为10，ID选择符的权值最高为100
浏览器是根据权值来判断使用那种css样式，哪个权值高的就使用哪个
<br />
层叠<br /> 
<style type="text/css">
p{color:red;}
p{color:green;}/*最后会出现green样式，把前面的样式覆盖了*/
</style>
内联样式表（标签内部） > 嵌入样式表（当前文件中） > 外部样式表（外部文件中）
<br />
<span type="color:red">重要性（给某些样式设置最高权值）</span>
<style text="text/css">
/*这样最终样式为red
p{color:red!important;}
p{color:green;}                                                                                                                 
*/
</style>

<br />
<h3><strong>文字排版</strong></h3>
<style type="text/css">
/*
body{
	font-family:"宋体";/*Microsoft Yahei*/
	font-size:12px;12像素
	color:#666
	}
p span{
	font-weight:hold;/*粗体*/
	font-style:italic;/*斜体*/
	text-decoration:underline;/*下划线*/
	text-decoration:line-through;/*删除线*/
	text-indent:2em;/*文字缩进（前面空两个文字的位置）；2em的意思是文字的2倍大小*/
	line-height:2em;/*行高*/
	letter-spacing:50px/*字母与字母之间的间距*/
	
	}
div{
	text-align:right;/*center,left实现文本居中、右对齐。。*/
   }
	
	
*/
</style>

<span title="常用的块状元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
常用的内联元素：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常用的内联块状元素：<img>,<input>">html中的标签大体被分为三种不同的类型：块状元素、内联元素（行元素）、内联块状元素
</span>
<!--
常用的块状元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
常用的内联元素：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常用的内联块状元素：<img>,<input>
-->



<h3>块级元素</h3>
<h3>特点：</h3>
<h4>1.每个块级元素都从新的一行开始，并且其后的元素也另起一行（一个块级元素独占一行）</h4>
<h5>2.元素的高度、宽度、行高以及底边距都可以设置</h5>
<h6>3.元素宽度在不同设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。</h6>
<!--
<style type="text/css">
a{display:block;}将内联元素a转换为块状元素，从而使a元素具有块状元素特点
</style>
-->


<label>内联元素</label>
<span>特点：</span>
<em>1.和其他元素都在一行上</em>
<em>2.元素的高度、宽度、及顶部和底部边距不可设置</em>
<em>3.元素的宽度就是它包含的文字或图片的宽度，不可改变</em>
<!--
<style type="text/css">
div{display:inline;}将块状元素div转换为内联元素，从而使div元素具有内联元素特点
</style>
-->

内联块状元素
:就是同时具备内联元素和块状元素的特点
特点：1.和其他元素都在一行上；2.元素的高度、宽度、行高以及底边距都可以设置

<!--
<style type="text/css">
div{display:inline-block;}将块状元素div转换为内联元素，从而使div元素具有内联元素特点
</style>
-->


</body>
</html>

　　

html基础

标签：

原文地址：http://www.cnblogs.com/wwzyy/p/5578853.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！