2 初识HTML

 

  1. HTML指的是超文本标记语言
    1. HTML不是一种编程语言,而是一种标记语言
    2. 标记语言是一套标记标签 (mark tag)
  2. 常用的快捷键
    1. 生成页面骨架的两种快捷方式
      1. html:5 然后按tab键
      2. ! 然后按tab键
  3. 文档类型 DOCTYPE
    1. <!DOCTYPE html>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML(快捷键 html:5 tab键)或者XHTML(html:xt tab键)规范

<!DOCTYPE html> //这个是HTML5的文档声明 团队约定:HTML文件必须加上DOCTYPE声明,并统一使用HTML5的文档声明

 

  1. 页面语言 lang

<html lang="en">//指定html语言种类 常见的2个: 1.en定义语言为英语 2.zh-CN定义语言为中文 <html lang="zh-CN">指定该html标签 内容 所用的语言为中文 团队约定:考虑浏览器和操作系统的兼容性,目前依然使用zh-CN属性

拓展阅读:

简单来说,可能对于程序来说没有太大的作用,但是它可以告诉浏览器,搜索引擎,一些处理HTML的程序对页面语言内容来做一些对应的处理或者事情。

比如可以

      1. 根据lang属性来设定不同语言的CSS样式或者字体
      2. 告诉搜索引擎做精确的识别
      3. 让语法检查程序做语言识别
      4. 帮助翻译工具做识别
      5. 帮助页面阅读程序做识别
      6. 等等
  • 字符集

<meta charset="UTF-8"> 字符集(Character set)是多个字符的集合。 计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字 utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。 gb2312 简单中文 包括6763个汉字 BIG5 繁体中文 港澳台等用 GBK 包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312 UTF-8 则基本包含全世界所有国家需要用到的字符 这句代码非常关键,是必须要写的代码,否则可能引起乱码的情况。 这句话是让HTML文件是以UTF-8编码保存的,浏览器根据编码去解码对应的html内容。 团队约定: 一般情况下统一使用'UTF-8'编码,请尽量统一写成标准的'UTF-8', 不要写成'utf-8'或'utf8'

  1. 文本格式化标签(熟记)

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这是就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

标签

显示效果

<b></b>

<strong></strong>

文字以粗体方式显示(XHTML推荐使用strong)

<i></i>

<em></em>

文字以斜体方式显示(XHTML推荐使用em)

<s></s>

<del></del>

文字以加删除线方式显示(XHTML推荐使用del)

<u></u>

<ins></ins>

文字以加下划线方式显示(XHTML不赞成使用u)

区别:

b只是加粗 strong除了可以加粗还有强调的意思,语义更强烈。

 

  1. 图像标签(img)

属性

属性值

描述

src

URL

图像的路径

alt

文本

图像不能显示时的替换文本

title

文本

鼠标悬停时显示的内容

width

像素(XHTML不支持%页面百分比)

设置图像的宽度

height

像素(XHTML不支持%页面百分比)

设置图像的高度

border

数字

设置图像边框的宽度

border后面用css也可以实现相同的效果。

注意:

    1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
    2. 属性之间部分先后顺序,标签名与属性、属性与属性之间均以空格分开。
    3. 任何标签的属性都有默认值,省略该属性则取默认值。
    4. 采取键值对的格式 key=“value” 的格式
  • 链接标签a

语法格式: <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

 

属性

作用

href

用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能

target

用于指定链接页面的打开方式,其取值有self和_blank两种,其中self为默认值,_blank为在新窗口中打开方式。

注意:

    1. 外部链接 需要添加 http://www.baidu.com
    2. 内部链接 直接连接内部页面名称即可 比如<a href="index.html">首页</a>
    3. 如果当前没有确定链接目标时,通常将链接标签的href属性值定义为“#”,表示该链接暂时为一个空链接
    4. 不仅可以创建文本超链接,在页面中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
  • 注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的文字,就需要使用注释标签。

简单解释:

注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

格式: <!-- 注释语句 --> 团队约定 一般用于简单的描述,如某些状态描述、属性描述等。 注释内容前后各一个空格,注释位于要注释代码的上面,单独占一行

 

  1. 路径

实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。

    1. 目录文件夹

 

      1. 就是普通的文件夹,里面只不过存放了我们作业面所需要的相关素材,比如html文件、图片等
    • 根目录

 

      1. 打开目录文件夹的第一层就是根目录

 

页面中的图片会非常多,通常我们再新建一个文件夹专门用于存放图片文件(images),这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为相对路径和绝对路径。

    1. 相对路径

以引用文件的网页所在位置为参考基础,而建立出来的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径

 

    1. 绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

“D:\web\im\logo.gif”,或完整的网络地址,例如: “http://www.itcast.cn/images/logo.gif”

 

注意:

绝对路径用的比较少,理解下就可以了。但是要注意,他的写法,特别是符号 \ 并不是相对路径的 /

  1. 锚点定位
    1. 通过创建锚点链接,用户能够快速定位到目标内容。
    2. 创建锚点连接分为两步:

1.使用相应的id名 标注跳转目标的位置。 <h1 id="two">第二集</h1> 2.使用<a href="#id名">链接文本</a>创建连接文本(被点击的) <a href="#two"></a>

  1. base标签

<base target="_blank">

 

总结:

      1. base可以设置整体链接的打开状态
      2. base写在<head></head>之间
      3. 把所有的a链接 都默认添加 target="_blank”属性

全体链接~ 到~ 全体集合 所有链接以新窗口打开页面~ 是~

  1. 预格式化文本pre标签

<pre></pre>标签可以定义预格式化的文本。

被包围在<pre></pre>标签元素中的文本通常会保留空格和换行符。而文本也会显示成等宽字体。

所谓的预格式化文本就是,按照我们预先写好的文字格式来显示页面,保留空格和换行等。

有了这个标签,里面的文字,会按照我们书写的模式显示,不需要段落和换行标签了。但是,比较少用,因为不好整体控制。

  1. 什么是XHTML?

XHTML是更严格更纯净的HTML代码。

  • XHTML指可扩展超文本标记语言
  • XHTML的目标是取代HTML
  • XHTML与HTML4.01几乎是相同的
  • XHTML是更严格更纯净的HTML版本
  • XHTML是作为一种XML应用被重新定义的HTML
  • XHTML是一个W3C标准
  1. HTML和XHTML之间有什么区别?
  • XHTML指的是可扩展的超文本标记语言
  • XHTML与HTML4.01几乎是相同的
  • XHTML是更严格更纯净的HTML版本
  • XHTML是作为一种XML应用被重新定义的HTML
  • XHTML是2001年1月发布的W3C推荐标准
  • XHTML得到所有主流浏览器的支持
  • XHTML元素是以XML格式编写的HTML元素。XHTML是严格版本的HTML,例如它要求标签必须要小写,标签必须被正确关闭,标签顺序必须正确排列,对于属性都必须使用双引号等。
  1. HTML5的崛起之路

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值