zoukankan      html  css  js  c++  java
  • html入门

    html (hyper text markup language)超文本标记语言

    历史还是很重要的:十多年前电脑还没怎么普及,一帮科学家觉得互相查看资料的时候文字的排版太挫了,所以其中的一个科学家提出了一个想法,用标签来约定文字的排版,什么意思?比如<title>我是标题</title>,浏览器先生在看到<title>这个标签的时候就知道"哦,里面的东西是标题,得把它放到浏览器的标签栏上去",所以可以说学html就是在学标签。

    你的第一个html网页:让浏览器显示出Hello World!

    准备工作:一个记事本 

    一个最基本的html网页包含了几个最基本的标签,它们是:

    <html>告诉浏览器我是一个html网页,写在开头和结尾

    <head>用于放一些预加载的信息,比如css样式,js代码,缓存信息等

    <meta>放一些网页的特征信息,比如关键词,描述,编码格式等

    <body>正文信息

    下面这几个标签就可以让浏览器显示出Hello World!(在记事本中输入这些标签,然后保存,将扩展名改为html,再打开)

    ----------------------------------------------------

    <html>

    <head>

    <meta charset="UTF-8">

    </head>

    <body>

    Hello World!

    </body>

    </html>

    ----------------------------------------------------

    Tip1:<meta>标签之所以说它是必须的是因为如果没有编码格式,那么在很多情况下浏览器会出现乱码。

    Tip2:html的标签都是成对出现的比如<html></html>,但并非所有标签都是严格的,比如<br>换行标签就可以不闭合,但刚开始最好都写成闭合的。

    好了,刚刚牛刀小试了一下有没有成就感,可不要骄傲,除非你幼儿园刚毕业。

    几个最基本的标签能干什么事?所以在那位有爱科学家的不断完善之下,html的标签逐渐丰富了起来,预警:一大拨标签砸袭来!

    <HTML> 文件声明 让浏览器知道这是 HTML 文件  
    <HEAD> 开头 提供文件整体资讯  
    <TITLE> 标题 定义文件标题,将显示于浏览顶端  
    <BODY> 本文 设计文件格式及内文所在  
    排版标记
    <!--注解--> 说明标记 为文件加上说明,但不被显示  
    <P> 段落标记 为字、画、表格等之间留一空白行  
    <BR> 换行标记 令字、画、表格等显示于下一行  
    <HR> 水平线 插入一条水平线  
    <CENTER> 居中 令字、画、表格等显示于中间 反对
    <PRE> 预设格式 令文件按照原始码的排列方式显示  
    <DIV> 区隔标记 设定字、画、表格等的摆放位置  
    <NOBR> 不折行 令文字不因太长而绕行  
    <WBR> 建议折行 预设折行部位  
    字体标记
    <STRONG> 加重语气 产生字体加粗 Bold 的效果  
    <B> 粗体标记 产生字体加粗的效果  
    <EM> 强调标记 字体出现斜体效果  
    <I> 斜体标记 字体出现斜体效果  
    <TT> 打字字体 Courier字体,字母宽度相同  
    <U> 加上底线 加上底线 反对
    <H1> 一级标题标记 变粗变大加宽,程度与级数反比  
    <H2> 二级标题标记 将字体变粗变大加宽  
    <H3> 三级标题标记 将字体变粗变大加宽  
    <H4> 四级标题标记 将字体变粗变大加宽  
    <H5> 五级标题标记 将字体变粗变大加宽  
    <H6> 六级标题标记 将字体变粗变大加宽  
    <FONT> 字形标记 设定字形、大小、颜色 反对
    <BASEFONT> 基准字形标记 设定所有字形、大小、颜色 反对
    <BIG> 字体加大 令字体稍为加大  
    <SMALL> 字体缩细 令字体稍为缩细  
    <STRIKE> 画线删除 为字体加一删除线 反对
    <CODE> 程式码 字体稍为加宽如<TT>  
    <KBD> 键盘字 字体稍为加宽,单一空白  
    <SAMP> 范例 字体稍为加宽如<TT>  
    <VAR> 变数 斜体效果  
    <CITE> 传记引述 斜体效果  
    <BLOCKQUOTE> 引述文字区块 缩排字体  
    <DFN> 述语定义 斜体效果  
    <ADDRESS> 地址标记 斜体效果  
    <SUB> 下标字 指数  
    <SUP> 下标字 下标字  
    清单标记
    <OL> 顺序清单 清单项目将以数字、字母顺序排列  
    <UL> 无序清单 清单项目将以圆点排列  
    <LI> 清单项目 每一标记标示一项清单项目  
    <MENU> 选单清单 清单项目将以圆点排列,如<UL> 反对
    <DIR> 目录清单 清单项目将以圆点排列,如<UL> 反对
    <DL> 定义清单 清单分两层出现  
    <DT> 定义条目 标示该项定义的标题  
    <DD> 定义内容 标示定义内容  
    表格标记
    <TABLE> 表格标记 设定该表格的各项参数  
    <CAPTION> 表格标题 做成一打通列以填入表格标题  
    <TR> 表格列 设定该表格的列  
    <TD> 表格栏 设定该表格的栏  
    <TH> 表格标头 相等于<TD>,但其内之字体会变粗  
    表单标记
    <FORM> 表单标记 决定单一表单的运作模式  
    <TEXTAREA> 文字区块 提供文字方盒以输入较大量文字  
    <INPUT> 输入标记 决定输入形式  
    <SELECT> 选择标记 建立 pop-up 卷动清单  
    <OPTION> 选项 每一标记标示一个选项  
    图形标记
    <IMG> 图形标记 用以插入图形及设定图形属性  
    连结标记
    <A> 连结标记 加入连结  
    <BASE> 基准标记 可将相对 URL 转绝对及指定连结目标  
    框架标记
    <FRAMESET> 框架设定 设定框架  
    <FRAME> 框窗设定 设定框窗  
    <IFRAME> 页内框架 于网页中间插入框架 IE
    <NOFRAMES> 不支援框架 设定当浏览器不支援框架时的提示  
    影像地图
    <MAP> 影像地图名称 设定影像地图名称  
    <AREA> 连结区域 设定各连结区域  
    多媒体
    <BGSOUND> 背景声音 于背景播放声音或音乐 IE
    <EMBED> 多媒体 加入声音、音乐或影像  
    其他标记
    <MARQUEE> 走动文字 令文字左右走动 IE
    <BLINK> 闪烁文字 闪烁文字 NC
    <ISINDEX> 页内寻找器 可输入关键字寻找于该一页 反对
    <META> 开头定义 让浏览器知道这是 HTML 文件  
    <LINK> 关系定义 定义该文件与其他 URL 的关系  
    StyleSheet
    <STYLE> 样式表 控制网页版面  
    <span> 自订标记 独立使用或与样式表同用  

    注:

    • 表示该标记属围堵标记,即需要关闭标记如 </标记>
    • 表示该标记属空标记,即不需要关闭标记。
    • IE 表示该标记只适用于 Internet Explorer。
    • NC 表示该标记只适用于 Netscape Communicator。
    • 反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择。
    • 弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记。
    • 表示该标记是 HTML 4.0 中新增的。

    突然看到这么多表格是不是有点蒙比,别担心,咱慢慢来,上面这张表有点旧了,凡是有IE,NC,反对,弃用注释的,大家都可以略过不看了,为什么?因为老旧的就应该灭亡!

    好了,你是不是在准备等我一个标签一个标签的解说呢?或许我闲得蛋疼的时候会这么做,在这之前,你只需要好好看一下别人整理好的解说,然后一个个的练习就好了

    w3cschool:http://www.w3school.com.cn/html/

    html帮助文档:http://yunpan.cn/cdAIiM4MdI9NA  访问密码 75e7

    TIP:说两个有用的特殊字符

    &nbsp; 空格的效果

    &quot;  引号

     -----------------------------------------------------------

    更新:

    我本人的邮箱ymczxy@126.com,有我会的问题可以直接问我,做好的网页也可以发给我,要是人多的话,我可以弄个网站专门放作品,别怕挫,这是NX人生的开始。

  • 相关阅读:
    利用 Avisynth 2.5.8 的 ColorKeyMask 功能实现视频抠像
    Codebook model 视频抠像 xp sp3 + vs2005 + OpenCV 2.3.1
    call、apply、bind
    网络模型
    搜索关键字变色突出显示
    面向过程与面向对象编程的区别和优缺点
    webpack打包体积优化---插件 webpack-bundle-analyzer
    百度搜索关键词特效
    DNS原理及其解析过程
    亿级高并发数据库调优与最佳实践法则
  • 原文地址:https://www.cnblogs.com/ymczxy/p/4694468.html
Copyright © 2011-2022 走看看