HTML源文件,运行看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 说明文档类型</br>
<title>HTML标签学习</title>
一个html只能含一个title标签,且必须位于head标签内。内容用于显示浏览窗口标题栏
</head>
<body>
<!-- 注释,仅在html文本中显示,快捷键ctrl+/ -->
<!-- Ctrl+d删除一行 ;Ctrl+Shift+d复制上一行-->
1.能让标签不转义的标签: <xmp><h1></xmp>
2.水平线标签: <hr/>
可选属性:对齐方式align,默认center;水平线大小(竖)size,默认2像素单位;
颜色color,可用颜色名称等方式表示;水平线宽度(横)width,像素值或浏览 器窗口百分比默认100%。 </br>
eg:<hr align="left" size="10" color="red" width="150" > </br>
3.换行标签: 实例</br> 文字 </br>
4.空格:实例 文字,包括英文分号</br>
5.标签属性: <标签名 属性1="属性1" 属性2="属性2"></标签名> </br>
注意:属性不分先后顺序;属性之间以空格分开。 </br>
6.<h5>标题标签: 双标签h1-h6 </h5> </br>
可选属性:align="对齐方式" (左对齐:left;右对齐:right;居中:center) </br>
eg: <h5 align="center"> 居中对齐的5级标题</h5>
7.段落标签: <p>段落文本会根据浏览器大小自动换行,并且每段文本之间会有一定间隔</p>
可选属性:对齐方式align;
8.文本样式标签:<font>文本样式标签在文本标签<p>中,可以添加属性为文字设置字体face、文字大小size(1-7之间整数值)、颜色color等属性</font>
<p>无使用font标签时默认格式</p> </br>
<p><font face="宋体" size="5" color="blue">使用font标签时设置的格式</font></p> </br>
9.文本格式化标签:<strong>粗体</strong>;<ins>下划线</ins>;<em>斜体</em>;
<del>删除线</del> </br></br>
10.文本语义标签:
(1)time标签:没有特殊显示效果,用来给机器识别的,便于搜索引擎,爬虫解析等 </br>
time标签有以下两个属性:1.datetime,用于定义具体时间或日期,如14:00;2022-03 -21;2.pubdate,定义time标签中文本发布日期
如:<p><time datetime="2022-02-21"><time>去旅行</p> </br>
<time pubdate="2022-05-01">本文发布日期2022-05-01<time> </br>
(2)mark标签:<mark>用于文本高亮显示,</mark>因作为css的任务,故很少使用。</b r>
(3)cite引用标签:<cite>-稚晖君《钢铁侠》</cite>引用内容会以斜体样式展示。</ br></br>
11.图形标签<img/>(装饰性图片建议用css完成设置背景图片) </br>
常见图片格式:GIF、PNG、JPG。 </br>
网页小图片和基本元素等,如图标,按钮等常用GIF或PNG-8; </br>
半透明图像考虑用真色彩PNG格式(即指一般PNG-32) </br>
色彩丰富图片考虑JPG。 </br>
<img/>标签属性: </br>
1.src:图片路径; </br>
2.alt:图片替换文本,图片无法显示时才显示的文本; </br>
3.title:图片说明文本,鼠标放置图片时显示的文本; </br>
4.图片格式:宽width(像素);高height(像素);边框高度border(数字);图片上下的空 白vspace(像素);图片左右的空白hspace(像素); </br>
5.对齐方式align:
1左left;2右right;3top图片顶端与第一行文字对齐,其他文字在图片下方;4middle图片中线 与第一行文字对齐,其他文字在图片下方;5bottom图片底部与第一行文字对齐,其他文字在图片 下方。 </br>
实例图片:
<img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100" height="100" border="5" hspace="10" align="left" title="种禾" alt="图片找不到">
</br></br></br></br></br>
实例文字
<img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100" height="100" align="top" title="种禾" alt="图片找不到">
实例文字:第一行为图片顶端,</br>后一行为图片下方。</br>
2022/2/21
</body>
</html>
---------------------------------------------------------↓便于复制↓---------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 说明文档类型</br>
<title>HTML标签学习</title>
一个html只能含一个title标签,且必须位于head标签内。内容用于显示浏览窗口标题栏
</head>
<body>
<!-- 注释,仅在html文本中显示,快捷键ctrl+/ -->
<!-- Ctrl+d删除一行 ;Ctrl+Shift+d复制上一行-->
1.能让标签不转义的标签: <xmp><h1></xmp>
2.水平线标签: <hr/>
可选属性:对齐方式align,默认center;水平线大小(竖)size,默认2像素单位;
颜色color,可用颜色名称等方式表示;水平线宽度(横)width,像素值或浏览 器窗口百分比默认100%。 </br>
eg:<hr align="left" size="10" color="red" width="150" > </br>
3.换行标签: 实例</br> 文字 </br>
4.空格:实例 文字,包括英文分号</br>
5.标签属性: <标签名 属性1="属性1" 属性2="属性2"></标签名> </br>
注意:属性不分先后顺序;属性之间以空格分开。 </br>
6.<h5>标题标签: 双标签h1-h6 </h5> </br>
可选属性:align="对齐方式" (左对齐:left;右对齐:right;居中:center) </br>
eg: <h5 align="center"> 居中对齐的5级标题</h5>
7.段落标签: <p>段落文本会根据浏览器大小自动换行,并且每段文本之间会有一定间隔</p>
可选属性:对齐方式align;
8.文本样式标签:<font>文本样式标签在文本标签<p>中,可以添加属性为文字设置字体face、文字大小size(1-7之间整数值)、颜色color等属性</font>
<p>无使用font标签时默认格式</p> </br>
<p><font face="宋体" size="5" color="blue">使用font标签时设置的格式</font></p> </br>
9.文本格式化标签:<strong>粗体</strong>;<ins>下划线</ins>;<em>斜体</em>;
<del>删除线</del> </br></br>
10.文本语义标签:
(1)time标签:没有特殊显示效果,用来给机器识别的,便于搜索引擎,爬虫解析等 </br>
time标签有以下两个属性:1.datetime,用于定义具体时间或日期,如14:00;2022-03 -21;2.pubdate,定义time标签中文本发布日期
如:<p><time datetime="2022-02-21"><time>去旅行</p> </br>
<time pubdate="2022-05-01">本文发布日期2022-05-01<time> </br>
(2)mark标签:<mark>用于文本高亮显示,</mark>因作为css的任务,故很少使用。</b r>
(3)cite引用标签:<cite>-稚晖君《钢铁侠》</cite>引用内容会以斜体样式展示。</ br></br>
11.图形标签<img/>(装饰性图片建议用css完成设置背景图片) </br>
常见图片格式:GIF、PNG、JPG。 </br>
网页小图片和基本元素等,如图标,按钮等常用GIF或PNG-8; </br>
半透明图像考虑用真色彩PNG格式(即指一般PNG-32) </br>
色彩丰富图片考虑JPG。 </br>
<img/>标签属性: </br>
1.src:图片路径; </br>
2.alt:图片替换文本,图片无法显示时才显示的文本; </br>
3.title:图片说明文本,鼠标放置图片时显示的文本; </br>
4.图片格式:宽width(像素);高height(像素);边框高度border(数字);图片上下的空 白vspace(像素);图片左右的空白hspace(像素); </br>
5.对齐方式align:
1左left;2右right;3top图片顶端与第一行文字对齐,其他文字在图片下方;4middle图片中线 与第一行文字对齐,其他文字在图片下方;5bottom图片底部与第一行文字对齐,其他文字在图片 下方。 </br>
实例图片:
<img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100" height="100" border="5" hspace="10" align="left" title="种禾" alt="图片找不到">
</br></br></br></br></br>
实例文字
<img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100" height="100" align="top" title="种禾" alt="图片找不到">
实例文字:第一行为图片顶端,</br>后一行为图片下方。</br>
2022/2/21
</body>
</html>