最近开始学习前端的一些知识,了解了一下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. 浅析天猫H5站点

    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿.艺龙.同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆:我们同时会借鉴. ...

  2. Atitit 《控制论原理与概论attilax总结

    Atitit <控制论原理与概论attilax总结 <控制论> 奠基之作,出自创始人维纳.虽然内容权威,但我认为带有相当强烈的个人色彩,且门槛较高,不适合入门.深入研究控制论必看书籍 ...

  3. Atitit.安全性方案规划设计4gm  v1 q928

    Atitit.安全性方案规划设计4gm  v1 q928 1. 安全架构设计与功能安全检测1 2. https1 3. 账号安全体系1 4. 配置文件安全 1 5. 源码加密与安全2 6. 最高强度的 ...

  4. iOS - ViewController的生命周期

    iOS SDK中提供很多原生的ViewController,大大提高了我们的开发效率:那么下面我们就根据开发中我们常用的ViewController谈一谈它的生命周期: (一)按照结构和用法可以对iO ...

  5. Windows Server 2003安装方法

    1. 设置BIOS,从光驱引导启动.光盘放入光驱,自动读盘,选择第一项“安装Windows Server 2003,Enterprise Bdition”: 2. 弹出加载安装文件界面. 3. 出现安 ...

  6. 用gcc进行程序的编译

    在Linux系统上,一个档案能不能被执行看的是有没有可执行的那个权限(x),不过,Linux系统上真正认识的可执行文件其实是二进制文件(binary program),例如/usr/bin/passw ...

  7. SQL优化技术分析-4:其他

    ORACLE的提示功能是比较强的功能,也是比较复杂的应用,并且提示只是给ORACLE执行的一个建议,有时如果 出于成本方面的考虑ORACLE也可能不会按提示进行.根据实践应用,一般不建议开发人员应用O ...

  8. 在阿里云中编译Linux4.5.0内核 - Ubuntu内核编译教程

    实验环境:Ubnuntu 64位(推荐使用14.04)+Xshell 阿里云现在提供的云服务器很好用的,用来编译内核性能也不错.本文介绍最基本的内核编译方法,为了方便,所有操作均在root用户下进行. ...

  9. Oracle Connect by与递归with

    层次查询 select * from emp; select empno, ename, job, mgr, sal, deptno,level lv, sys_connect_by_path(ena ...

  10. Linux shell脚本编程(二)

    Linux shell脚本编程(二) 练习:求100以内所有偶数之和; 使用至少三种方法实现; 示例1: #!/bin/bash # declare -i sum=0 #声明一个变量求和,初始值为0 ...