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） 指定网页的关键字---面向搜索引擎；

　　　　　　　　<meta name='keywords' content=' 关键字1，关键字2，关键字3 ' >

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

　　　　　　　　<meta name='description' content='........' >

三， HTML标记

a， 文本

　　1，HTML中的特殊字符

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

　　　　（2）&lt ；　　　　表示一个 <

　　　　（3） &gt ；　　      表示一个 >

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

　　　　（5）&yen ； 　　    表示￥

　　练习1:

　　　　实现以下效果：

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

　　　　　© 版权所有：xx科技xxx

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>

　　　　　　

WEBBASE篇： 第一篇， HTML知识1的更多相关文章

  1. JVM学习篇-第一篇

    JVM学习篇-第一篇 JDK( Java Development Kit): ​ Java程序设计语言.Java虚拟机.Java类库三部分统称为JDK,JDK是用于支持Java程序开发的最小环境** ...

  2. python 基础篇第一篇

    本节内容 1.python介绍 2.发展史 3.python2和python3 4.安装 5.简单程序,hello world程序 6.变量 7.用户输入 8.模块初识 9..pyc是什么? 10.数 ...

  3. Sharepoint 2013 安装部署系列篇 第一篇 -- 系统集群安装

    这部分讲述怎样配置两台服务器作为sql集群. 准备 *你需要两个网卡在每台服务器上,一个是共有,另一个是私有的(heartbreak通信)*共享存储如SAN存储需要至少如下配置,并且需要连接到每台节点 ...

  4. java多线程基础篇第一篇

    1.在开始多线程之前,我们先来聊聊计算机的缓存 计算机处理一个程序需要cpu处理器与存储设备的交互.但是在计算机发展的过程中,cpu处理器的处理速度不断提高,而存储设备的读写速度却没有得到与cpu同样 ...

  5. [应用篇]第一篇 EL表达式入门

    概念 EL表达式:EL 全名为Expression Language,就是为了替代<%= %>脚本表达式. 作用 获取数据: EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的 ...

  6. 第一篇：微信公众平台开发实战Java版之了解微信公众平台基础知识以及资料准备

    相信很多人或多或少听说了微信公众平台的火热.但是开发还是有一点门槛,鉴于挺多朋友问我怎么开发,问多了,自己平时也进行以下总结.所以下面给大家分享一下我的经验: 微信公众号是什么? 官网的介绍:再小的个 ...

  7. Java基础知识常见面试题汇总第一篇

    [Java面试题系列]:Java基础知识常见面试题汇总 第一篇 文中面试题从茫茫网海中精心筛选,如有错误,欢迎指正! 1.前言 ​ 参加过社招的同学都了解,进入一家公司面试开发岗位时,填写完个人信息后 ...

  8. Matlab高级教程_第一篇：Matlab基础知识提炼_01

    第一篇:Matlab基础知识提炼: 这一篇主要用系统和提炼性的语言对Matlab基础知识进行总结,主要适用于有语言基础的学习者.尽量不讲废话. 第一部分:Matlab是什么? 1 Matlab是Mat ...

  9. LWJGL3的内存管理，第一篇，基础知识

    LWJGL3的内存管理,第一篇,基础知识 为了讨论LWJGL在内存分配方面的设计,我将会分为数篇随笔分开介绍,本篇将主要介绍一些大方向的问题和一些必备的知识. 何为"绑定(binding)& ...

  10. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

随机推荐

  1. Java集合list,map,set区别及遍历

    1.1 List.Set.Map基本区别 1.List,Set都是继承Collection接口,Map不是. 2.List:LinkedList.ArrayList.Vector Set :HashS ...

  2. 蓝桥杯—BASIC-19 完美的代价(贪心)

    问题描述 回文串,是一种特殊的字符串,它从左往右读和从右往左读是一样的.小龙龙认为回文串才是完美的. 现在给你一个串,它不一定是回文的,请你计算最少的交换次数使得该串变成一个完美的回文串. 交换的定义 ...

  3. 【环境】新建Maven工程步骤及报错解决方法

    新建Maven工程步骤: 1.打开eclipse,File-New-Other-Maven-Maven project 点击Finish,即可创建一个Maven工程.Maven是内置的,不需要额外下载 ...

  4. 【Loadrunner_WebService接口】对项目中的GetProduct接口生成性能脚本

    一.环境 https://xxx.xxx.svc?wsdl 用户名:username 密码:password 对其中的GetProduct接口进行测试 备注:GetProducts.xml文件内容和S ...

  5. json模块&xml

    json模块将数据修改成字符串,方便其他语言进行识别. 只认双引号,不认单引号.使用json.dumps的操作步骤 先将单引号修改成单引号 将变量使用单引号引起来 将数据类型编程json字符串 jso ...

  6. [POJ2985]The k-th Largest Group

    Problem 刚开始,每个数一个块. 有两个操作:0 x y 合并x,y所在的块 1 x 查询第x大的块 Solution 用并查集合并时,把原来的大小删去,加上两个块的大小和. Notice 非旋 ...

  7. day21 MRO和C3算法

    核能来袭 --MRO和C3算法 1. python的多继承 2.python经典类的MRO 3.python新式类的MRO, C3算法 4.super 是什么鬼? 一.python的多继承 在前面的学 ...

  8. Scrapy结构

    http://scrapy-chs.readthedocs.io/zh_CN/1.0/intro/overview.html scrapy 使用Twisted 这个异步网络库来处理网络通信,使用pyt ...

  9. 2.6 C++通过引用来传递和返回类对象

    参考:http://www.weixueyuan.net/view/6338.html 总结: C++语言中,由类声明的对象,和其它类型声明的变量一样,同样可以通过传值.引用和指针的方式作为函数的参数 ...

  10. 区分舍入函数fix/round/ceil/floor

    1)fix(n)的意义是取小于n的整数(是向零点舍入的意思是往零的方向上靠),这是一类应用在整数取值上的函数,就如同以前我们所研究的求整问题: 例如:fix(pi)=3 ; fix(3.5)=3;  ...