HTML标签笔记

最新推荐文章于 2022-06-14 20:30:07 发布

LEO-max

最新推荐文章于 2022-06-14 20:30:07 发布

阅读量429

点赞数

分类专栏：前端学习

生活会辜负努力的人，但不会辜负一直努力的人——Leo的个人博客。

本文链接：https://blog.csdn.net/zouchengzhi1021/article/details/105292804

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<head> </head>	双标签
<br />	单标签

父子级关系：

<html>
	<head>
			<title></title>
	</head>
</html>

兄弟关系：

<head></head>  <body></body>

在sublime中在html文件中，输入!或html:5 再按TAB键直接出现HTML框架

<!DOCTYPE html>   文档类型，html5版本
<html lang="en">  英文
<head>
	<meta charset="UTF-8">	字符集，utf-8是最常用字符集编码方式，常用还有gbk（全部中文）,gb2312(简体) UTF-8全世界
	<title>Document</title>
</head>
<body>
	
</body>
</html>

语义化标签：

<div>无语义

排版标签：（排版标签主要和CSS搭配使用，显示页面结构的标签，是网页布局最常用的标签）

标题标签：（单词缩写：head）

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>  重要性递减

段落标签：（单词缩写：paragraph)

<p> 文本内容 </p>

是HTML文档中最常见地标签，默认情况下，文本在一个段落中会根据浏览器窗口地大小自动换行。

水平线标签：（单词缩写: horizontal)

在网页中常常看到一些水平线将段落与段落之间分隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成

<hr />是单标签

（输出一个标签再按TAB键高效噢！）

换行标签：(break)

<br />单标签

div span标签

div span 是没有语义是我们网页布局主要地2个盒子
div就是division的缩写分别，分区的意思其实有很多div来组成网页
span跨度，跨距；范围
语法格式：

<div> 这是布局 </div>	<span> 这是布局 </span>

span 是放在一行

文本格式标签：

<strong></strong>和<b></b>	文字以粗体方式显示（XHTML推荐使用strog)

<i></i>和<em></em>	文字以斜体方式显示(XHTML推荐使用em)

<s></s>和<del></del>		文字以加删除线方式显示(XHTML推荐使用del)

<u></u>和<ins></ins>		文字以加下划线方式显示(XHTML不赞成使用u)

图像标签img:

<img/>标签属性

基本图像插入方式：

<img src="图像url"/>

属性属性值描述

src URL 图像的路径

alt 文本图像不能显示时的替换文本

title 文本鼠标悬停时显示的内容

width 像素设置图像的宽度

height 像素设置图像的高度

border 数字设置图像边框的宽度

<img src="URL" alt="这张图片"/>

<img src="URL" title="鼠标悬停显示"/>

<img src="URL" title="" width="400"/>

<img src="URL" title="" width="400" border="10" />

链接标签：（anchor,锚)

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href:用于指定链接目标的URL地址，当为标签应用href属性时，它就具有了超链接的功能，用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

<a href="" target="_blank"></a>

注意：
（1）外部链接需要添加 http://www.baidu.com
（2）内部链接直接链接内部页面名称即可，比如<a href="index.html">首页</a>
（3）如果当时没有确定链接目标时，通常将链接标签href属性值定义为"#"（即href="$")，表示该链接暂时为一个空链接
（4）不仅可以创建文本超链接，在网页中各种网页元素，如图片、表格、音频、视频等都可以添加超链接。

<a href="http://www.baidu.com">百度</a>

<a href="#">还未有链接</a>

锚点定位：（通过创建锚点链接，用户能够快速定位到目标内容）

创建锚点链接分为两步：
（1）使用"a href="#id名"链接文本/a"创建链接文本

<a href="#live"></a>

（2）使用相应的id名标注跳转到目标位置

<h3 id="live">目标位置</h3>

base标签：
base可以设置整体链接的打开状态

<base target="_blank" />  在<head></head>中写

可以所有链接在新窗口打开，而不要在下目标链接中加打开方式

<a href="URL">文本</a>

如果想要某一个特别的打开方式可以在链接中自己重新定义

特殊字符标签：

特殊字符描述字符的代码

 				空格符		&nbsp;

<				小于号		&lt;

>				大于号		&gt;

&				和号			&amp;

￥				人民币		&yen;


				版权			&copy;

				注册商标		&reg;

				摄氏度		&deg;

				正负号		&plusmn;

				称号			&times;

				除号			&divide;

				平方号		&sup2;

				立方号		&sup3;


<h3>----&nbsp;&nbsp;两个空格&nbsp;&nbsp;----</h3>

我们的段落语法格式是：<p> 段落 </p>

注释标签：

<!-- 这是注释 -->

路径:(相对路径和绝对路径)

相对路径：
（1）图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可，如<img src="logo.gif"/>

（2）图像文件位与HTML的下一级文夹，输出文件夹名和文件名，之间用"/"隔开，如

<img src="img/img01/logo.gif"/>

（3）图像位于HTML文件的上一级文件夹，在文件名之前加入"…/"，如果是上两级，则需要"…/…/"，以此类推，如：<img src="../logo.gif"/>

绝对路径:

“D:\web\img\logo.gif”,或完整的网络地址，例如"http://www.itcast.cn/images/logo.gif"

列表标签：

无序列表：

无序列表的各个列表之间没有顺序级别之分，是并列的。其基本语法格式如下：

	<ul>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		...
	</ul>

<ul>只能放<li>标签</ul>，但是<li>可以放其他标签</li>

有序列表：(ol)
（排名可以用

<ol>
	<li>中国</li>
	<li>美国</li>
	<li>英国</li>
</ol>

ol里只能放li，但li里面可以放其他

自定义列表：
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	...
</dl>

LEO-max

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录