初识HTML

HTML

• 网页的内容结构

CSS

• 网页的视觉结构

JavaScript

• 网页的交互处理

HTML5.0

• HTML5是一个全新的HTML标准，优势极其明显
• 能更好地支持移动端，性能更好，用户体验更好
• 增强了对游戏、多媒体等领域的支持
• 代码更加规范简洁，开发者的一大福音
• 兼容旧版本，也会废弃一些旧特性

字符实体

• HTML中有一些字符是预留出来作特殊用途的，比如
  小于号（<）
  大于号（>）

• 比较常用的有
  空格： 
  大于号：>
  小于号：<
  &：&

  
  字符实体表

head元素

• head元素里面的内容是一些“元数据”（元数据：描述数据的数据）
  一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标

• title元素
  网页的标题

• meta元素
  可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码
  一般都使用UTF-8编码，涵盖了世界上几乎所有的文字
  在HTML5之前，meta标签的写法也是比较复杂的

body元素

• body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

HTML 普通标签使用

• h
  表示网页的标题
  h1~h6共规定了6个等级的标题

• p元素
  表示文章中的一个段落 （paragraph）

• strong元素
  用于强调某些文本，粗体的显示效果

• pre元素

• 在默认情况下，HTML代码中的大多数空格都会被浏览器压缩，比如一段连续的空格会被压缩成1个空格
  如果想完全保留HTML代码中的空格、换行，可以使用pre元素

• code元素
  用于显示程序代码

• br元素
  单标签，表示强制换行

• img元素
  • 1.img元素专门用来显示图片（img是image的缩写）
  • src属性（ src是source的缩写）用来设置图片的路径（URL）
  • 绝对路径：完整的描述文件位置的路径
  • 相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系
    . 代表当前文件夹（1个.），可以省略
    .. 代表上级文件夹（2个.）

注意
img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
在HTML5规范中，alt是img元素的必要属性
width、height的默认单位是px，像素

• 元素
  • a元素的作用
    定义超链接，用于打开新的URL
  • 常用属性
    href：指定要打开的URL
    Hypertext Reference的简称
    target：在哪里打开URL

target可以有以下几种取值
_self：默认值，在当前窗口打开URL
_blank：在一个新的窗口中打开URL
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
某个frame的name值：在某个frame中打开URL

• iframe元素

  • 利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
  • frameborder属性
    用于规定是否显示边框
    1：显示
    0：不显示

• base元素

  • 可以利用base元素设置当前页面所有a元素的默认行为
    base元素写在head元素中

    
    base元素

• span元素

  • 默认情况下，跟普通文本几乎没差别
  • 用于区分特殊文本和普通文本，比如用来显示一些关键字

• div元素

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分

锚点链接

• 锚点链接可以实现：跳转到网页中的具体位置

 <a href="#one">go</a>

点击go会定位到
id值为one的元素
name值为one的a元素

伪链接

有时候点击链接的时候并不希望打开新的URL，而是希望干点别的事情，这时可以使用伪链接
伪链接：没有指明具体链接地址的链接
点击链接后具体要做什么事情，需要编写对应的JavaScript代码
如果暂时不做任何事，可以先写成下面形式

伪链接

图片链接

• img元素跟a元素一起使用，可以实现图片链接

  
  图片链接