zoukankan      html  css  js  c++  java
  • HTML入门第一天

    一. C/S架构和B/S架构

    C/S: client/server 客户端服务器架构
    B/S: browser/server 浏览器服务器架构
    优势:
    C/S: 1.需要下载,安装 2.服务器和客户端都需要更新 3.开发维护成本高
    B/S: 1.不需要下载,安装 2.只需要更新服务器 3.开发维护成本低

    二. 浏览器访问服务器的方式

    协议://域名(:端口号)/文件
    http://www.163.com/index.html
    三. 网页的组成
    html css javascript

    四. html
    Hypertext Markup Language 称之为超文本标记语言,又叫超文本标签语言
    作用:不需用编译,通过浏览器执行
    文件后缀: .html或者.htm (建议大家使用第一种)
    修改文件后缀:
    组织---->文件夹搜索选项------>查看---->隐藏已知文件的扩展名去掉前边对勾(这样才能在生成html文件时不会误生成text文件)

    五. 开发工具
    编辑工具: notepad++
    调试工具: chrome(谷歌)

    六. 标签
    标签: 以<>包含的特定的字符串, 通常有开始标签和结束标签
    双边标签(比翼双飞): <标签名>内容</标签名>
    单边标签(单身狗): <标签名 />
    属性: 对标签进行一定的修饰.
    <标签名 属性名1="值1" 属性名2='值2' 属性名3=值3>内容</标签名>
    建议大家对属性值使用""引起来
    元素: 一个完整的标签就是一个元素

    七. 指定字符集:
    <meta charset="utf-8"/>
    设置字符集步骤:
    1.文件保存的编码格式
    选项---->转为utf-8无bom格式
    2.浏览器执行文件的编码格式
    <meta charset="utf-8"/>
    八. 全局架构标签
    <html>
    <head></head>
    <body></body>
    </html>
    注意:
    1.所有的内容必须写到html标签中
    2.head标签中的内容不在浏览器中显示
    3.body里边的内容显示浏览器中

    九. 几乎每个标签都要有的属性(结合css/js)
    class name id style

    十. 字符实体 (&nbsp;空格)
    http://w3school.com.cn/tags/html_ref_entities.html(可以在这个网站查看所有的字符实体)
    十一. 常用标签(文本修饰)
    标题: h1-h6 h1最大 h6最小
    加粗: <b></b> <strong></strong>
    斜线: <i></i><cite></cite><em></em>
    下划线: <u></u>
    删除线: <s></s>
    上标: <sup></sup>
    下标: <sub></sub>
    字体: <font></font>(size/color/face)
    滚动: <marquee></marquee>(direction/scrollamount/loop)
    十二. 常用标签(格式控制)
    段落: <p></p>
    换行: <br />
    不换行: <nobr></nobr>
    水平线: <hr />(单标签)
    原型输出: <pre></pre>
    无序列表: <ul></ul><li></li>(type:circle/square/desc)
    有序列表: <ol></ol><li><li>(type:a/A/i/I start )
    自定义列表: <dl></dl><dt></dt><dd></dd>



    总结: 1.容错性强
            2.不区分大小写(强制使用小写)
        3.可以嵌套

    <html>
        <head>
          <meta charset="utf-8"/>
        </head>
        <body>
          <marquee direction="right" scrollamount='100' loop=1>鸡年大吉,财源滚滚</marquee><br /><!--marquee这个标签是滚动-->   
        <
    font color="blue" size="30" face="微软雅黑">这是一个段修饰的文本</font>   
       </body>
    </html>

    实例说明:

      在上述代码中,我们可以看到有全局架构标签<html><head></head><body></body></html>,其中head标签里的meta标签在这里是表明字符编码类型为utf-8,而在body中marquee这个标签是表示让字符滚动,在<>中出现的direction这是他的属性的代表的是字符滚动的方向,默认是从右向左滚动,这改成了从左向右,而另一个scrollamout则是他滚动的速度,loop是代表的循环的次数.在这里说一下,一个标签里面的属性并非全要写出来,用不到的或者只需要默认的属性就可以不写出来,大家灵活应用.就好像这里面的loop属性,他如果不写出来得话,字符就会一直滚动,就做成了一个简单的滚动条.再往后看,发现了"鸡年大吉,财源滚滚"这些字符,它们的位置在<marquee>与</marquee>之间,代表的是marquee是一个双边标签,而他显示字符是写在开始符与结束符之间的!后面的就是<br />这个单边标签,它代表的意思是换行,回车.然后就是<!--marquee这个标签是滚动-->  这一串代码,你会发现它是绿色显示的,表明他是注释,不知道大家有没有别的编程语言的基础,在语句中注释是用来解释和说明的,不会参与代码的运行,在html中<!--注释的内容-->注释是这种表示方式.接下来就是<font></font>,他是规定文本的字体、字体尺寸、字体颜色的.因此他有属性color(字体颜色),size(字体尺寸),face(字体),用法在代码中一目了然,我就不解释了.这就是这一整串代码的内容,很基础,也很简单,希望对准备接触html的同学有所帮助,有所裨益!

  • 相关阅读:
    0806 c#总复习
    0804 递归
    0808 html基础
    0803结构体,枚举类型
    0801out传值
    0731函数
    0730特殊集合
    0728多维数组,ArrayList集合
    js 获取url链接的任意参数
    jq dom操作
  • 原文地址:https://www.cnblogs.com/phplk/p/6528813.html
Copyright © 2011-2022 走看看