1.HTML
<!DOCTYPE html> <!--不是HTML标记,用来告知浏览器使用哪种HTML规范-->
<html> <!--开始标记-->
<head> <!--头部标记所包含的信息一般不显示在网页上-->
<title>标题</title> <!--标题标记,标题信息显示在浏览器的标题栏上-->
<!--元信息meta标记,记录作者、日期、时间、网页描述、关键词、页面刷新等-->
<meta name="author/ description/ keyword/ generator/ copyright/ robots" content="信息参数">
<!--name属性用来描述网页 编译器 搜索机器人应该抓取的页面-->
<!--http-equiv提供HTTP协议的响应头报文,帮助浏览器正确显示网页内容-->
<meta http-equiv="cache-control" content="no-cache"> <!--禁止浏览器从本地计算机的缓存中访问网页内容,并禁止脱机浏览-->
<meta http-equiv="refresh" content="时间"> <!--网页自动刷新时间>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"> <!---->
<meta http-equiv="expires" content="信息参数 GMT时间格式"> <!--设定网页在缓存中的过期时间,一旦过期,必须到服务器重新传输-->
<link rel="stylesheet" href="Study.css">
</head>
<body text="信息显示颜色" *bgcolor="背景颜色" *alink="活动链接颜色" *link="未访问链接的颜色" *vlink="已被访问的链接颜色" *background="url背景图像" topmargin="文档中上边距的大小px" leftmargin="左边距大小" class="one">
<!--注释信息-->
*<coment>注释内容,在很多浏览器中(Chrom等)会显示,不建议使用</coment><br>
<!--HTML 不区分大小写-->
*<h1 align="对齐方式 left/center/right/justify">标题字标记</h1> <!--从 h1 ~ h6 由大到小, 属于块级标记(浏览器会自动在其前后添加空行)-->
<pre>
<!--添加空格和特书字符-->
空格
⁢ <
> >
& &
" "
© 版权
® 注册商标
× *
÷/
<!--文本修饰标记-->
*<b>定义粗体</b>
*<i>定义斜体</i>
<u>定义下画线</u>
<del>定义删除线</del>
<sup>定义上标</sup>
<sub>定义下标</sub>
<strong>定义着重文字,粗体</strong>
<em>定义加重语气,斜体</em>
<small>变小字号</small>
<big>变大字号</big>
<!--计算机输出标记-->
<code>定义计算机代码</code>
<kbd>定义键盘码</kbd>
<samp>定义计算机代码样本</samp>
<it>定义打字机代码</it>
<var>定义变量</var>
<pre>定义预格式化文本</pre>
<!--引用和术语标记-->
<abbr>定义缩写</abbr>
<address>定义地址</address>
<blockquote>定义长的引用</blockquote>
<cite>定义引用</cite>
<q>定义短的引用语</q>
<dfn>定义项目</dfn>
*<font size="字号:+1~+7/1~7/-1~-7" color="颜色" face="字体">字体标记</font>
<p align="">段落标记</p> <!--块级标志,该标记中不能再包含其他块级标记-->
<br> 换行标记
<hr width="宽度" size="高度" color="" align=""> 水平分隔线
</pre>
*<ruby> <!--音标注释标记-->
中<rt>zhong</rt> <!--rt标记里放音标或注释,这个标记放在需要注释文本的后边-->
国<rp>(</rp> <rt>guo</rt> <rp>)</rp> <!--rp标记是防备浏览器不支持ruby,主要用来放置括号-->
</ruby>
<blockquote>段落缩进标记</blockquote> <!--常称为块引用标记,内容能够向右缩进5个英文字符位置,并在其周围增加外边距-->
<pre>预格式化标记</pre> <!--浏览器会保留源文件中所定义的格式,包括空格,缩进等-->
<ul type="disc实心圆/circle空心圆/square实心正方形"> <!--无序列表-->
<li type="">列表项</li>
</ul>
<ol type="" start="起始编号"> <!--有序列表-->
<li type="" value="改变当前编号,并影响后序编号"></li>
</ol>
<dl> <!--定义列表-->
<dt>标题</dt>
<dd>描述内容</dd>
</dl>
<a href="url" name="" title="提示信息" target="打开指定窗口">超链接标记</a><br>
<!-- _self在当前框架中打开链接 _blank在一个全新空白窗口打开链接 _top在根框架中打开链接 _parent在当前框架的上一层打开链接 framename指定框架或浮动框架 --><br>
<a href="mailto:Email地址1;地址2?cc抄送=地址&bcc密送=地址&subject=邮件%20主题&body=内容">电子邮件超链接</a><br>
<a name="书签名">书签标题</a> <!--定义书签--><br>
<a href="#书签名/URL#书签名">书签标题</a> <!--定义书签链接--><br>
<pre>
绝对路径:完整路径
相对路径:
同一目录:文件名
链接到上一目录:../目录名
链接到下一目录:目录名/
</pre>
<iframe src="url" frameborder="0" name="leftiframe" width="" height=""></iframe><br> <!--浮动框架-->
<a href="url" target="leftiframe">在浮动框架内打开超链接</a><br>
<img src="url" alt="代替文本" name="" width="" height="" align="left/center/right/top/middle/bottom" border=""><br>
<!--art必选,鼠标悬停在图像上时,显示art内容/图像加载失败时显示红色X并显示art文本-->
<!--设置图像热区链接-->
<img src="" usemap="映射图像名称">
<map name="映射图像名称" id="映射图像名称">
<area shape="rec/circle/poly" coords="x1,y1,x2,y2/center-x,center-y,radius/x1,y1,..,Xn,Yn" href="" alt="">
</map>
<marquee behavior="滚动方式scroll循环往复滚动,为默认值/slide滚动一次就停止/alternate来回交替滚动" direction="滚动方向up/down/left/right" bgcolor="背景颜色"
loop="滚动次数,-1为无限循环" scrollamount="滚动速度,滚动文字每次移动的长度" scrolldelay="延迟时间,单位毫秒,值越小滚动速度越快"
width="" height="" hspace="" vspace="">滚动内容</marquee>
<!--设置滚动空白空间就是指滚动文字背景和它周围的文字及图像之间的空白空间范围,默认下是紧密相连的,使用hspace,vspace设置-->
<marquee behavior="scroll" direction="left">擅长捉弄人的高木同学</marquee>
<!--多媒体文件-->
<embed src="多媒体文件" width="" height="" autostart="true为自动播放/false为不自动播放" loop="true为循环播放/d=false为不循环" type="" >
<!--若想设置音乐为背景音乐时,必须同时将高度和宽度设置为0--> <br>
<embed src="C:\Users\hp\Desktop\music\恋人以上无法满足的梦.flac" type="">
<p><strong>粗体字</strong></p>
<ol>
<li><strong>斜体字</strong></li>
</ol>
<div> <!--块级标志,定义分区,其内包含的元素会自动换行-->
<span id="right">DIV层叠</span> <!--前后并不会自动换行-->
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</div>
<!--样式设计略,应该放在CSS里-->
<table align="left/center/right" bgcolor="背景颜色" background="url背景图像" border="边框粗细" bordercolor=""><!--表格标记-->
<thead><!--表格的表头 没必要-->
<caption>表格标题 没必要</caption>
<th>表格表头 没必要</th>
</thead>
<tbody><!--主体-->
<tr><!--行-->>
<td rowspan="行数,跨行合并" colspan="列数">列</td>
</tr>
</tbody>
<tfoot>表格的页脚 没必要</tfoot>
</table>
<!--表单-->
<form action="url向何处提交表单" method="get(将提交值加在URL后面,不推荐)/post(隐藏)">
<fieldset><!--定义域,将其包含的内容打包,生成一组字段,浏览器会以特殊方式显示-->
<legend align="">定义域标题</legend>
</fieldset>
<input name="" type="text(单行文本输入框)/password(密码输入框)/submit(提交)/reset(重置)/button(普通按钮)/hidden(隐藏框)/file(文件选择框)"
value="默认值" readonly(只读) size="字段长度">
<input name="复选框" type="checkbox" value="复选框" checked(预先选定)>
<input name="单选框" type="radio" value="单选框">
<input name="图像按钮,插入图像" type="image" src="url" width="" height="">
<textarea name="多行文本输入框" id="" cols="30" rows="10"></textarea>
<select name="下拉列表框" id="" size="一次可见项目数" multiple(规定可多选)>
<option value="规定列表项的值" selected(设置预选)>单列表</option>
因为option是html固有元素;因而无论怎么修改CSS样式在浏览器上都是不起作用的。
想修改option样式,只能通过div ul li模拟select功能;
</select>
</form>
</body>
</html> <!--结束标记-->
人生不如意的时候,是上帝给的长假,这个时候应该好好享受假期。
突然有一天假期结束,时来运转,人生才是真正开始了。
突然有一天假期结束,时来运转,人生才是真正开始了。