Html
<title>关键字</title>搜索关键字
<h>标题</h>
<p></p>段落
color:#000;
text-align:文字左右居中
<img src=” ”>插入图片
. <html></html>
称为根标签,所有的网页标签都在<html></html>中。
<head>
标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>
、<script>
、 <style>
、<link>
、 <meta>
等标签,头部标签在下一小节中会有详细介绍。
在<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
<em>
需要强调的文本
</em>
斜体
<strong>
需要强调的文本
</strong>
粗体比
<em>
更强烈
<q>引用短文本</q>
<blockquote>引用长文本</blockquote>
<br>换行
 空格
<hr/>分隔横线
<address>联系地址信息</address>
<code>代码语言</code>
<pre>语言代码段</pre>
<ul>无序列表
<li>我的第一个列表信息</li>
<li>我的第二个信息列表</li>
</ul>
<ol>有序列表
<li>我的第一个列表信息。</li>
<li>我的第一个列表信息。</li>
</ol>
<div><盒子/div>
<divid=" ">命名
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
<tablesummary=”表格简介文本”>
<caption>标题文本</caption>
<table>
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
如下代码:
<ahref="目标网址" target="_blank">clickhere!</a>
<a href="mailto:?subject=观了不起的比盖茨&body=你好,对此评论有些想法。&yy@imooc.com">发送邮件</a>
<img src="图片地址" alt="下载失败时的替换文本"title = "提示文本">
<form method="传送方式" action="服务器文件">
<form>
<inputtype="text/password" name="名称" value="文本" />
</form>
<textarea rows="行数"cols="列数">文本</textarea>文本域支持多行文本输入
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>同一组的单选按钮,name 取值一定要一致
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
<formaction="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物" seleced="selected" >购物</option>
</select>
</form>
在<select>标签中设置multiple="multiple"
属性,就可以实现多选功能
<input type="submit" value="提交">
<input type="reset" value="重置">
<label for="控件id名称">
Css
front-size:12px;设置文字字号
<span></span>样式设置
font-weight:bold字体加粗
CSS中也有注释语句:用/*
注释语句
*/
<p style="color:red">这里文字是红色。</p>
外部式css样式,写在单独的一个文件中
<link href="base.css" rel="stylesheet" type="text/css"/>
内联式 > 嵌入式 > 外部式
优先级
<spanstyle="color:pink">大于
span{
color:red;
}大于
style.css
span{
color: blue;
.food>li子选择器
.food li后代选择器
a:hover{color:red;font-size:20px;}鼠标滑动的状态
p{color:red!important;}浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
a{font-weight:bold;}
粗体
.oldPrice{text-decoration:line-through;}
p{text-indent:2em;}首行缩进
p{line-height:2em;}行高
letter-spacing:50px;字间距
a{display:block;}块状元素占据一行
display:inline;内联元素
dashed(虚线)| dotted(点线)| solid(实线)
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
padding和margin的区别,padding在边框里,margin在边框外。
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}