html笔记(完整版)

目录

背景颜色 bgcolor

注释

空格 

版权符©

网页标题

标题标记

网页编码

强制换行标记

换段落标记

居中对齐白标记

预格式化标记

列表项目标记

无序列表标记

有序列表标记

定义型列表

水平分割线标记

分区显示标记

字体设置标记

粗字体标记

斜字体标记

文字下标字体标记

文字上标字体标记

下划线字体标记

其它标记

图像标记

超链接的使用

表格

框架

表单设计


背景颜色 bgcolor

<body bgcolor="blue">
秦帅哥
</body>

注释<!--注释的内容-->

不添加注释:

<body>
秦帅哥
秦帅哥
</body>

添加注释:

<body>
秦帅哥
<!--秦帅哥-->
</body

空格&nbsp;

<body>
秦 帅       哥<br>
秦&nbsp;帅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哥
</body>

版权符&copy;

<body>
&copy;版权归秦帅哥所有
</body>

网页标题

<title></title>

<head>
<meta charset=utf-8" />
<title>秦帅哥的网页标题</title>
</head>

<body>
秦帅哥
</body>

标题标记<hn></hn>

共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小

<body>
<h1>秦帅哥</h1>
<h2>秦帅哥</h2>
秦帅哥
<h6>秦帅哥</h6>
</body>

网页编码<meta charset="utf-8" />

<head>
<meta charset="utf-8" />
<title>秦帅哥的网页标题</title>
</head>

link连接的颜色

alink正在点击的颜色

vlink已经访问的连接颜色

<body link="red" alink="yellow" vlink="green">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
</body>

强制换行标记

<br>

<body>
秦帅哥<br>
秦帅哥
</body>

换段落标记

<p></p>

<body>
<p>秦帅哥</p>
<p>秦帅哥</p>
</body>

居中对齐白标记

<center></center>

<body>
<center>秦帅哥</center>
</body>

预格式化标记

<pre></pre>

<body>
<pre>秦 帅     哥</pre>
</body>

列表项目标记

<li></li>

<body>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
</body>

无序列表标记

<ul></ul>

<body>
<ul>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ul>
</body>

有序列表标记

<ol></ol>

<body>
<ol>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

有序列表的type属性值

<body>
<ol type="A">
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

指定一个新的数字起始值value

<body>
<ol>
  <li>秦帅哥</li>
  <li value="5">秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

列表嵌套

<body>
<ol>
  <li>秦帅哥</li>
  <li>
    <ol  type="A">
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ol>
  </li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

定义型列表

<dl><dt></dt><dd></dd></dl>

<body>
<dl>
  <dt>软件说明:</dt>
  <dd>简单介绍软件的功能及基本应用</dd>
  <dt>软件界面</dt>
  <dd>用于选择软件的外观
  <dd>
</dl>
</body>

水平分割线标记

<hr>

<body>
秦帅哥
<hr>
秦帅哥
</body>

分区显示标记

<div></div>

<body>
<div> 秦帅哥 </div>
<div> 秦帅哥 </div>
</body>

字体设置标记<font></font>

设置字体的格式

<body>
秦帅哥<br>
<font size="14px" color="red" face="微软雅黑">秦帅哥</font>
</body>

粗字体标记<b></b>

<body>
秦帅哥<br>
<b>秦帅哥</b>
</body>

斜字体标记<i></i>

<body>
秦帅哥<br>
<i>秦帅哥</i>
</body>

文字下标字体标记

<sub></sub>

<body>
2<sub>3</sub>
</body>

文字上标字体标记

<sup></sup>

<body>
2<sup>3</sup>
</body>

下划线字体标记<u></u>

<body>
秦帅哥<br>
<u>秦帅哥</u>
</body>

其它标记

图像标记

<img>

<body>
<img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px">
<img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px" border="5px">
<img src="file:///D|/孤独秦哥/2/ha.pg" width="200px" height="200px" alt="灰太狼">
</body>

超链接的使用<a href=""></a>

在当前窗口中打开链接

<body>
<a href="http://www.baidu.com">百度</a><!--外部链接-->
<a href="Test2.html">test2</a><!--内部链接-->
</body>

在一个新的窗口中打开链接

<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>

锚点链接

<body>
 <a name="dingbu"></a>
 <a href="#dibu">到页面底部</a><br>
 内容<br>
 <a href="#dingbu">到页面顶部</a>
 <a name="dibu"></a>
</body>

表格

1.<table>标记

2.<caption>标记

<head>
  <title>表格</title>
  <meta charset="utf-8">
</head>
<body>
  <table width="500px" height="230px" border="1px" align="center"  cellspacing="0px"> 
    <caption>表格的标题</caption>
	  <tr>
		<th align="cernter">班级</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>成绩</th>
	  </tr>
	  <tr align="center" valign="center">
		<td>四年级一班</td>
		<td>张三</td>
		<td>16</td>
		<td>80</td>
	  </tr>
	  <tr>
		<td>四年级一班</td>
		<td>李四</td>
		<td>14</td>
		<td>90</td>
	  </tr>
  </table>
</body>

3.<tr>标记

4.<td>和<th>

<body>
  <table width="500px" height="230px" border="2px" cellspacing="0px"> 
	<tr>
	  <td colspan="2"></td><td></td><td></td>
	</tr>
	<tr>
	  <td></td><td></td><td rowspan="2"></td><td></td>
	</tr>
	<tr>
	  <td></td><td></td><td></td>
	</tr>
  </table>
</body>

<frameset>框架</frameset>

框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果

<html>
  <head>
    <title>框架</title>
    <meta charset="utf-8">
  </head>

  <frameset rows="190px,*,190px">
    <frame>
    <frameset cols="20%,80%">
      <frame>
      <frame>
    </frameset>
    <frame>
  </frameset>
</html>

表单设计

1.表单标记<form>...</form>

2.文本域和密码<input>标记

3.提交、重置、普通按钮

  <body>
    <form method="post">
	  账号:<input type="text" name="zhanghao" size="10" maxlength="5">
	  <br>
	  <br>
	  密码:<input type="password" name="mima" size="10">
	  <br>
	  <br>
	  <input type="submit" value="提交">
	  <input type="reset" value="重置">
    </form>
  </body>

4、单选框和复选框

  <body>
    <form>
      <!--单选按钮-->
      性别:
      <input id="man" type="radio" name="sex" checked="checked">男
      <input id="woman" type="radio" name="sex">女
    </form>
  </body>

  <body>
    <form>
      <!--多选按钮-->
      爱好:
      <input type="checkbox" name='foods' value='niurou'>牛肉
      <input type="checkbox" name='foods' value='caixin'>菜心
      <input type="checkbox" name='foods' value='lianou'>莲藕
    </form>
  </body>

5、隐藏域

当<input type="hidden">时,为隐藏表单域

  <body>
    <form>
      <input type="hidden" value="隐藏的内容" name="yincang">
    </form>
  </body>

6、多行文本域

  <body>
    <form>
      自我介绍:<br>
      <textarea name="ziwojieshao" rows="5" cols="35">
      </textarea>
    </form>
  </body>

7、菜单下拉列表域<select></select>标记

  <body>
    <form>
      地址:<br>
      <select name="dizhi">
        <option value="sichuan">四川</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
      </select>
    </form>
  </body>

猜你喜欢

转载自blog.csdn.net/tswc_byy/article/details/81530183