以"<！-- -->"为边界的内容都是注释，并不会在页面输出
<!-- 文档类型(html:4t 过渡 html:4s 严格 h5) -->
<!DOCTYPE html>
<!-- 整个html文件的边界 -->
<html>
<!-- head围住的是整个头部 -->
<head>
<!-- 字体格式 -->
<meta charset="utf-8">
<!-- html文件的标题，一般是上部的小标签 -->
<title>html标签1</title>
</head>
<!-- 以body为边界的内容是页面的绝大部分元素也可以是js语句块 -->
<body>
<!-- p和div很类似，区别是p语义明显(当爬虫爬取网站时会分析其中的内容)，而div无语义 -->
<p>这是段落标签</p>
<div>这是块标签</div>
<h1 id="hello">1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<!-- br是一个换行标签 -->
<br>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!-- 下面这一组标签与上述标签有一个明显的区别，上面都是块级标签，而下面的都是行内标签
在不进行任何css设置的情况下，行内标签会显示在一行，而块级标签独占一行，先做简单了解 -->
<!-- strong起到强调作用，语义更明显 -->
<b>这是加粗标签</b>
<strong>这也是加粗标签</strong>
<i>倾斜标签</i>
<em>这也是倾斜标签</em>
<!-- del语义明显 -->
<s>删除线</s>
<del>这也是删除线</del>
<!-- ins语义明显 -->
<u>下划线</u>
<ins>这也是下划线</ins>
<!-- 图像标签，它与上述标签都不同，是行内块级元素，默认显示在一行，但可以通过css设置大小 -->
<!-- src为图片路径,"."表示当前路径，这里是linux操作系统的文件路径描述(强烈推荐使用linux操作系统) -->
<img src="./1.png" alt="" />
<br>
<br>
<!-- a标签是超链接标签(行内元素)，href=“” “”内是超链接的目标网址，点击这个标签会跳转，写在标签内的为链接载体，具体看网页显示的结果 -->
<a href="http://www.baidu.com">这是一个超链接</a>
<a href="#hello">这是一个锚点，用于页面内的跳转，等学了id在回头看,点击这个标签会跳转到h1处</a>
<br>
<br>
<br>
<br>
<!-- 下面是一些特殊字符 -->
这是一个空 格 <br>
小于号:< <br>
大于号:> <br>
&<br>
¥<br>
©<br>
®<br>
°<br>
<!-- 无序列表ul标签是块级元素，其间嵌套n个li标签 -->
<ul>
<!-- li是列表中的每一行，也是一个块级元素，所以默认独占一行 -->
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<!-- 有序列表ol标签也是块级元素，其间嵌套n个li标签,默认从一开始计数,但也可以
更改start属性，start=””，如下，就会从start值开始自增(这个不太常用) -->
<ol start="3">
<!-- 这里的li与上面无序列表li相近，但它有一个value属性，更改li的属性value值如下 -->
<li>有序列表1</li>
<li value="10">有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 自定义列表dl标签仍然是块级元素，其间嵌套dt标签和dd标签，它们也都是块级元素，这个 -->
<dl>
<dt>这是小标题</dt>
<dd>这是选项1</dd>
<dd>这是选项2</dd>
<dd>这是选项3</dd>
</dl>前端学习笔记-HTML(一)
最新推荐文章于 2024-07-20 13:07:26 发布
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
