HTML学习笔记——标签

最近开始学习前端的一些知识,了解了一下Html和CSS。

HTML:是网页内容的载体,它负责的是网页的内涵,也就是网页要呈现的内容,包括了图片,视频还有文字。是网页要加载的东西;

CSS:是样式表现,也就是网页好不好看就是它负责的。用来改变内容的外观;

JavaScript是用来实现网页的特效,如鼠标滑过表格背景的颜色改变。还有新闻图片的轮换。可以实现交互,动画。

HTML标签:

标签的特点:

    1. 标签由英文尖括号<和>括起来;
    2. 一般是成对出现。分为开始标签和结束标签;结束标签比开始标签多了一个/;如: <p></p>,<div></div> <span></span>
    3. 标签和标签之间是可以嵌套的,也就是一个标签里面还可以再放入一个标签;
    4. 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 代码中输入回车、空格都是没有作用的。

标签七:&nbsp; : 空格

    • 语义:一个空格
    • 语法:&nbsp;

标签八:<hr>:添加水平横线(空标签)

    • 语义:分隔的横线
    • 语法:<hr />(xhtml1.0版本)
    • 默认样式:线条比较粗

标签九:<address>:为网页加入地址信息

    • 语义:定义电子邮件地址、签名或者文档的作者身份等联系地址
    • 语法:<address>联系地址信息</address>
    • 默认样式:斜体

标签十:<code>:插入一行代码

    • 语义:单行代码
    • 语法:<code>代码语言</code>

标签十一:<pre> :预格式化的文本

    • 语义:预格式化的文本,
    • 语法:<pre>语言代码段<pre/>
    • 样式:被包围在 pre 元素中的文本通常会保留空格和换行符
    • 主要用于插入一段代码
时间: 2024-10-21 17:09:35

HTML学习笔记——标签的相关文章

Eclipse 学习笔记

Eclipse 学习笔记 标签(eclipse): 编程工具学习 备注: 视频教程-–<跟老谭玩转Eclipse> 1基本设置: *首选项设置:window->preferences 1主题设置:General->Appearance 直接在右侧面板即可修改主题 2字体设置:General->Appearance->Colors and Fonts 右边面板选择Basic(即适用与全局的意思),在Basic下找到Text Font 即可设置 3拼写检查:General-

Makefile的学习笔记

Makefile的学习笔记 标签: makefilewildcard扩展includeshellfile 2012-01-03 00:07 9586人阅读 评论(2) 收藏 举报  分类: Linux(16)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1    Makefile GNU make的工作分为两个阶段.在第一阶段,make读取makefile文件.内置变量及其值.隐含规则和具体规则.构造所有目标的依赖关系以及所有目标各自的依赖等.在第二阶段,make决

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

学习笔记(一)HTM标签

学习笔记(一)HTML基础知识 HTML:超文本标记语言(Hyper Text Markup Lanuage) HTML就是砌墙,把适当的砖块摆在合适的位置,就能完成一个页面. (一)网页文件命名: a.不可以用中文 b可以使用英文或数字,也可以用拼音,但不要中西合并. c.大小写问题:windowzz操作系统不区分大小写,Linux区分大小写, 所以要求统一区分大小写. d.后缀名必须是html. e.声明html文件时, 最好不要使用特殊数字符,可以用减号或下划线. (二)基本框架: bod

Git 学习笔记&lt;远程仓库与标签管理&gt; (四)

什么是远程仓库? 就像第一章介绍的那样,远程仓库可以储存你编写的所有源码和资源文件. 甚至也可以当网盘使,不过当然有很多契合git管理文本的特性. 下面就要以 github 为示例远程仓库进行介绍.  (也可以自己弄一台服务器作远程仓库). 创建仓库 在主页找到 +New repository 或者右上角的加号里有.输入名字 描述 然后没钱只能public就能确定了.然后呢,点名字打开你的仓库.(主页右下角可以找到) 关于与远程仓库的连接 首先你打开你的保险箱得先证明身份吧,不然我怎么知道你是客

[原创]java WEB学习笔记40:简单标签概述(背景,使用一个标签,标签库的API,SimpleTag接口,创建一个自定义的标签的步骤 和简单实践)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

Git学习笔记(8)——标签管理

本文主要记录的Git标签的作用.标签的多种创建方式,以及标签的删除,与推送,和使用GitHub的Fork参与别人的项目. 标签的作用 发布版本时,通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照.Git的标签虽然是版本库的快照,但其实它就是指向某个commit的指针(跟分支很像,但是分支可以移动,标签不能移动),所以,创建和删除标签都是瞬间完成的. 创建标签 [email pro

【web开发学习笔记】Struts-Tags学习笔记1 - 通用标签和控制标签

通用标签和控制标签 第一部分:代码 //前端 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030" /> <title>Insert title here</title> </head> <body> 访问属性 <a href="<%=contextP