html学习
1. 基本格式用法
- 语法格式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.......</title> </head> <body> ... ... ... </body> </html>
- 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- <meta> 标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <!--为搜索定义关键词-->
<meta name="description" content="免费 Web & 编程 教程"> <!--为网页描述内容-->
<meta name="huang" content="ADN"> <!--定义网页作者-->
<meta http-equiv="refresh" content="3"> <!--每3秒刷新当前页面-->
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
body {background-color:white} <!--背景色-->
p {color:red} <!--段落字体颜色-->
</style>
<!--
<style type="text/css">
img{
position:absolute;
left:300px;
top:150px;
}
</style> <!--设置图片显示的位置-->
-->
</head>
<body> <!--背景颜色也可以在开始的body标签这里定义：<body style="background-color:yellow;>" 对于h标签、p标签，同样可以这样使用 -->
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
<br><br><br>
<h4 style="background-color:green; text-align:center; font-family: arial; color: blueviolet; font-size: 30px;">指定格式的标题输出</h4>
<a href="https://www.huang.com">这是我的第一个链接</a>
<!--href属性的内容必须用双引号引起来（当然单引号也没有问题，但不推荐），但是当被引用的内容本身就含有双引号时，只能用单引号引起来，例如：-->
<!--属性=”属性值“ 的格式 其中属性和属性值最好都小写-->
<br><br>
<a href='https://"www.danyinhao.com"'>当被引内容本身含有双引号时，只能使用单引号</a>
<p>我的第一个段落。</p>
<p>另一个段落。</p>
<p style="color:blue;margin-left:40px;">这是一个段落。</p> <!-- 指定字体颜色和距离页面左端的像素距离 -->
<p style="font-family:arial;color:red;font-size:20px;">指定了字体样式的段落。</p>
<br> <!--<br>为换行标签-->
<img src="https://www.runoob.com/try/demo_source/hackanm.gif" alt="找不到图片" border="10" width="400" height="300" > <!--图片 border为边框属性-->
<!--alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。-->
<hr> <!-- <hr>标签在HTML页面中创建水平线 -->
<pre style="font-size: 30px; color:aqua;">
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
<table border="1"> <!--HTML表格-->
<tr>
<th>Header 1</th> <!--th用来定义表格的表头-->
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr> <!--tr:table row 有几个tr标签就表示表格有几行-->
<td>100</td> <!--td:table data 有几个td标签就表示表格的每一行有几列数据且分别为多少-->
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>2. 文本格式化
<body> <b>加粗文本</b><br><br> <i>斜体文本</i><br><br> <code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup> <strong>这个文本是加粗的</strong> <big>这个文本字体放大</big> <small>这个文本是缩小的</small> <em>这个文本是斜体的</em> <!-- 跟<i>效果相同 --> <pre> 此例演示如何使用 pre 标签 对空行和 空格 进行控制 </pre> <!-- 更多文本格式参考：https://www.runoob.com/html/html-formatting.html --> </body>
查看10道真题和解析