前端开发笔记第一天 HTML常用标签

最新推荐文章于 2022-03-16 17:52:54 发布

风情小姐姐

最新推荐文章于 2022-03-16 17:52:54 发布

阅读量380

点赞数 1

文章标签： html 前端开发

本文链接：https://blog.csdn.net/qq_40871016/article/details/101627739

版权

第一天

html (HyperText Markup Language) 超文本标记语言------结构
Css (Cascading Style Sheets) css层叠样式表------------------装饰，装修
Js (javascript) --------行为（制作动画浏览器最基本的脚本语言）

HTML
HTML不是一种编程语言，而是一种标记语言(markup language)
标记语言是有一套标记标签组成
HTML使用标记标签来描述网页

超文本标记语言

HTML标记标签通常被称为HTML标签(HTML tag)
HTML标签有尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素
总结：网页的结构html+css

HTML 475

1.标题标签

在这里插入图片描述

2.Font标签

定义文字
Size：文字大小（1-7） color：文字颜色

3.P标签

就是会自动换行

定义段落标签
P元素会自动在其前后创建一些空白，浏览器会自动添加这些空间，您也可以在样式表中规定

4.b/strong

b标签定义加粗标签
Strong不仅加粗而且还有强调的效果

5.span/pre标签

span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而本文也会呈现为等宽字体。
Span

pre <=> >=<

6.del

del.定义文档中已被删除的文本。
在这里插入图片描述

7.em i

i标签显示斜体文本效果
定义文本中强调的内容。

8.sup上标 sup下标

在这里插入图片描述

9.a超链接

Target=”_blank/self”

在这里插入图片描述

点击下载、跳转：

点击发邮件：

点击跳转到h6标签：

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML常用标签</title>
<style type="text/css">
	span{color:red;font-size:20px;}

</style>
</head>
<body>
	<!-- 给要跳转设置name 要点击的地方 href='#name' -->
	<a href='#h6'>点击跳转到h6标签</a>
	<!-- h1在页面中出现一次  h1-h6数字越大的时候 文字越小 权重值越低 -->
	<h1>HTML常用标签</h1>
	<h2>我是标题2</h2>
	<h3>我是标题3</h3>
	<h4>我是标题4</h4>
	<h5>我是标题5</h5>
	<a href='#' name='h6'></a>
	<h6>我是标题6</h6>
	<br/><br/>
	<h2>---font标签---</h2>
	<font size='5' color='blue'>我是文字</font>
	<h2>---p标签---</h2>
	<p>这里是</p>
	<p>吉林大学（Jilin University），简称吉大，坐落在吉林省
	         省会长春市，始建于1946年。是由中华人民共和国教育部直属的综
	         合性全国重点大学。
	</p>
	<h2>---b标签---</h2>
	<b>2019.09.28第一天学习前端</b>
	<strong>我要变粗啦！！！</strong>
	<P><strong>吉林大学（Jilin University）</strong>，
	简称吉大，坐落在吉林省省会长春市，始建于1946年。是由中华人民共和国
	教育部直属的综合性全国重点大学。
	</P><br/><br/>
	<h2>---span标签---</h2>
	<span>同学们中午好呀</span><br/><br/>
	<h2>---pre标签模板展示---</h2>
	<pre>
	风
	情
	认
	真
	学
	习
	&lt;meta http-equiv="Content-Type"&gt;
    &lt;title>HTML常用标签&lt;/title>
    &lt;style type="text/css">   
	</pre>
	<del>删除线</del><br/><br/>
	<h2>---i标签  倾斜---</h2>
	<i>累了吧来瓶红牛</i><br/><br/>
	<h2>---em标签 有强调效果---</h2>
	<em>来瓶脉动脉动动回来</em><br/><br/>
	<h2>---上标---</h2>
	a<sup>2</sup> + b<sup>2</sup> = ? <br/><br/>
	<h2>---下标---</h2>
	H<sub>2</sub> + O<sub>2</sub> = H<sub>2</sub>0
	 <br/><br/>
   <a href='http://baidu.com' target='_blank'>百度一下，你就知道</a>
   <br/><br/>
   <!-- 当前页面不跳转 -->
   <a href='#'>百度一下，你就知道</a>
  
   <a href='文艺联合会.pptx'>点击下载</a>
   <a href='1.html'>点击跳转</a>
   <a href='mailto:1300171083@qq.com'>点击发送邮件</a>

</body>
</html>```