Zephon Blog
0%

第一天HTML

发表于 更新于 分类于
本文字数： 3.1k 阅读时长 ≈ 3 分钟

第一天HTML

课程内容介绍

HTML(HTML5)+CSS(css3、flex、移动开发)+JavaScript(es6)+JS库(Jquery、vue、react、anjular)+AJAX+JSON+webpack(发布) 项目：基于原生代码的移动网站(自适应)、基于js库的电脑端网站(数据基于JSON) restful架构：一个服务器提供一个接口，可以给android、ios、web等使用(提供的数据是JSON格式) 手机网站+电脑网站(国内) 响应式网站(国外)：bootstrap

开发工具

HBuilder、VSCode、webstorm

前端的扩展

小程序、typescript

授课安排

第一周：HTML5+CSS3 第二周：JavaScript

HTML+CSS

HTML5(超文本标记语言) CSS(层叠样式表) 内容与样式相分离 strong与b的区别：效果上都是加粗，strong语义是强调，< b >违背了内容与样式相分离，b属于样式，但单词短，写起来方便；类似的还有em和i

标签： 标签名 | 语义 | - | - | - < h1 > | 标题 < ul > | 无序列表(子元素只能是li) < li > | 子列 < p > | 段 < strong > | 强调 < em > | 强调 < div > | 盒子 < span > | 区域 < a > | 锚点 < img > | 图片

注：< h2 > < ul > < p > 默认都和周围有距离 display为block的标签(盒子，单独占一行):h1、p、div、ul、li display为inline的标签(不单独占一行):span、a、strong、em、img 不推荐使用的标签：br hr table font等

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- 网页的文档类型为HTML5 -->
<!DOCTYPE html>
<!-- 标签、标记 tag -->
<!-- 根元素，head和body的父元素 -->
<html>
    <head>
        <!-- 指定字符集 -->
        <!-- HTML属性(attribute)，如charset就是meta的属性,utf-8则是属性值 -->
        <!-- meta是一个单标签(没有结束标签) -->
        <meta charset="utf-8">
        <!-- 标题 -->
        <title>标题</title>
    </head>
    <body>
        <!-- HTML元素=开始标签+内容+结束标签 -->
        <!-- 显示效果：字体字号、粗细、与周围有间距 语义：标题 SEO:搜索引擎优化-->
        <h1>大标题</h1>
        <h6>小</h6>

        <!-- ul的子元素只能是li(在语义上说)，和周围有间距 -->
        <!-- 在网页设计过程中，不使用列表前面自带的点，因为不同的浏览器对此兼容不同-->
        <ul>
            <li>第一个li</li>
            <li>第二个li</li>
        </ul>

        <!-- 永远不用<br> -->
        <!-- <p>和周围有间距-->
        <h2>静夜思</h2>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头<strong>望</strong>明月</p>
        <p>低头思故乡</p>

        <!-- 没有任何显示效果 -->
        <div style="width: 300px; height: 300px; background-color: blue;">
            <span style="font-size:50px; color: red">盒</span><span style="font-size:50px; color:green">子</span>
        </div>

        <!-- 锚点，href中必须是url，即有http等协议标识的 -->
        <!-- a必须要有href属性 -->
        <!-- title属性与SEO相关 -->
        <a href="http://www.baidu.com">百度</a>
        <a href="#">空链接</a>
        <a href="javascript:void(0)">空链接</a>
        <a href="2.png" title="this is title">链接</a>

        <!-- alt：图片无法加载时的文字替代 title：与SEO相关，解释图片-->
        <!-- 当图片宽度变化时，高度会等比例变化 -->
        <img src="3.jpg" alt="this is alt" title="鼠标悬浮时显示" width="400px">
        <a href="http://www.baidu.com"><img src="4.jpg" width="400px">图片超链接</a>

        <!-- 定义列表 -->
        <!-- dt:标题 -->
        <!-- dd:描述 -->
        <!-- dt和dd有着天生的对应关系，一个dt可以对应多个dd-->
        <dl>
            <dt>辽宁</dt>
            <dd>省会沈阳，简称辽</dd>
            <dt>江西</dt>
            <dd>省会南昌，简称赣</dd>
        </dl>

        <!-- 除了罗列数据外，不能用表格 -->
        <table>
            <tr><th>表头</th><th>表头</th></tr>
            <tr><td>单元格</td><td>单元格</td></tr>
        </table>
        <!-- 颜色表示方法：#rrggbb 缩写为#rgb
             rgb(255,255,32)
             rgba(232,232,56,0.5) 0.5为透明度
             字符实体：&lt;&nbsp;不推荐使用
        -->
    </body>
</html>