HTML页面基本结构
<!DOCTYPE html><!-- 声明文档 -->
<html lang="en">
<head><!-- 头部部分 -->
<meta charset="UTF-8"><!-- 声明网页字符编码 -->
<title>Document</title><!-- 网页标题 -->
</head>
<body><!-- 主体部分,能看见的 -->
</body>
</html>
标签
1.标题标签 h1~h6
设置文字标题
<h1>这是一个h1标签</h1><!--h1最大,h6最小,每个hn标签独占一行-->
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
网页显示如下图
2.段落标签 p
<p>这是一个p标签</p><!--每个p标签独占一行-->
<p>这是一个p标签</p><!--每个p标签独占一行-->
网页显示如下图
3.图片标签 img
为网页添加图片
<img src="图片路径" alt="提示文字">
4.链接标签 a
- a定义超链接,用于从一张页面链接到另一张页面。
- a元素最重要的属性是 href 属性,它指示链接的目标。
- 可以设置target="_blank"让它在其他页面打开
- 可以设置target="_self"让它在本页面打开
- 链接到本页面 首先创建一个锚链接的锚记点:<a href=“#”>主题名称 然后在具体要链接到的地方设置name <a name=“锚记点名称”> (锚记点前面要加上#号)
<a href="http://www.w3school.com.cn">W3School</a>
5.span标签
<span>这是一个span标签</span><!--和p标签不同的是它不会独占一行-->
- span标签被用来组合文档中的行内元素。
- 定义文档中的节。
文字布局
1.无序列表 ul
可以在type中写入排序类型。
<ul type="disc">
<!--type中的值有disc(默认值--实心圆点)、circle(空心圆环)、square(空心正方形)-->
<li>这是一个li标签</li>
<li>这是一个li标签</li>
<li>这是一个li标签</li>
</ul>
2.有序列表 ol
可以在type中写入排序类型。
<ol type="1">
<!--type中的值有1、a、A、i、I-->
<li>这是一个li标签</li>
<li>这是一个li标签</li>
<li>这是一个li标签</li>
</ol>
3.强制换行 br
<br>
4.水平线 hr
<hr>
5.预格式文本
在html中写入的文本在网页中不会变化
<pre></pre>
表格 table
表格的基本格式
<table border="2"><!--表格的边框宽度-->
<tr><!--这是行标签-->
<td>单元格</td><!--单元格-->
<td>单元格</td>
</tr>
<tr><!--这是行标签-->
<td>单元格</td><!--单元格-->
<td>单元格</td>
</tr>
</table>
<!--
<table border=边框的宽度 width=宽度 height=高度 bordercolor=边框线的颜色
bgcolor=整个表格的背景颜色 background=背景图片地址<!--背景图片) align=表格对齐方式>
-->
<!--<td colspan=跨的列数 rowspan=跨的行数></td>-->
表格的间距,填充属性
cellspacing属性—单元格之间的距离
<table border="2" cellspacing="20px"><!--单元格之间的距离-->
<tr><!--这是行标签-->
<td>单元格</td><!--单元格-->
<td>单元格</td>
</tr>
<tr><!--这是行标签-->
<td>单元格</td><!--单元格-->
<td>单元格</td>
</tr>
</table>
cellpadding属性—内容距离单元格边线的距离
<table border="2" cellpadding="20px"><!--内容距单元格边线的距离-->
<tr><!--这是行标签-->
<td>单元格</td><!--单元格-->
<td>单元格</td>
</tr>
<tr><!--这是行标签-->
<td>单元格</td><!--单元格-->
<td>单元格</td>
</tr>
</table>
表单 form
<form action="" name="" method="">
<!--文本框-->
<input type="text" value="" maxlength="">
<!--密码框-->
<input type="password" value="" maxlength="">
<!--单选按钮-->
<input name="name" type="radio" value=“男” checked="checked">男
<input name="name" type="radio" value=“女”>女
<!--复选按钮-->
<input name="name" type="checkbox" checked="checked">西瓜
<input name="name" type="checkbox">苹果
<!--提交-->
<input name="name" type="submit" value="">
<!--重置-->
<input name="name" type="reset" value="">
<!-- 按钮-->
<input name="name" type="button" value="">
</form>
下拉列表
<select name=“name”>
<option value=""<!--必须有-->内容</option>
<option value=""<!--必须有-->内容</option>
</select>