复习：

1.Web项目的部署结构

 静态Web技术(客户端技术)：提供的内容任何人在任何时间访问都是一样的

HTML/CSS/JS/Flash....

动态Web技术(服务器端技术)：提供的内容不同人在不同时间访问都可能改变——一般需要访问数据库等

PHP/JSP/ASP.NET/Node/Python....

自学一门新语言的步骤：

(1)了解背景

(2)搭建环境

(3)变量和常量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方库和框架

(10)实用项目

结论：HTML编程语言非常简单！——只学2天！——在背单词，后续天天用肯定不会忘记！——记得整理思维导图！

今日目标：

(1)HTML语言

1.HTML语言概述

Hyper Text Markup Language：超文本标记语言，1991年产生，文件后缀为.html、.htm、.xhtml等。后来升级为HTML1.0 .... HTML4.0、XHTML、HTML5等多个版本。

世界上的第一个网页：

http://info.cern.ch/hypertext/WWW/TheProject.html

HTML语言的特点：简单、跨平台。

标记：标签、元素，指用<>括起来的特殊单词，能够被浏览器中的HTML解释器翻译为一种特殊的页面效果。

2.搭建HTML语言的运行环境

 标准情况下：

服务器端：安装WEB服务器，编写并保存网页，启动WEB服务器

客户端：安装WEB浏览器，输入服务器的地址开始访问

 简单情况下：

自己编写的HTML网页，可以直接拖拽到浏览器中显示——没有经过WEB服务器的处理——不推荐这样使用。

3.HTML基础语法

(1)HTML文档中可以包含任意字符，以及W3C/HTML标准预定义的标签。

(2)标签分为两类：

双标记标签： <标签名>内部内容</标签名>

单标记标签： <标签名/> 或简写为<标签名>

(3)开始标签上可以声明属性：

<标签名  属性名='值'   属性名="值">

如：<hr  width='50%'  color="red"  id="shuipingxian2"  title=""  class=""  style="">

(4)标签可以嵌套，但不能交叉

正确：<p>A<span>B</span>C</p>

错误：<p>A<span>B</p>C</span>

(5)HTML文档可以使用注释

<!-- ... -->

SQL中的注释：    #            /*...*/

PHP中的注释：   #、//         /*...*/

HTML中的注释： <!-- ...  -->

4.一篇HTML文档的标准结构

<! 文档类型声明 >

<html>

<head>...</head>

<body>...</body>

</html>

5.HTML标准中常用的标签 —— 重点！

标签名

含义

<html></html>

标识一篇HTML文档的开始和结束

<head></head>

定义文档的头部

<body></body>

定义文档的主体

<title></title>

只能声明在<head>标签内，标识文档的标题

<meta>

只能声明在<head>标签内，用于标识网页的“元数据”

metadata：元数据，指描述数据的数据

{

empId:       101

empName:   tom

isMarried:    true

salary:       8000

}

6. HTML标准中常用的标签 —— 文本相关标签——重点！

标签名

含义

<b></b>

Bold，文本加粗显示

<i></i>

Italic，文本斜体显示

<u></u>

Underline，文本添加下划线

<s></s>

Strike，文本添加删除线

<sub></sub>

文本显示为“下标字”

<sup></sup>

文本显示为“上标字”

<h1></h1>

一号标题字

<h2></h2>

二号标题字

<h3></h3>

三号标题字

<h4></h4>

四号标题字

<h5></h5>

五号标题字

<h6></h6>

六号标题字

<p></p>

Paragraph，表示为文章中的一个段落，每段落必然重启一行

&nbsp;     空格

™     商标TM

®       注册商标®

<         小于号

>        大于号

×     ×号

HTML转义字符

<div></div>

区块，最简单的区块元素，不附加任何样式

<span></span>

跨距，最简单的行内元素，不附带任何样式

练习：统计出来h1~h6标签默认字体大小是标准文本字体大小的几倍？

H1:2em、H2:1.5em、H3:1.17em、

H4:1em、H5:0.83em、H6:0.67em

小知识点：HTML块级标签和行内标签

所有的HTML标签可以分为两大类：

块级元素(block)：必须独立占据一整行，同一行中不允许存在其他内容

H1~H6、P、DIV

行内元素(inline)：可以与其他内容同处于同一行

B、I、S、U、SUB、SUP、SPAN

7. HTML标准中常用的标签 —— 图片和超链接——重点！

标签名

含义

<img src="" alt=""  width="" height="">单标记标签；IMG是一个行内元素！

在页面中呈现一幅图片

src：Source，指定图片的地址

alt：Alternative，指定图片无法加载时显示的提示文字

width：指定显示的宽度

height：不指定的话会与宽度等比例缩放，若指定了可以实现拉伸或压缩图片的效果

<a  href=""  target=""></a>

Anchor：超链接、锚点，用于在不同的网页间跳转，或者是在一个网页的不同部分跳转

href：指定跳转的地址

target：指定如何打开目标地址，可取值为_self(当前窗口)或_blank(空白窗口)

小知识：常见的图片格式

(1)jpg/jpeg：色彩细节丰富，适合于展示照片；只能是矩形。

(2)png：色彩比较丰富，支持透明。

(3)gif：色彩一般丰富，支持动画效果。

切记：网页中显示的图片一定不要太大！如1024*768图片大约在xxKB或100+KB足够了！

小知识：图片地址的种类

URL：Unified Resource Locator，统一的资源定位符，互联网上所有的网页、图片、音视频都有一个唯一的地址，称为URL地址。

绝对地址：以协议名或//开头的URL地址

http://127.0.0.1:8080/HTML_DAY01/img/1.jpg

https://www.baidu.com/img/bd_logo1.png

http://tmooc.cn/script/img_v2/logo_v3.png

//127.0.0.1:8080/HTML_DAY01/img/1.jpg

//www.baidu.com/img/bd_logo1.png

//tmooc.cn/script/img_v2/logo_v3.png

相对地址：不以协议名或//开头，而是指定相对于当前资源的相对地址

img/1.jpg 在当前路径下寻找img目录

./img/1.jpg 在当前路径下寻找img目录

../img/1.jpg 在当前目录的上一级目录下寻找img目录

超链接A元素的两种用法：

(1)在不同的网页间跳转：

<a  href="./2.html">跳转到2</a>

<a  href="http://www.baidu.com">跳转到百度</a>

(2)在某个网页的不同部分间跳转：

<a  href="#chapter3">跳转到第三章</a>

........

<h1  id="chapter3">第三章  大闹天宫</h1>

课后练习：

编写HTML网页，实现如下的页面效果：

HTML语言的更多相关文章

  1. C语言 · 高精度加法

    问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一个数组A ...

  2. Windows server 2012 添加中文语言包(英文转为中文)（离线）

    Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...

  3. iOS开发系列--Swift语言

    概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...

  4. C语言 · Anagrams问题

    问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...

  5. C语言 · 字符转对比

    问题描述 给定两个仅由大写字母或小写字母组成的字符串(长度介于1到10之间),它们之间的关系是以下4中情况之一: 1:两个字符串长度不等.比如 Beijing 和 Hebei 2:两个字符串不仅长度相 ...

  6. JAVA语言中的修饰符

    JAVA语言中的修饰符 -----------------------------------------------01--------------------------------------- ...

  7. Atitit 项目语言的选择 java c#.net  php??

    Atitit 项目语言的选择 java c#.net  php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...

  8. 【开源】简单4步搞定QQ登录，无需什么代码功底【无语言界限】

    说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...

  9. InstallShield 脚本语言学习笔记

    InstallShield脚本语言是类似C语言,利用InstallShield的向导或模板都可以生成基本的脚本程序框架,可以在此基础上按自己的意愿进行修改和添加.     一.基本语法规则      ...

  10. 用C语言封装OC对象（耐心阅读，非常重要）

    用C语言封装OC对象(耐心阅读,非常重要) 本文的主要内容来自这里 前言 做iOS开发的朋友,对OC肯定非常了解,那么大家有没有想过OC中NSInteger,NSObject,NSString这些对象 ...

随机推荐

  1. day2模块初识别

    sys_mod.py import sys print(sys.argv) #['C:/Users/Administrator/desktop/s17/day2/sys_mod.py'] 打印脚本的绝 ...

  2. SWD通讯

    这几日看到坛里有几个关于SWD协议相关的文章,自己也尝试了下,有点体会,也有些疑惑,写出来与大家分享和交流下.    以下我的模拟SWD接口的板子简称为Host,目标MCU(即我要连接的板子)简称为T ...

  3. go语言学习--go中的map切片

    //定义一个结构 type Car struct { Brand string Age int } func Pluck() map[int][]Car { carMap := make(map[in ...

  4. ARM 版本

    M  microcontroller 单片机 STM32                                M0 M0+   M3  M4  M7低功耗 A applicatioin 应用 ...

  5. 【学习】pandas 基础介绍说明 【pandas】

    本文来源于<利用python进行数据分析>中文版,大家有兴趣可以看原版,入门的东西得脚踏实地哈 1.pandas 数据结构介绍 首先熟悉它的两个主要数据结构,Series 和 DataFr ...

  6. Linux下修改Tomcat默认端口

    假设tomcat所在目录为/usr/local/apache-tomcat/ 1.打开tomcat配置文件#vi /usr/local/apache-tomcat/conf/server.xml 2. ...

  7. 1、detail页面 /items/detail/:id

    <template> <div class="item_detail"> <van-swipe :autoplay="3000" ...

  8. python入门（六）：函数

    1.系统自带的函数: >>> dir(__builtins__) ['ArithmeticError', 'AssertionError', 'AttributeError', 'B ...

  9. Eclipse中创建一个新的SpringBoot项目

    在Eclipse中创建一个新的spring Boot项目: 1. 首先在Eclipse中安装STS插件:在Eclipse主窗口中点击 Help -> Eclipse Marketplace... ...

  10. cdnbest独立主控配置自定义错误页面

    注:自定义错误的域名最好配置ssl,不配碰到有使用ssl的域名,错误码显示就会有问题 (1)登陆管理后台点区域列表-->配置-->错误url 解析一个域名到你的cdn主控,然后输入这个ur ...