学习笔记☞ HTML(一)

本文介绍了WEB的基本概念,包括WEB的组成、服务器和浏览器的作用。接着深入讲解了HTML,阐述了HTML的定义、作用及在计算机中的表现。重点解析了HTML的基础语法,如标记、属性、注释和大小写规则。此外,还详细讨论了HTML文档结构,包括文档类型声明、HTML页面结构以及<head>和<body>标记。最后,讲解了文本相关标记、标题、段落、换行、分区元素和列表标记的使用。
摘要由CSDN通过智能技术生成

1、WEB

    1、什么是WEB

        web就是互联网上的一种应用程序 - 网页
        典型的应用:
            1、C / S
                Client : 客户端
                Server : 服务器
            2、B / S
                B :Browser 浏览器
                S :Server 服务器

    2、WEB的组成 & 运行流程

        由服务器,浏览器 和 通信协议组成
        服务器:处理用户的请求(request)和响应(response)
        浏览器:代替用户向服务器发送请求(User Agent)
        通信协议:规范了数据是如何打包以及传递的 - http
            http : Hyper Text Transfer Protocal
                        超级   文本 传输     协议

    3、WEB服务器

        1、作用
            接受用户的请求并给出响应
            存储WEB信息
            具备安全性功能
        2、产品
            1、APACHE
            2、TOMCAT
            3、IIS - Internet Information Service
            4、Nginx
        3、技术
            1、JSP - Java Servre Page
            2、Php
            3、ASP.NET
            4、Python Web (Django,Flask,... ...)

    4、WEB浏览器

        1、作用
            1、代替用户向服务器发送请求
            2、作为响应数据的解释引擎
        2、主流浏览器产品
            1、Micosoft Internet Explorer (IE)
            2、Google Chrome
            3、Mozilla Firefox
            4、Apple Safari
            5、Opera Opera

            浏览器靠内核处理数据,内核包含两部分:
                1、内容排版引擎 - HTML,CSS
                2、脚本解释引擎 - JS
        3、浏览器技术
            也称为 "前端技术"
            HTML,CSS,JavaScript

2、HTML概述

    1、HTML介绍 和 基本语法

        1、什么是HTML

            HTML :Hyper Text Markup Language
                   超级  文本 标记   语言
                         编写网页的一款语言
            超文本:具备特殊功能的文本就是超文本
                普通文本 a :普通字符a
                超文本 a :表示的是超链接功能

                普通文本 b :普通字符b
                超文本 b :表示文字加粗功能

            标记:超文本的组成形式
                普通文本 a : a
                超文本 a : <a></a>
            语言:语言有自己的语法规范
            

             W3C:World Wide Web Consortium
                万维网联盟

        2、HTML在计算机中的表现

            所有的网页在计算机中都是以 .html 或 .htm 作为结尾的文件来进行表示的
            
            开发工具:所有的文本编辑类软件都可以作为开发工具
                1、记事本
                2、Editplus,Sublime
                3、Dreamweaver,WebStorm,... ...
            运行工具:浏览器
                推荐使用:Google Chrome

3、HTML 基础语法(重点)

    1、标记的语法

        1、什么是标记

            在网页中,用于表示功能的符号称为 "标记/标签/元素"

        2、语法

            所有的标记,在使用时必须用<>括起来
            标记分为 双标记 和 单标记
            1、双标记
                由开始标记 和 结束标记组成
                <标记>...</标记>
                ex:
                    1、<a>...</a>
                    2、<b>...</b>
                    3、div 标记
                        <div>....</div>
                    4、p 标记
                        <p>....</p>
                注意:双标记,有开始,必须要有结束,否则显示效果会出错

            2、单标记
                只有一个标记,既能表示开始,又能表示结束。
                单标记自己就是个独立的功能,没有文本或其他内容可以控制
                <标记>   或   <标记/>
                ex:
                    1、<br> 或 <br/> : 换行
                    2、<hr> 或 <hr/> : 一条水平线
                    3、<img> 或 <img/> : 显示图片

    2、标记的嵌套

        在一对标记中,再出现另外一对标记,目的是为了实现功能的嵌套
            超链接 : <a></a>
            加粗 :<b></b>
        加粗的超链接:
            1、<a><b>....</b></a>
            2、<b><a>....</a></b>
        为了良好的可读性,被嵌套的内容尽量独占一行,并添加缩进
            <a>
                <b>... ...</b>
            </a>

    3、标记的属性 和 值

        1、什么是属性

            在标记中,用来修饰标记显示效果的东西就是属性

        2、语法

            1、属性的声明必须在开始标记中
                <标记 属性的声明位置处></标记>
             2、属性名 和 标记名 之间要用空格隔开
                <标记 属性名称></标记>
            3、属性名 和 属性值之间用=连接,属性值要用" " 或 ' ' 引起来
                <标记 属性名="值"></标记>
            4、一个元素允许设置多个属性,多属性之间排名不分先后,但多属性之间要用空格隔开
                <标记 属性1="值1" 属性2="值2"></标记>

    4、HTML中的注释

        <!--  
            注释内容1
            注释内容2
        -->
        注意:
            1、注释不能出现在<>中
                <p<!-- -->>... ...</p>
                以上写法是错误的
            2、注释不能嵌套
                <!--
                    这是注释内容
                    <!--
                        这是注释内容
                    -->
                -->
                以上写法是错误的

    5、HTML中不区分大小写

        <p></p>
        <P></P>
        <P></p>

4、HTML 文档结构

    1、文档类型声明

        出现在网页最顶端的第一个标记
        作用:告诉浏览器使用HTML的哪个版本
        <!doctype html>

    2、HTML页面

        在文档类型声明之下,使用一对 html 标记来表示网页的开始和结束
        <html></html>

        在 html 中,包含两对子元素

        1、<head></head>
            表示网页头部信息
        2、<body></body>
            表示网页主体信息

    3、<head> 标记

        作用:描述网页的头部信息,对于网页起到控制的作用
        子元素:
            1、<title>标题内容</title>
            2、指定网页编码
                <meta charset="utf-8">
                告诉浏览器按照utf-8的编码方式进行网页解析
                注意:必须要保证网页文件的编码方式也是utf-8

5、文本相关标记

    1、HTML中特殊字符处理

        1、&nbsp;  表示一个空格
        2、&lt;  表示一个 <
        3、&gt;  表示一个 >
        4、&copy; 表示一个 ©
        5、&yen; 表示 ¥

    2、文本样式标记

        1、作用

            修改文本在网页中的表现形式

        2、标记

            1、<i></i> : 斜体显示文本
            2、<u></u> : 下划线显示文本
            3、<s></s> : 删除线显示文本
            4、<b></b> : 加粗显示文本
            5、<sup></sup> : 上标方式显示文本
            6、<sub></sub> : 下标方式显示文本

             特点:
                该组标记能够与其他的标记或文本在一行内显示

    3、标题标记

        1、作用

            以不同的文字大小以及加粗方式显示文本

        2、语法

            <h#></h#>
            # : 1-6
            <h1></h1> :一级标题
            <h2></h2> :二级标题
            ... ...
            特点:
                 1、会改变文字的大小以及加粗效果
                2、每个标题都会具备垂直的空白距离
                3、每个标题独占一行
                4、每个标题都会具备一个属性

                    属性:align
                    取值:
                        1、left :左对齐
                        2、center :居中对齐
                        3、right :右对齐

    4、段落元素

        1、作用

            突出显示一段文本,每段文本独占一行/块,并且每个段落都会具备一小段的垂直空白距离

        2、语法

            <p></p>
            属性:
                align
            取值:left / center / right

    5、换行元素

        <br> 或 <br/>

    6、分区元素

        1、块分区元素

            标记:<div></div>
            作用:布局(配合CSS)
            特点:独占一行/一块

        2、行内分区元素

            标记:<span></span>
            作用:设置同一行文本的不同样式(配合CSS)
            特点:允许在一行内显示多个span元素,也能够与其他的文本在一行内显示

    7、行内元素 与 块元素

        1、块元素

            只要在网页中能独占一行/一块的元素都称为块级元素,简称为块元素
            p,h1,h2,h3,h4,h5,h6,div
            作用:都可以做布局
            所有的块元素都会具备align属性

        2、行内元素

            多个元素能够在一行内显示的,就是行内元素
            span,i,b,s,u,sub,sup
            作用:处理文本的样式

6、列表标记

    1、作用

        按照从上到下的方式来进行数据排列
        并能够显示列表的标识在内容的前面

    2、列表的组成

        1、列表的类型

            1、有序列表 - <ol></ol>  (Order List)
            2、无序列表 - <ul></ul>  (Unordered List)

        2、列表项

            <li></li> (List Item)

        ex:
            <ol>
                <li>内容1</li>
                <li>内容2</li>
            </ol>

    3、列表的属性

        1、有序列表 - ol

            1、type
                取值:
                    1、1:按数字方式排列显示,默认值
                    2、A:按大写英文字符显示
                    3、a:按小写英文字符显示
                    4、I:按大写罗马数字显示
                    5、i:按小写罗马数字显示
            2、start
                指定有序的字符是从 几 开始显示

        2、无序列表 - ul

            1、type
                取值:
                    1、disc : 实心圆点,默认值
                    2、circle : 空心圆点
                    3、square : 实心方块
                    4、none : 不显示任何标识

    4、列表的嵌套

        在一个列表项中,又出现一个列表

        <ul>
            <li>
                <ul>
                    <li></li>
                </ul>
            </li>
        </ul>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值