第一课---基础标签

原创

壹小小俊 2022-10-12 14:43:21 ©著作权

©著作权归作者所有：来自51CTO博客作者壹小小俊的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.基础 2.元素<p></p><br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素</title>
</head>
<body>
<!--元素-->
<p>文字信息</p>
<a href="http://www.baidu.com">百度</a>
<br>
<!--开始标签称为起始标签，结束标签称为闭合标签-->
<!--HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性-->
</body>
</html>

3.属性<a href=""></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
</head>
<body>
<!--HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。-->
<a href=""></a>
<!--href是a的属性-->

<!--注释标签-->
<a href="">超链接</a>
<abbr title="">标记</abbr>

</body>
</html>

4.标题<h1></h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--标题-->
<h1>文字信息</h1>
<h2>文字信息</h2>
<h3>文字信息</h3>
</body>
</html>

5.段落<p></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
 <!--段落-->
<p>文字信息</p>
</body>
</html>

6.文本格式化<b>加粗文本</b><br><br><i>斜体文本</i><br><br><code>电脑自动输出</code><br><br>这是 <sub> 下标</sub> 和 <sup> 上标</sup>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式化</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

7.链接<a></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
<a href="">链接</a>
</body>
</html>

8.头部<head></head>

<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
    <!--文档字符集-->
    <meta charset="UTF-8">
    <!--文档标题-->
    <title>Title</title>
</head>
<!--文档内容-->
<body>
</body>
</html>

9.样式-CSS(CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.)  <p style="color:blue;margin-left:20px;">这是一个段落。</p>  <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style>  <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式- CSS</title>
</head>
<body>
<!--CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.-->
<!--内联样式-->
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
<!--内部样式表-->
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</body>
</html>

10.图像 <img src="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
</head>
<body>
<img src="demo.png" alt="">
</body>
</html>

11.表格 <table> <tr> <td></td> </tr> </table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table>
    <tr>
        <td>hello</td>
    </tr>
</table>
</body>
</html>

12.列表有序列表 <ol> <li></li> </ol> 无序列表 <ul> <li></li> </ul> 自定义列表 <dl> <dd></dd> <dt></dt> </dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>123</li>
</ol>
<!--无序列表-->
<ul>
<li>123</li>
</ul>
<!--自定义列表-->
<dl>
<dd>123</dd>
<dt>456</dt>
</dl>
</body>
</html>