html_day01

最新推荐文章于 2024-07-18 15:09:36 发布

youur4

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量121

点赞数

分类专栏： java学习笔记 Java第一天文章标签： html5

java学习笔记同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Java第一天

1 篇文章 0 订阅

订阅专栏

2 html入门

2-1 简介（了解）

1. 介绍
    html,超文本标记语言（HyperText Markup Language）
        a. "超文本"：页面不仅包含文本，还包含图片、超链接等非文本内容。
        b. "标记"：使用一套事先约定的标签，来表达特别的意思。
        c. "语言"：编程语言，程序员与计算机交流的方式。

2. 作用
    * 用于编写网页。

3. 了解网页的构成
    a. 在浏览器访问网页的时候，可以通过“右键/查看网页源代码”的方式，看到具体的代码。

    b.页面代码包含:html代码，css代码，javaScript代码等。
        * html代码：用于展示需要显示的数据
        * css代码：让数据展示更加好看
        * javascript代码：让整个页面显示的数据具有动画效果（动起来）
            * 前端3剑客

4. html语法特点
    a. 简单
    b. 由标签组成。
    c. 使用浏览器查看效果

5. 标签的介绍
    a. 通常情况下，由开始标签和结束标签组成。

        * <标签>标签内容</标签>

        * 例如：<h1>一级标题的内容</h1>

    b. 有些简单的标签，没有内容，也就无需结束标签。
        * <标签 />
        例如 换行标签：<br/>  

    c. 标签不区分大小写
        * <br />  <BR /> <Br />

    d. html的注释
        * <!-- 需要注释的内容  -->

记住： html很简单，由标签组成

2-2 入门案例

2-2-1 入门案例(HBuilder的使用)

1 用记事本演示入门案例
    a. 示例代码

2. 使用"HBuilder"使用
    a. 介绍
        * 使用“记事本”开发效率低，使用现在流行的前端IDE是HBuilder，提高编程的效率。
            * 注：IDE, Integrated Development Environment,集成开发环境

    b. 演示
        (1) HBuilder的安装
            * 绿色版，免安装，直接双击使用

        (2) HBuilder的使用
            * “文件”-->新建 "Web项目"

2-2-2 html文件说明

Logo

属性，一定是归属于某个标签

2-2-3 文档声明的介绍(了解)

1. 文档声明
    a. <!DOCTYPE>  表示：文档声明
        * 前提：目前多个html版本共存
        * 通过文档声明，指定当前文件符合那个版本，从而保证页面的正确显示。

    b. 常见的文档声明
        * HTML4.01中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。
        * HTML 5声明很简单<!DOCTYPE html>

    c. 常用的文档声明
        (1) HTML5
            * <!DOCTYPE html>

        (2) HTML 4.01
            * <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 


2. 小故事：超强容错的浏览器
    * 爱多VCD
    * 大家写html文件，必须严格按照规范,有开始标签和结束必须一一配对。

Logo

2-3 小结

1. html的作用
    * 编写网页

2. html的特点
    --？--
        * 简单，由标签组成。
        * 属性，归属于标签。

3. 思考：html的学习内容
    --？--
    * 学习各种标签，以及这个标签的属性


4. 学习方法
    * html属于机械化的学习，只需要知道如何查找即可；
    * 学习方法：掌握html标签使用的套路，知道有那些标签，用的时候，查找即可。

3 html常用标签学习（重点，非常容易）

3-1 排版标签（多个）

3-1-1 使用场景:公司简介

1. 案例背景：网站信息页面显示
    * 网站中用于公司的介绍。

2. 案例的图示(见下图)
 index.html(表示首页)

Logo

3-1-2 标签介绍

1.  排版标签整理
    a. 标题标签
        <h1></h1> --> <h6></h6>,h1最大，h6最小

    b. 字体标签
        <font></font>，常见属性：
            size:字体大小
            color：字体颜色
            听说读写  


    c. 段落标签
        <p></p>

    d. 换行标签
        <br/>

    e. 水平线标签
        <hr/>
            * 有2个属性:size：粗细, color：颜色

    f. 粗体标签（随便用一个）
        <b></b>
        <strong></strong>

    g. 斜体标签
        <i></i>

2. 细节
    a. color的取值
        (1) 取值有2种方式：
            * 预设颜色值：color="red" blue, green, gold, black, yellow
            * 使用十六进制：color="#00(红) 00（绿） 00（蓝）" ~ "#ffffff"
                    256*256*256= 
            10进制：0---9
            2进制：0，1
            16进制：0--9， a,b,c,d,e,f 
            16进制下： 9 +2 = b    8 +8 = 10

            红色的取值： 00-ff  : 15 * 16 +15 = 255(10进制)

        (2) 原理：三原色
            * 又称RGB颜色模型或红绿蓝颜色模型，主要在电子系统中检测，表示和显示图像，比如电视和电脑
            * 三原色指色彩中不能再分解的三种基本颜色，即红(red)、绿(green)、蓝(blue)。
            * 三原色可以混合出所有的颜色。

    b. 3个特殊字符的显示
        (1). 格式
            空格： &nbsp;
            小于号 "<" :   &lt;
            大于号 ">" :   &gt;

        (2) 作用
            html源码中，需要多个空格，必须使用：&nbsp;
             html源码中，需要显示 "<h1>"字符串，必须使用：&lt;h1&gt;

3. 案例演示（略）

4. 感觉
    html的排版标签很多，因为：每个标签，负责的职能唯一。

    附三原色的图示

Logo

3-2 图片标签（1个）

3-2-1 使用场景：展示图片

1. 图片的作用
    * 页面显示中，图片是必不可少的，漂亮的图片，可以大大提高用户体验。
    * 前端开发：是“看脸的”；后台开发,看“肌肉的”

3-2-2 标签介绍

1. 图片标签
    <img>标签，是单标签。

2. 常见属性：
    * src:图片的路径（最重要的属性）
    * width:图片宽度
    * height:图片的高度
    * alt:图片提示（图片不能显示时，给用户的提示）
    * title:鼠标放到图片上时显示的提示

3. 细节
    a. src:图片的路径，有2种表达方式：
        (1) 本地图片，使用相对路径。
            "./": 表示当前网页所在目录
            "../": 表示当前网页所在目录的上一级目录

        (2) 网络图片，使用带网络协议的全路径名称。
            * 盗图：网站盗图

    b. width和height，只设定其中一个值，另外一个值，等比例的变化。如果，两个值，都设定，可能导致变形。

图片的路径：相对路径和绝对路径

3-3 列表、超链接标签(多个)

3-3-1 使用场景：友情链接

1. 案例背景
    * 网页的底部，一般会展示一排友情链接，通过互相交换链接，提高网站的知名度和人气。

2. 案例演示（如下图）

Logo

3-3-2 标签介绍

1. 列表标签
    a. 无序列表
        <ul></ul>,常见属性:
            * type属性：disk(实心圆)、circle(空心圆)、square(小方块)

    b. 有序列表（o:order）
        <ol></ol>

    c. 列表项，无序列表或者有序列表的子标签，保存列表具体的内容
        <li></li>

    d. 使用
        <ol>
            <li>三国演义</li>
            <li>水浒传</li>
            <li>西游记</li>
            <li>红楼梦</li>
        </ol>

2. 超链接标签
    a. <a></a>, 常见属性：
        href：表示超链接跳转的路径
        target：确定以何种方式打开新的网页
            * target="_self": 在当前页面打开新的网页
            * target="_blank"：新建一个空白页面，打开新的网页

    b. 使用
        <a href="http://www.163.com" target="_blank" >网易</a>

    c. 细节
        href的取值，分为2种(类似于：img的src取值)
            * 本地(内部)页面，使用相对取值
                "./": 表示当前网页所在目录
                "../": 表示当前网页所在目录的上一级目录

            * 网络页面，使用带网络协议的全路径名称。

6. 案例演示(略)

7. 好玩的
    a. 图片作为超链接

3-3-3 小扩展：锚点

1. 锚点作用
    * 同一个网页内部实现快速跳转

2.  使用方式：（2个步骤）
    * 步骤1：先设置锚点
        <标签   id="锚点名称">html内容</标签>

    * 步骤2：利用超链接跳转到锚点
        <a  href="#锚点名称">跳转到指定锚点</标签>

3-4 “有特色”的表格标签

3-4-1 使用场景：表格基本使用

1. 在页面中显示表格

Logo

3-4-2 标签介绍

1. 表格标签整理
    a. 表格标签
        <table></table>, 常见属性：
            (1) border：边框宽度
            (2) width：表格的宽度
            (3) cellspacing:单元格之间的间隔
            (4) cellpadding：单元格边缘与单元格中的内容的间隔
            (5) bgcolor：背景色
            (6) align: 整个表格的水平对齐方式(最重要)
                * align="center": 水平对齐方式

    b. 行标签
        <tr></tr>,常见属性：
            * align：表示一行在水平的对齐方式

    c. 单元格标签
        <td></td>,常见属性：
            * align：单元格中的内容的对齐方式
            * colspan：横向合并单元格
            * rowspan：纵向合并单元格

    d. 标题标签
        <caption></caption>，用于表的标题标签，其地位等价于<tr>

    e. 表头标签
        <th></th>, 用于表头显示，会加粗显示，其地位等价于：<td>

3-4-3 基本使用

1. 使用演示
        <table>
            <caption>摸底考试成绩表</caption>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
                <th>排名</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>77</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>赵四</td>
                <td>88</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>99</td>
                <td>1</td>
            </tr>
        </table>

2. 使用表格的属性，进行显示优化
    （略）

3-4-4 重要属性：单元格合并

3. 表格使用单元格合并
    a. <td>的2个属性：
        colspan：横向合并单元格，同一行合并
        rowspan：纵向合并单元格，同一列合并

    b. 完成案例(如图)
        (1) 原始的表格
        <table border="1px" cellspacing="0px" width="500px" align="center" height="300px">
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
                <td>35</td>
            </tr>
            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
                <td>44</td>
                <td>45</td>
            </tr>
            <tr>
                <td>51</td>
                <td>52</td>
                <td>53</td>
                <td>54</td>
                <td>55</td>
            </tr>
        </table>

        (2) 完成下列变化(如下图)
            colspan：横向合并单元格，同一行合并
            rowspan：纵向合并单元格，同一列合并

Logo

3-4-5 表格不可思议的使用：页面布局（小故事）

1 用途
    * 用于页面布局


2. 小故事(上卷)
    * 在多年前，互联网刚刚普及的时候，网页内容非常简单，形式也非常单调。1997年，美国设计师David Siegel出版了一本"里程碑式"的网页指导书《Creating Killer Web Sites》(创建杀手级网站), 表明使用表格可以创建出“魔鬼般迷人”的网站。

    * 这种用表格进行网页布局的方法很快普及到了全世界的网页设计师手中。数百万网站的外观发生了很大变化，较之原来，丰富多彩起来了。

3. 剧透
    * 实战案例：完成首页的编写，就是使用表格，完成页面布局。

4 实战案例：首页的编写

重点：
    掌握表格标签进行布局的方法


1. 完成第一页

2. 完成第二页

3. 完成第三页

5 案例：后台页面的编写

5-1 框架标签

5-1-1 使用场景：后台页面开发

1. 作用
    * 管理网站的后台信息，例如：电商系统，主要进行“用户管理”，“商品管理”，“订单管理”等功能

2. 结构
    * 后台管理页面，无需花销的页面结构，只需要清晰展示数据，便于使用即可。

3. 示意图（如下图）

Logo

5-1-2 标签介绍

1. <frameset> 框架集合标签
    a. 相关特性
        (1). <frameset></frameset>,框架集合标签，是多个框架整合在一起的一个框架集合。
        (2). <frameset>和<body>不能共存。
        (3). 必须包含子标签：<frame>
        (3). <frameset>标签可以嵌套使用.(最麻烦的)

    b. 常见属性：
        (1). rows属性，确定行数，取值可以是10px,10%等，最后一个值，可以使用“*”匹配剩余量。
        (2). cols属性，确定列数，取值可以是10px,10%等，最后一个值，可以使用“*”匹配剩余量。
        (3). rows和cols属性，用于确认整体布局。

2. <frame>框架标签
    a. 相关特性
        (1).<frame></frame>, 框架标签，每一个框架都是一个单独的文档

    b. 常见属性：
        (1). src属性：显示页面的路径
        (2). noresize属性：使用方式：noresize="noresize"， 固定框架的大小

5-1-3 基本使用

1. 练习
    a. 使用rows把框架在“垂直方向”分为3个部分，分别是：10%，20%，70%

    b. 使用cols把框架在“水平方向”分为2个部分，分别是：20%，70%

    c. 先“垂直方向”分为2个部分，分别是：20%，80%；然后在下面部分，再次进行“水平方向”划分3个部分:20%,30%，50%

5-2 实战案例：后台页面开发

1. 技术难点
    * 点击左侧的超链接，内容在右侧显示

2. 技术实现
    * <frame>中name属性，与<a>标签中，target属性的配合使用。(见下图说明)

Logo

“`

youur4

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_day01

2 html入门2-1 简介（了解）1. 介绍 html,超文本标记语言（HyperText Markup Language） a. "超文本"：页面不仅包含文本，还包含图片、超链接等非文本内容。 b. "标记"：使用一套事先约定的标签，来表达特别的意思。 c. "语言"：编程语言，程序员与计算机交流的方式。2. 作用 * 用于编写网页
复制链接

扫一扫