最近开始学习前端的一些知识，了解了一下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 元素中的文本通常会保留空格和换行符
    • 主要用于插入一段代码

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

  1. HTML学习笔记——标签（二）

    标签十二:<ul>标签 语义:是没有前后顺序的信息列表 语法: <ul> <li>信息</li> <li>信息</li> ... ...

  2. HTML学习笔记——标签设置格式

    1>标签设置格式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  3. html学习笔记 - 标签

    单标签 : <!DOCTYPE html> 解析类型标签 <!-- xxx --> 注释标签 <br /> 换行标签 <hr /> 分割线标签 < ...

  4. html学习笔记--标签大全

    一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD).   标签:a 说明:标明超链接的起始或目的位置.   标签:acronym 说明:标明缩写词.   ...

  5. git 学习笔记 ---标签管理

    发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...

  6. Angular 学习笔记——标签指令

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  7. Makefile的学习笔记

    Makefile的学习笔记 标签: makefilewildcard扩展includeshellfile 2012-01-03 00:07 9586人阅读 评论(2) 收藏 举报  分类: Linux ...

  8. NetFlow学习笔记

    NetFlow学习笔记 标签: netflow 由于工作需要,对NetFlow做了一些学习和调研,并总结成文档以供学习分享. 背景:随着系统的升级与漏洞的修补,入侵主机进而进行破坏的病毒攻击方式在攻击 ...

  9. JVM学习笔记-JVM模型

    JVM学习笔记 == 标签(空格分隔): jvm 学习笔记全部来自于<深入理解java虚拟机>总结 jvm内存示意图 虚拟机栈(Java Virtual Machine Stacks): ...

随机推荐

  1. 前端渲染利器——JsRender入门

    JsRender不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好用 ...

  2. 快来熟练使用 Mac 编程

    熟练使用工具,可以提高一个人的做事效率- 1. iTerm2快捷键使用 ⌘ + d: 垂直分屏,⌘ + shift + d: 水平分屏. ⌘ + ]和⌘ + [在最近使用的分屏直接切换.而⌘ + op ...

  3. 【工匠大道】 svn命令自己总结

     本文地址   分享提纲: 1. svn 不常见单有用的命令 2. svn查看切换用户 1. svn自己总结的一些不常见,但有用的命令 1)[导出svn不带版本代码]导出不带svn版本控制的代码到本地 ...

  4. KMP算法

    KMP算法是字符串模式匹配当中最经典的算法,原来大二学数据结构的有讲,但是当时只是记住了原理,但不知道代码实现,今天终于是完成了KMP的代码实现.原理KMP的原理其实很简单,给定一个字符串和一个模式串 ...

  5. Struts2入门(七)——Struts2的文件上传和下载

    一.前言 在之前的随笔之中,我们已经了解Java通过上传组件来实现上传和下载,这次我们来了解Struts2的上传和下载. 注意:文件上传时,我们需要将表单提交方式设置为"POST" ...

  6. 如何注册微信小程序

    小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验.开发者可以根据平台提供的能力,快速地开发一个小程序. 开放内容包括: 开放注册范围:企业.政府.媒体.其他组织: 开发 ...

  7. Android 手机卫士--获取联系人信息并显示与回显

    前面的文章已经实现相关的布局,本文接着进行相关的功能实现 本文地址:http://www.cnblogs.com/wuyudong/p/5951794.html,转载请注明出处. 读取系统联系人 当点 ...

  8. ORACLE 博客文章目录(2015-05-27更新)

    从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...

  9. 萌新笔记——Cardinality Estimation算法学习（一）（了解基数计算的基本概念及回顾求字符串中不重复元素的个数的问题）

    最近在菜鸟教程上自学redis.看到Redis HyperLogLog的时候,对"基数"以及其它一些没接触过(或者是忘了)的东西产生了好奇. 于是就去搜了"HyperLo ...

  10. C#相关开发视频

    Quickly Generate C# Classes from JSON Responses .NET Compiler Platform ("Roslyn") for the ...