前端第一天

2018-09-19  本文已影响0人  knot98

前端第一天

目录：

  1. 前端三剑客
  2. 第一个前端页面
  3. 常用标签
  4. 标签的分类

一. 前端三剑客

html

  1. 为标记语言,是非编程语言

  2. 自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V)

  3. 组成:标签, 指令, 实体
    标签: 由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合)
    指令: 被<>包裹,以!开头的可以被浏览器解析的标记
    实体: 被&;包裹的#开头的十进制数或特殊字母组合
    文档类型: 规定该页面的标签遵循的html语法(h5)

css

js

二. 第一个页面(模板页面)

<!-- 文档类型; 标签语法为 h5 -->
<!-- h5 语法特点 -->
<!-- 
    1. 不区分大小写
    2. 有很多系统标签谜一般都具有语义
    3. 可以随意定义自定义标签    div (万能标签)
    4. h5 内容不保留空白字符(制表符)
    5. 提倡小写
 --> 
<!DOCTYPE html> 
<!-- html: 文档根标签 -->
<html>
<!-- html 只有一儿一女: head, body, 所以可以省略缩进 -->
<!-- html 语法中没有明确规定缩进规则,但从美观可读性出发,开发者要严格遵循缩进 -->
<head>
    <!-- 包含内容:样式表,脚本,元信息,内嵌代码块 -->

    <!-- 字符编码 -->
    <meta charset="utf-8" />
    <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> -->

    <!-- SEO --> 
    <meta name="keywords" content="培训,Python培训,IT培训,peixun" /> 
    <meta name="description" content="老男孩皇家培训机构" />
    
    <!-- 移动适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <!-- tag图片 -->
    <!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
    <link rel="shortcut icon" type="image/x-icon" href="icon.png">
    
    <title>第一个页面</title>
</head>
<body>
    <!-- 包含内容: 除 head 外所有内容 -->
</body> 
</html>
<!-- 以上为最简易页面模板 -->
<!-- 一个页面只存在一个标准模板 -->
<!-- DOCTYPE 必须出现在第一行 -->
<!-- 特殊: 如果没有书写模板,浏览器解析会按'自己的心情'帮你添加模板
icon.png

三. 常用标签

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!-- 1.无语义标签 -->
    <!-- div:最常用的标签,没有之一 -->
    <!-- span:最常用的纯文本标签 -->
    <div></div>
    <span></span>

    <!-- 2.常用语义标签 -->
    <!-- 标题:h1~h6 -->
    <!-- h1标签较经常出现,作为页面最大title形式出现,且一个页面一般只出现一次 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>
    正文
    <!-- br:换行 | hr分割线 -->
    <br>好<br>的<br>
    <hr>呵<hr>呵<hr>
    

    <!-- 3.文本标签 -->
    <!-- i:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 -->
    <i>斜体</i>

    <em>以斜体方式强调</em>

    <b>加粗</b>

    <strong>以加粗方式强调</strong>

    <!-- p:段落标签具有具体区域,成段出现,段落之间存在段落间距 -->
    <p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
    <p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
    <p>123    456       789</p>

    <!-- 原样文本标签:会保留所有字符,原样显示 -->
    <pre>123    456     789</pre>

    <!-- 样式具有下划线 -->
    <ins>插入的文本</ins>

    <!-- 样式具有中划线 -->
    <del>删除的文本</del>

    <!-- eg -->
    &yen;988 <del>98888</del>

    <!-- 10的平方 -->
    <span>10<sup>2</sup></span>

    <!-- 水分子 -->
    <span>H<sub>2</sub>O</span>

    <!-- 右标:小号字体 -->
    <span>你很帅<small>谁信</small></span>

    <!-- pinyin(拼音) -->
    <ruby>
        牛掰<rt>niubai</rt>
    </ruby>
</body>
</html>

四. 标签的分类

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>标签的分类</title>
</head>
<body>
    <!-- 1.单双标签 -->
    <!-- 标签都需要闭合 -->
    <!-- 单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合) ==> 单标题一般具有特殊功能,单标签主功能 -->
    <!-- 双标签:闭合操作有对应的结束标签完成,也可以省略(强烈不建议) ==> 双标签一般具有文本(普通文本与超文本),双标签主内容 -->
    <hr>
    <div>123<!-- </div> -->
    <div>456</div>
    <!-- </div> -->

    <!-- 2.行块标签 -->
    <!-- 行:内联,不具备自身宽高,通常同行显示 -->
    <!-- 块:块级,具备自身宽高,通常换行显示 -->
    <!-- 自定义标签均属于内联标签 -->
    <!-- span{我是span$}*2+div{我是div$}*2 -->
    <span>我是span1</span>
    <span>我是span2</span>
    <div>我是div1</div>
    <div>我是div2</div>

    <!-- 3.单一组合标签 -->
    <!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果 -->
    <ruby>
        好的<rt>haode</rt>
    </ruby>

</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读