WEBBASE篇：第一篇， HTML知识1

2023-01-05 10:03:35

HTML知识1

1，web概述

　　WEB就是互联网上的一种应用程序 - 网页程序；

　　程序结构：
　　　　（1）C / S：　　C:Client 客户端；S:Server 服务器；
　　　　（2）B / S：　　B:Browser 浏览器；S:Server 服务器

2、WEB组成 & 运行流程
　　WEB组成：浏览器，服务器和通信协议组成
　　　　（1）浏览器：代替用户向服务器发送请求(User Agent)
　　　　（2）服务器：接收用户请求并给出响应
　　　　（3）通信协议：规范了请求和响应数据是如何打包以及传递的 - http：超级文本传输协议（Hyper Text Transfer Protocal）

3、WEB 服务器
　　（1）服务器的作用：用于接收用户的请求并给出响应；存储WEB的信息；具备安全性功能；
　　（2）产品：APACHE；TOMCAT；IIS；Nginx；
　　（3）技术：Python Web ；JSP；php；ASP.NET

4、WEB 浏览器
　　作用：代替用户向服务器发送请求；作为响应数据的解释和执行引擎；

　　主要浏览器产品：Microsoft IE(Internet Explorer)；Google Chrome；Mozilla Firefox；Apple Safari；Opera Opera

　　浏览器靠内核处理数据，内核包含以下两部分：
　　　　（1）内容排版引擎 - HTML，CSS
　　　　（2）脚本解释引擎 - JavaScript
　　浏览器技术：HTML；CSS；JavaScript - JS
#########################################

HTML概述

　　HTML介绍 & 基础语法

　　1、什么是HTML？超级文本标记语言Hyper Text Markup Language

　　超文本：具备特殊功能的文本
　　　　普通文本 a : 普通字符 a
　　　　超文本 a : 表示超链接功能

　　　　普通文本 b : 普通字符 b
　　　　超文本 b : 表示加粗功能
　　标记：超文本的组成形式
　　　　普通文本 a : a
　　　　超文本 a :<a></a>

HTML是由W3C负责制定和推广规范的；W3C : World Wide Web Consortium(万维网联盟)

　　2、HTML 在计算机中的表现：
　　　　HTML在计算机中以 .html 或 .htm 为结尾的文件存在的
　　（1）开发工具：所有的文本编辑软件
　　　　windows 记事本；Editplus , Sublime；Webstorm,Dreamweaver,... ...
　　（2）运行工具：浏览器
　　　　推荐使用：Google Chrome 浏览器
练习：
1、创建一个文本文件
2、将文件更名为 01-html.html
3、选择使用 Chrome 打开网页查看效果
4、选择使用 Editplus 编辑网页内容

<!-- 文档类型声明 -->

<!doctype html>

<!-- 根标记 -->

<html>

    <!-- 网页头部 -->

    <head>

        <meta charset='utf-8'>

        <meta name='keywords' content='减肥,减肥妙招,一天瘦十斤'>

        <meta name='description' content='还为肥胖而感到苦恼吗，要想瘦，得吃肉，... ...'>

        <title>我的第一个网页</title>

    </head>

    <!-- 网页主体 -->

    <body></body>

</html>

一，标记的语法规范
　　1，什么是标记
　　在网页中用于表示功能的符号称为"标记/标签/元素"
　　2，语法
　　标记在使用过程中，需要用 <> 括起来
　　标记分为双标记和单标记
　　
　　（1）双标记，是有显示的开始和结束标记组成的
　　　　语法：<标记>内容</标记>
　　ex:
　　　　<b>普通文本</b>
　　　　<s>文本内容</s>
　　　　注意：有开始，必须有结束，否则会产生意想不到的效果
练习：
1、创建一对 p标记
　　<p></p>
2、创建一对 div标记
　　<div></div>
3、创建一对 a标记
　　<a></a>

　　（2）单标记：只有一个标记，既能表示开始，也能表示结束
　　　　语法：<标记> 或 <标记/>
　　ex:
　　　　<br> 或 <br/> : 换行
　　　　<hr> 或 <hr/> : 一条水平线
　　　　<img> 或 <img/> : 图片
　　　　<input> 或 <input/> : 表单控件

　　3，标记的嵌套
　　　　在一对标记中，又出现了其他的标记，相当于就是功能的嵌套
　　　　ex:
　　　　　　<s><b>文本内容</b></s>
　　　　标记嵌套时一定要注意格式问题：被嵌套的内容一定要加缩进
　　　　eg：
　　　　　　<s>
　　　　　　　　<b>文本内容</b>
　　　　　　</s>

　　4、标记的属性和值
　　　　什么是属性？在标记中，属性是用来修饰标记的显示效果的
　　　　语法：
　　（1）属性必须声明在开始标记中
　　　　<标记属性声明位置处></标记>
　　　　<标记属性声明位置处>
　　（2）属性和标记之间，用空格隔开
　　　　<标记属性声明位置处></标记>
　　　　<标记属性声明位置处>
　　（3）属性和值之间使用 = 连接，值要用''或""引起来
　　　　<标记属性="值"></标记>
　　（4）一个元素允许设置多个属性，并且排名不分先后，多属性间用空格隔开
　　　　<标记属性1="值1" 属性2="值2">
练习：
1、创建一对 p 标记，内容随意
2、增加属性，名称为 align 值为 center
3、增加属性，名称为 id 值为 p1

　　　　<p align='center' id='p1'>随意定制的内容</p>

　　5，HTML中的注释；

注：1，注释内容不能出现在<>中；如：<p></p> 错误写法

　　　　　 2，注释内容不能嵌套；

二，HTML文档结构

　　1，文档类型声明；

　　　　<!doctype html>

　　　　出现在网页最顶端的第一个标记；

　　　　作用：告诉浏览器使用的是HTML的哪个版本

　　2，html页面；

　　　在 “ 文档声明 ” 之下，使用一对 <html></html> 根标记来表示页面；

　　　　html根标记包含两对子标记：

　　　　　　a， <head></head>　:　表示网页头部信息；

　　　　　　b， <body></body>　:　表示网页的主体，显示给用户看的内容

　　3，<head></head> 元素

　　　　（1）　<title>标题内容</title>　

　　　　　（2）指定网页内容的编码格式；<meta　charset='utf-8'>

　　　　（3）指定网页的关键字---面向搜索引擎；

（4）指定网页的描述文本---面向搜索引擎

三， HTML标记

a，文本

　　1，HTML中的特殊字符

　　　　（1）&nbsp；　　表示一个空格

　　　　（2）&lt ；　　　　表示一个 <

　　　　（3） &gt ；　　表示一个 >

　　　　（4）&copy ;　　　表示一个 © （copyright）

　　　　（5）&yen ；　　表示￥

　　练习1:

　　　　实现以下效果：

　　　　　<p></p> : 在网页中表示的是一个段落元素

b，文本样式标记

　 1，作用：改变文本在网页中的表现形式；

　　2，标记：

　　　　（1） <i></i> : 斜体

　　　　（2）<u></u> : 下划线

　　　　（3）<s></s> : 删除线

　　　　（4）<b></b> : 加粗显示

　　　　（5）<sup></sup> : 上标

　　　　（6）<sub></sub> : 下标

　　　　　注：以上标记允许与其他文本内容在一行内显示；

　　练习：这是一段有加粗，斜体，删除线，下划线，上标下标的文本；

　　3，标题标记

　　　语法：　<h#></h#>

　　　　　　　　# : 1- 6

　　　　　　<h1></h1> 一级标题，文字最大

　　　　　　<h6></h6> 六级标题，文字最小

　　　练习：静夜思
                       李白
                       床前明月光
                       疑是地上霜
                       举头望明月
                       低头思故乡

　　标题元素们的特点：1，改变文字大小以及加粗效果；2，每个标题都具备垂直的空白距离；

　　　　　　3，每个标题独占一行； 4，每个标题都有一个属性；

　　　　　　属性：align 取值：left 左对齐，center居中对齐，right右对齐

　　4，段落元素；

　　　　作用：突出显示一段文本；独占一行；每个元素都具备垂直空白距离；

　　　　语法： <p></p>

　　　　属性：align

　　　　取值：left 左对齐，center居中对齐，right右对齐

　　5，换行元素： <br>

　　6，水平线元素：<hr>

　　7，分区元素：

　　　　（1）块分区元素

　　　　　　标记：<div></div>

　　　　　　特点：独占一行

　　　　　　属性：align (left / center / right)

　　　　（2）行内分区元素

　　　　　　标记：<span></span>

　　　　　　特点：能在一行中显示多个

　　　　　　作用：设置同一行文本的不同样式；

　　8，行内元素和块级元素

　　　　（1）按照元素不同的表现形式，对元素进行的一个类别的划分；

　　　　（2）块级元素

　　　　　　在网页中能够独占一行的元素都是块级元素

　　　　　　p,div,h1-h6 都有align属性

　　　　（3）行内元素

　　　　　　多个元素能够在一行内显示的，都是行内元素；

　　　　　　span , i, b, s, u, sub, sup

<!doctype html>

<html>

    <head>

        <mate charset='utf-8'></mate>

        <title>Document</title>

    </head>

    <body>

        <div>

            <h3>行内分区元素</h3>

            <span>这是一个行内分区元素</span>

        </div>

        <div></div>

        <p>白日依山尽</p>

        <h1 align='center'>静夜思</h1>

        <h2>李白</h2>

        <h3>床前明月光</h3>

        <h4>疑是地上霜</h4>

        <h5>举头望明月</h5>

        <h6>低头思故乡</h6>

        <br>

        这一段有<b>加粗</b>，<i>斜体</i>，<s>删除线</s>,<u>下划线</u>，上<sup>标</sup>，下<sub>标</sub>的文本.

        <br>

        &lt；p&gt； &nbsp&nbsp&nbsp这是一个段落。<br>

        &copy:版权所有

    </body>

</html>

码农公寓

HTML知识1

相关文章