今天学习了HTML的基本操作(前端)
学习教程来源:HTML 教程 | 菜鸟教程
比较有用的有以下几点:
1.定位同一个页面下的章节,常用于文档较长时快速查找翻页查看
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>
</body>
</html>
当点击章节4时即可调转到当前页面下的章节4
2.可以让图片作为一个超链接
代码:
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
其中border=0时图片无边框,点击图片即可跳转页面
3.对于字体的一系列操作
<h2 style="background-color:red;">这是一个标题</h2>
font-family:字体
font-size:字体大小
text-align : 文本对齐
4.关于图片的调整
<img border="0" src="路径" alt="当图片无法显示时用这串文字替代">
width="" height= ""
align= "bottom(默认 但其实是在顶端)/middle/top"
style = "float:left"(放在左边)"float:right"
5.HTML表格操作
<table border="1"> 有边框
<th> header </th>表头
<td> row</td>表内
代码:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
结果
跨行跨列
<th colspan="2">Telephone</th> 跨两列
rowspan=“2” 跨两列
代码
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
跨两行
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
结果