|
|
HTML是一种：超文本标记语言
既然是标记语言，那么标签就很重要了。
一、html5的语义化标签
<hx>标题文本</hx>：
(x为1-6)
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
<h1>是最高的等级
注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。
<p>段落文本</p>：
注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。
<span></span>：
这个标签是没有语义的，它的作用就是为了设置单独的样式用的。具体详见：http://www.21fanqie.com/thread-672-1-1.html
<div>…</div>：
把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
<header></header>：
html5新增的语义化标签
用于<body></body>标签中，要注意与<head></head>标签的区别。
例如：<header>我是头部标签</header>
<footer></footer>：
用来定义底部区域
用于<body></body>标签中
例如：<footer>我是底部标签</footer>
<section></section>：
定义一个区域
用于<body></body>标签中
例如：<section>我是一个区域</section>
<aside></aside>：
定义一个侧边栏区域
用于<body></body>标签中
例如：<aside>我是侧边栏</aside>
二、html5的效果标签
1.br标签：
实现换行效果
xhtml1.0写法：
<br />
html4.01写法：
<br>
现在一般使用 xhtml1.0 的版本的写法较多（其它标签也是）。
<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />
2.空格
3.hr标签：
实现水平线
html4.01版本：<hr>
xhtml1.0版本：<hr />
hr标签在浏览器中的默认样式线条比较粗，颜色为灰色，这些外在样式在css样式表中都可以对其修改。
4.无序列表（可以加入type属性）：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
<dl>
<dt>关于我们</dt>
<dd>联系我们</dd>
<dd>公司介绍</dd>
<dt>资讯相关</dt>
<dd>新闻资讯</dd>
<dd>产品展示</dd>
</dl>
注意：dt和dd是并列关系，没有包含关系。dt用于分组
5.有序列表（可以加入type属性）：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始
三、HTML5图片，链接及表格标签
1.<img>：
插入图片
语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
2.<a></a>：
超链接
语法：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
例如：<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），可以考虑在css中加入（a{color:#000})
书签超链接：
比如回到顶部
在顶部写这行代码：<a name="dingbu"></a>
在底部写这行代码：<a href="#dingbu">回到顶部</a>
3.target：
打开网页的方式
可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
举例：
<a href="https://www.sina.com.cn/" target="_self">新浪</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>
4.table表格：
表格，详见：http://www.21fanqie.com/thread-673-1-1.html
四、HTML5表单标签，与浏览者交互
1.<form></form>：
表单
语法：<form method="传送方式" action="服务器文件">
详见：http://www.21fanqie.com/thread-674-1-1.html
2.
五、其他
1.换行：<br />或<p></p>
2.用stong代替b，用em代替i，用ins代替u。
3.删除线：<del></del>
4.上标：<sup></sup>
5.下标：<sub></sub>
6.插入日期：插入——html——日期
7.插入水平线：<hr />
8.字体大小：<big></big>或<small></small>
9.&实体符号，用于一些打不出来的符号：https://www.w3school.com.cn/html/html_entities.asp
10.空格： & nbsp;
11.保留代码中的空格，不用& nbsp;，那么就用<pre></pre>包住内容。
12.注释：<!--XXXXXXX-->
|
|
发表于 2024-7-7 10:45:35
楼主