html-1
html概况:
<link href="test.css" rel="stylesheet" type="text/css"/> //test.css是要引入的css文件
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
样式： //不加css的样式
<head> //head部分不会被显示出来
<style type="text/css">
h1 {color: red} //h1标题的样式
p {color: blue} //p段落的样式
</style>
</head>
<base target="_blank" /> //在body之上定义target属性，后面所有的链接都将在新窗口中打开，就不用单独添加属性了
<body> //body部分会被显示在浏览器中
<h1>header 1</h1> //h1标题将显示head定义的样式
<p>A paragraph.</p> //p段落将显示head定义的样式
</body>
一段html代码：
<html>
<head>
这里定义和描述
</head>
<body>
这里是代码 <!--这里是注释-->
</body>
</html>
如果出现中文乱码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="10;url=http://www.w3school.com.cn" /> //刷新当前网页；10秒钟之后刷新；刷新后的界面是url=的网址
<meta name="author" content="可以用meta属性描述作者什么乱七八糟的东西">
</head>
在html中插入脚本：
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
元素：
段落：
<p>这样写是一段，<br />是段落</p> //:段落元素 中间的字用回车、空格等浏览器自动忽略并根据窗口大小调节行
要想在<p></p>中间拆分换行用<br />。
如果需要保留内容的 空格 和 换行 可以用 <pre> </pre> 这样浏览器会保留内容的回车或者空格。称为预格式文本。
标题：
<h1>标题内容</h1> ....<h6>标题内容</h6> //不要为调整加粗或者大小用标题
居中显示：
<h1 align="center">This is heading 1</h1> // 显示位置用align定义，类似文档中的居中显示效果一样
水平线：
<hr /> //只加一行hr就会显示出一条水平直线
设置文档背景颜色：
<body bgcolor="value" text="yellow"> //设置了背景色；设置了文本颜色
定义链接：
<a href="http://www.w3school.com.cn" style="text-decoration:none">This is a link</a> //该行是一个连接;href是链接地址；style是不生成下划线
<a href="/example/html/lastpage.html" target="_blank"> //设置target为_blank该链接会在新窗口中打开
<img border="0" src="/i/eg_buttonnext.gif" /> //该图片是一个连接；属性设置边框
</a>
定义图片：
<img src="/i/eg_w3school.gif" width="200" height="20" align="bottom" alt="图片的意思"/> //从文件夹定义; 调整大小；位置属性还是align[bottom:下；middle:中；top:上；left:左浮动；right:右浮动]; 当图片无法显示时，会显示alt定义的信息
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" ismap /> //从网络定义；可变成图像映射（状态了坐标变化）
<body background="/i/eg_background.jpg"> //从body定义背景图片
<img />可以结合<map></map> 、<area /> 一起用 ，可以吧图中每个图变成超链接。
缩写和浮动展开：
<abbr title="etcetera">etc.</abbr> //显示为etc. 鼠标点上去会有完整的单词显示
<br />
<acronym title="World Wide Web">WWW</acronym> //显示为WWW 鼠标移动上去会有完整的显示
连接到同一个界面的不同位置：
<p>
<a href="#C5">查看 Chapter 5。</a> //跳到名字为C5的位置也就是Chapter 5的位置
</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C5">Chapter 5</a></h2>
<p>This chapter explains ba bla bla</p>
框架：
<frameset cols="50%,*,25%"> //把cols改成rows就是横向框架
<frame src="/example/html/frame_a.html" noresize="noresize" /> //使框架不可拖动的属性设置
<frame src="/example/html/frame_b.html" /> //该框架可以拖动改变大小
<frame src="/example/html/frame_c.html#C10" /> //同上 显示name=C10的位置
</frameset>
<iframe src="/i/eg_landscape.jpg"></iframe> //这样的是把jpg图片放到框框里
表格行列：
<h4>表头：</h4> //标头标题
<table width="400" border="1" cellpadding="20" cellspacing="1" bgcolor="red" background="/i/eg_bg_07.gif"> //单元格宽度；边框 改变大小改变边框宽度；另一个属性是数据与边框的距离；下一个是边框本身宽度 可以调节观察；下一个给表加颜色或者背景图片"background="/i/eg_bg_07.gif""；另外框架等这种属性都可以在table中添加
<caption>我的标题</caption> //标题
<thead> //表格页眉；<tbody>表格主体 ；<tfoot>表格页脚
<tr> //行
<th align="left">姓名</th> //列；left表示左对齐 right：右对齐
<th>姓名</th>
<th colspan="2">电话电话号码</th> //查分为列 把colspan改成rowspan就是列拆分
</tr>
</thead>
<tr>
<td bgcolor="red" >Bill Gates</td> //像单元格加背景
<td background="/i/eg_bg_07.gif">555 77 854</td> //向单元格加图片
<td>555 77 854</td>
<td>这样啊 </td>
</tr>
</table>
列表内可以添加各种想要的元素
列表：
<ol type="A"> //以A，B..为标号 有序列表 ；可以是a、I、等等。默认是数字，属性可以添加start=50开始。
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<h4>一个无序列表</h4>
<ul type="disc"> //实心点 ；"circle":空心点；"square":实心方块
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
表单复选框：：
<form>
<select name="cars"> //下拉菜单
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option> //如果没有selected属性设置则默认为Volvo
<option value="audi">Audi</option>
</select>
<br />
<fieldset> //在数据周围绘制一个带标题的边框
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
定义选项组：
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
//输入框和确认表单
<form action="/example/html/form_action.asp" method="get"> // 数据传送给.asp文件处理
<p>First name: <input type="text" name="fname" size="20"/></p> //text类型可以定义大小
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="好的确认" /> //也可以用：<button type="submit">好的确认</button>
</form>
//复选框和确认表单
<form name="input" action="/html/html_form_action.asp" method="get"> // 数据传送给.asp文件处理
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" /> //紫色属性设置为默认选项
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" /> //value若是中文.asp接受值为编码形式
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="确认提交" />
</form>
//单选和确认
<form name="input" action="/html/html_form_action.asp" method="get"> //get方法
Male:
<input type="radio" name="Sex" value="Male" checked="checked"> //.asp接受到的数据是：Sex=Male
<br />
<label for="male">Female</label> //<label>标签;for属性应与id相同，也可以直接写male:
<input type="radio" name="Sex" value="Female"> //.asp接受到的数据是：Sex=Female
<br />
<input type ="submit" value ="提交">
</form>
字体设置：
加粗：<b> </b> 插入字（下划线）：<ins> </ins>
大号：<big> </big> 小号：<small> </small>
着重：<em> </em> 加重语气： <strong> </strong>
斜体：<i> </i> 删除（中划线）：<del> </del>
定义下标：<sub> </sub> 定义上标： <sup> </sup>