HTML元素基本格式
<标签名 属性1=值1 属性2=值2......>元素内容</标签名>
常用标签
标题
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
HTML标题是通过<h1>~<h6>定义的，<h1>定义最大的标题，依次变小。此处的标题与网页标题标记title不同，此处的标题指网页中内容的标题。浏览器会在标题前后添加空行。
段落
<body>
<p>学会了吗</p>
<p>--
我学会了
</p>
</body>
段落通过<p>定义，可以使用<br/>插入空行。浏览器会忽略源代码中的排版。浏览器会在段落前后添加空行。
折行
<body>
<p>学会了吗<br/>--<br/>我学会了</p>
</body>
在不产生新段落的情况下换行，使用<br/>标签。<br/>没有结束标签。
水平线
<body>
<p>水平线<hr />hr标签用来定义水平线</p>
<p>水平线</p>
<hr/>
<p>hr标签用来定义水平线</p>
</body>
<hr/>标签可以创建水平线，用来分割内容。
注释
<body>
<p>水平线<hr />hr标签用来定义水平线</p>
<!--这个地方可能有bug-->
</body>
浏览器中不显示注释。
链接
HTML使用超链接与网络中另一文档相连。超链接可以为一个字、一句话或一张图，单击可跳转到新文档或当前文档的某部分。通过<a>标签船舰链接。<a>标签有两种使用方式，指向另一文档或本文档的某部分。
1.href属性：指向另一文档链接
基本格式：<a href="url">文本</a>
url中若未给出了具体路径，则默认与当前页路径相同。指向的文件若为html文件，在浏览器中直接打开；若为可执行文件，在浏览器中运行或下载；若为文本文件，在浏览器中编辑或下载。
跳转到本网站中另一个页面
1.在项目中添加一个新的html页index.html
新建立跳转的html页
2.在htmlpage中建立超链接指向index.html，不说明具体路径默认与当前页面相同路径
<body>
<p><a href="index.html">点这里去另一个页面</a>
</p>
</body>
跳转到其他网站
<body>
<p><a href="http://mis.teach.ustc.edu.cn/">点这里去查看成绩</a>
</p>
</body>
2.target属性：定义文档显示位置
枚举值
_blank：新开一窗口
_parent：指向父frameset文档
_self：调入当前页框
_top：去掉页框
3.name属性：当前页面中的书签
<body>
<p><a href="#tip">去那里</a></p>
<p><hr/>（这里可以加很多个折行）</p>
<a name="tip">来这里</a>
</body>
将#与标签名称（锚名称）添加在url之后，可以在其他页面跳转
图像
<img src="url" alt=“text”/>，url为存储图像的位置。<img>标签有许多属性，src为源属性，alt为替换文本属性，在浏览器无法载入图像时，将显示文本信息。
<body>
<p>这是我的微信<img src="zht.png" alt=“二维码”> </p>
</body>
背景图片
<body background="first.jpg">
<p>图像小于页面会进行重复<hr/>gif也可以作为背景</p>
</body>
对齐方式
img标签的align属性设置图片与文本对齐方式，默认为底部对齐方式
枚举值
bottom底部对齐
middle中部对齐
top顶部对齐
浮动
<body>
<p>
<img src="first.jpg" align="right">
align属性设置浮动与对齐方式</p>
</body>
align属性设置图片浮动
枚举值
left图像浮动到文本左侧
right图像浮动到文本右侧
尺寸
改变img标签的height和width值，可以放大或缩小图像
<body>
<img src="first.jpg" width="128" height="128">
</body>
图像链接
将插入超链接标签的文本替换为img标签
<body>
<p>图片可以作为超链接使用
<a href="index.html">
<img src="first.jpg"></a>
</p>
</body>
列表
HTML支持有序无序列表
无序列表
使用小黑点标记每个项目，无序列表由<ul>标签标记，每个项目由<li>标记。列表项内部可以有段落、图片。
<body>
<h1>无序列表：</h1>
<ul>
<li>二月三日</li>
<li>二月四日</li>
<li>二月五日</li>
</ul>
</body>
有序列表
有序列表使用数字标记，由<ol>标签标记，每个项目由<li>标记。start属性表明序号起始值，默认从1开始。
<body>
<h1>有序列表：</h1>
<ol start="2">
<li>二月三日</li>
<li>二月四日</li>
<li>二月五日</li>
</ol>
</body>
表格
表格由<table>定义，行由<tr>定义，每行的单元由<td>定义。表头由<th>定义，表格标题由<caption>定义，captio标签必须紧随table标签之后。使用边框属性border可以定义一个有边框的表格。
<body>
<table border="1">
<caption>学号表</caption>
<tr>
<th>序号</th>
<th>学号</th>
</tr>
<tr>
<td>1</td>
<td>JL1234</td>
</tr>
</table>
</body>
空单元格
添加一个空格占位符 
跨列
由colspan属性设置
<body>
<table border="1">
<caption>学号表</caption>
<tr>
<th colspan="2">XX班</th>
</tr>
<tr>
<td>1</td>
<td>JL1234</td>
</tr>
</table>
</body>
跨行
跨行由rowspan属性设置
<body>
<table border="1">
<caption>学号表</caption>
<tr>
<td rowspan="2">XX班</td>
<th>学号</th>
</tr>
<tr>
<td>JL1234</td>
</tr>
</table>
</body>
单元格边距
cellpadding属性设置单元格边距
<table cellpadding="10">
单元格间距
cellsapcing属性设置单元格间距
<table cellspacing="10">
表格背景
bgcolor属性设置表格背景颜色，background属性设置表格背景图片
<table bgcolor="green">
<table background="url">
单元格背景
单元格也有bgcolor和background属性
文本格式化
使用不同的标签来定义字体https://www.w3school.com.cn/tiy/t.asp?f=html_textformatting
文本预格式化
<pre>标签显示在源代码中的文本格式
特殊字符
定义一些命名来显示特殊字符
style属性
style属性用来改变html元素的样式，提供了一种改变所有html元素样式的通用方法。在修改html样式时，可以通过使用style属性将样式添加到html元素。使用style属性后，将废弃一些标签和属性。
background-color 背景颜色
font-family 字体系列
color 字体颜色
font-size 字体大小
text-align 文本对齐
<body style="background-color:lightblue">
<h1 style="background-color:red;color:black;font-family:'Arial Unicode MS';text-align:center">style属性</h1>
</body>
网友评论