以"<!-- -->"为边界的内容都是注释,并不会在页面输出
<!-- 文档类型(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(一)
最新推荐文章于 2022-12-21 21:52:43 发布