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>

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

JVM学习篇-第一篇
JVM学习篇-第一篇 JDK( Java Development Kit): Java程序设计语言.Java虚拟机.Java类库三部分统称为JDK,JDK是用于支持Java程序开发的最小环境** ...
python 基础篇第一篇
本节内容 1.python介绍 2.发展史 3.python2和python3 4.安装 5.简单程序,hello world程序 6.变量 7.用户输入 8.模块初识 9..pyc是什么? 10.数 ...
Sharepoint 2013 安装部署系列篇第一篇 -- 系统集群安装
这部分讲述怎样配置两台服务器作为sql集群. 准备 *你需要两个网卡在每台服务器上,一个是共有,另一个是私有的(heartbreak通信)*共享存储如SAN存储需要至少如下配置,并且需要连接到每台节点 ...
java多线程基础篇第一篇
1.在开始多线程之前,我们先来聊聊计算机的缓存计算机处理一个程序需要cpu处理器与存储设备的交互.但是在计算机发展的过程中,cpu处理器的处理速度不断提高,而存储设备的读写速度却没有得到与cpu同样 ...
[应用篇]第一篇 EL表达式入门
概念 EL表达式:EL 全名为Expression Language,就是为了替代<%= %>脚本表达式. 作用获取数据: EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的 ...
第一篇：微信公众平台开发实战Java版之了解微信公众平台基础知识以及资料准备
相信很多人或多或少听说了微信公众平台的火热.但是开发还是有一点门槛,鉴于挺多朋友问我怎么开发,问多了,自己平时也进行以下总结.所以下面给大家分享一下我的经验: 微信公众号是什么? 官网的介绍:再小的个 ...
Java基础知识常见面试题汇总第一篇
[Java面试题系列]:Java基础知识常见面试题汇总第一篇文中面试题从茫茫网海中精心筛选,如有错误,欢迎指正! 1.前言参加过社招的同学都了解,进入一家公司面试开发岗位时,填写完个人信息后 ...
Matlab高级教程_第一篇：Matlab基础知识提炼_01
第一篇:Matlab基础知识提炼: 这一篇主要用系统和提炼性的语言对Matlab基础知识进行总结,主要适用于有语言基础的学习者.尽量不讲废话. 第一部分:Matlab是什么? 1 Matlab是Mat ...
LWJGL3的内存管理，第一篇，基础知识
LWJGL3的内存管理,第一篇,基础知识为了讨论LWJGL在内存分配方面的设计,我将会分为数篇随笔分开介绍,本篇将主要介绍一些大方向的问题和一些必备的知识. 何为"绑定(binding)& ...
深入理解ajax系列第一篇——XHR对象
× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

随机推荐

loj 10001 种树
*********贪心,把需要的路段终止点排序,然后在每个区间内判断是否已经满足条件,不满足的从区间右端向左端种树. #include<cstdio> #include<algori ...
ActiveMQ 消息的重新投递
正常情况下:consumer 消费完消息后,会发送"标准确认"给 broker,这个确认对象以 MessageAck 类表征: // 省略其他代码.类中定义了各种确认的类型 pub ...
paysoft 网关出现EntityRef:expecting;的错误。
paysoft 网关出现EntityRef:expecting;的错误. 原因是传进去的url里有&字符,之前是自动转义的,现在要手工改成& http://www.runoob.com ...
shell IF分支判断语句
单分支IF条件语句 if [ 条件判断式 ] then 程序: fi //结束的时候if反过来写 fi ----------------------------- /** * if test -d ...
windows 网络操作
ver 命令显示当前机器上的操作系统版本信息 ipconfig/release 释放IP地址 ipconfig/renew 重新获取IP地址 cmd下使用ssh 如果想在cmd中输入 ssh xx@ ...
Kafka.net使用编程入门(三)
这个世界既不是有钱人的世界,也不是有权人的世界,它是有心人的世界. 一些有用的命令 1.列出主题:kafka-topics.bat --list --zookeeper localhost:2181 ...
HashMap与TreeMap按照key和value排序
package com.sort; import java.util.ArrayList; import java.util.Collections; import java.util.Compara ...
nexus下载远程maven中央仓库的解决方案
参考:http://www.linuxidc.com/Linux/2014-03/98708.htm https://repo.maven.apache.org/maven2/.index/ 下载这两 ...
C++基础知识：STL简介
1.标准模板库STL ― STL , 即 : Standard Template Library , 是 C++的一部分― STL是常用数据结构和算法的集合― STL的目标是标准化组件 , 提高开发效 ...
Linux关闭防火墙步骤
1 先查询防火墙状态 [root@old-09 ~]# /etc/init.d/iptables status Table: filter Chain INPUT (policy ACCEPT) ...

WEBBASE篇： 第一篇， HTML知识1

HTML知识1

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

随机推荐

热门专题

WEBBASE篇：第一篇， HTML知识1

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