HTML学习笔记——标签
2024-08-20 08:34:41
最近开始学习前端的一些知识，了解了一下Html和CSS。
HTML：是网页内容的载体，它负责的是网页的内涵，也就是网页要呈现的内容，包括了图片，视频还有文字。是网页要加载的东西；
CSS：是样式表现，也就是网页好不好看就是它负责的。用来改变内容的外观；
JavaScript是用来实现网页的特效，如鼠标滑过表格背景的颜色改变。还有新闻图片的轮换。可以实现交互，动画。
HTML标签：
标签的特点:
- 标签由英文尖括号<和>括起来；
- 一般是成对出现。分为开始标签和结束标签；结束标签比开始标签多了一个/；如： <p></p>，<div></div> <span></span>
- 标签和标签之间是可以嵌套的，也就是一个标签里面还可以再放入一个标签；
- HTML标签不区分大小写；（建议小写）
TTML文件的基本结构：
<html>
<head>...</head>
<body>...</body>
</html>
<html>...</html>：根标签，所有的标签都放在根标签中；
- <head>...</head> ：是用于文档的头部，是所有的头部元素的容器，便不是网页中之间显示的内容，他描述的是网页的各种属性。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>其中<title>...</title> ：在该标签之间的文字是网页的标题信息，他不会在网页中出现，而是出现在浏览器的标题栏中，该标签用于告诉用户和搜索引擎这个网页的内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。
- <body>...</body> :标签之间的内容是网页的内容，也就是网页上显示的内容都放在这里。如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
HTML的代码注释的格式：<!--注释文字 -->
<body>...</body>中常见标签：
标签一：<p>标签 ：段落
- 语义：添加段落
- 语法：<p>段落文本</p>，一段文字一个<p>标签；
- 默认样式：，段前段后都会有空白；
标签二：<hx>标签：标题
- 语义：网页标题，他和<title>...</title> 是不一样的，也表示的是显示在网页上面的标题，也就是文章的标题
- 语法：<hx>标题文本</hx> (x为1-6)
- 默认样式：加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推，h6标签的字号最小。
标签三：<strong>和<em>： 加强语气
- 语义：都表示强调，但是<em>的语气比<strong>强调的语气更加强烈；
- 语法： <em>需要强调的文本</em> ，<strong>需要强调的文本</strong>
- 默认样式：<em>显示为斜体，<strong>显示为加粗。
标签四：<span>：为文字设置单独样式
- 语义：无；只是为文字设置和其它文字不同的样式
- 语法：<span>文本</span>
- 注意：使用该标签，还应在<head>...</head> 标签中设置属性：如：
<style>
span{
color:blue;
//为<span>元素设置文本颜色为蓝色。
}
</style>
标签五：<q>：短文本引用
- 语义：引用别人的话
- 语法：<q>引用文本</q>
- 默认样式：文字加上双引号
标签六：<blockquote>：长文本引用
- 语义：引用别人的话
- 语法：<blockquote>引用文本</blockquote>
- 默认样式：缩进样式
标签六：<br/>：分行显示文本（空标签）
- 语义：回车换行
- 语法：<br />
- <br/>标签是一个空标签，只需要写一个开始标签
- 在 html 代码中输入回车、空格都是没有作用的。
标签七： ： 空格
- 语义：一个空格
- 语法：
标签八：<hr>：添加水平横线（空标签）
- 语义：分隔的横线
- 语法：<hr />（xhtml1.0版本）
- 默认样式：线条比较粗
标签九：<address>：为网页加入地址信息
- 语义：定义电子邮件地址、签名或者文档的作者身份等联系地址
- 语法：<address>联系地址信息</address>
- 默认样式：斜体
标签十：<code>:插入一行代码
- 语义：单行代码
- 语法：<code>代码语言</code>
标签十一：<pre> ：预格式化的文本
- 语义：预格式化的文本，
- 语法：<pre>语言代码段</pre>
- 样式：被包围在 pre 元素中的文本通常会保留空格和换行符
- 主要用于插入一段代码
最新文章
- 实用CSS3的transform实现多种动画效果
- centos 带S权限的二进制
- .lib文件 .h文件 .dll文件
- Linux内核如何装载和启动一个可执行程序
- UESTC 913 握手 Havel定理+优先队列
- 修改weblogic PermGen
- how to extract and decrypt WeChat EnMicromsg.db on Android phone
- 线性存储结构-LinkedList
- 【转】Xcode7.1环境下上架iOS App到AppStore 流程 (Part 二)
- IOS Android支持中文与本地文件的读取写入
- Problem B: 点之间的距离
- Linux 链接详解----静态链接实例分析
- PAT1110:Complete Binary Tree
- PMP证书的获取，不知道10大注意事项会吃亏
- 前端 -----jQuery的事件绑定和解绑
- socket-WebSocket HttpListener TcpListener 服务端客户端的具体使用案例
- Unity 3D学习心得，程序员开发心得分享！
- linux输入密码的实现
- Java:基本数据类型与类型转换
- poj3666（DP+离散化）