HTML笔记

HTML注释

HTML注释的编写方法

ctrl + /

body元素

h1~h6标题(Heading)元素

Heading是头部的意思,通常会用来作为标题
h1级别最高,h6级别最低

p元素(HTML段落元素)

表示文本的一个段落
p元素是段落,分段的意思
p元素多个段落之间会有一定的间距

img元素

将一份图像嵌入文档
img是图像的意思
事实上img是一个可替换元素

两个常见的属性

src属性

source单词的缩写,表示源
是必须的,它包含了你想嵌入的图片的文件路径

alt属性

不是强制性的,有两个作用

作用一: 当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本
作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义

地址

网络地址

网络图片的设置非常简单，给一个地址即可

本地地址

绝对路径 (几乎不用)

相对路径（常用）

相当于当前文件的一个路径
.代表当前文件夹（1个.），可以省略
.. 代表上级文件夹（2个.）

对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是/，而不是\img元素-图片的路径

a元素(锚元素)

跳转到另外一个链接
定义超链接,用于打开新的URL

两个常用的属性

href属性

指定要打开的URL地址
也可以是一个本地地址

target属性

该属性指定在何处显示链接的资源

_self : 默认值,在当前窗口打开URL
_blank : 在一个新窗口中打开URL

a元素-->锚点链接

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

锚点链接有两个重要步骤

在跳到的元素上定义一个id属性
定义a元素,并且a元素的href指向对应的id

  
  <a href="#content1">内容一</a>
  <a href="#content2">内容二</a>
  <a href="#content3">内容三</a>

  <h2 id="content1">内容一</h2>
  <p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
  </p>
  <h2 id="content2">内容二</h2>
  <p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
  </p>
  <h2 id="content3">内容三</h2>
  <p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
  </p>

a元素-->图片链接

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

实现思路:

a元素中不存放文字,而是存放一个img元素
也就是img元素是a元素的内容

  <a href="http://www.mi.com">
    <img src="./images/xiaomi_01.jpeg" alt="">
  </a>

iframe元素

嵌套网页
某些网页禁止嵌套(原理)
和a元素结合(target另外两个值)

frameborder属性

用于规定是否显示边框

1 : 显示
2 : 不显示

a元素target的其他值

_parent : 在父窗口中打开URL
_top : 在顶层窗口中打开URL

div元素,span元素

div元素

多个div元素包裹的内容会在不同的行显示

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

span元素

多个span元素包裹的内容会在同一行显示

默认情况下,跟普通文本基本没有区别
用于区分特殊文本和普通文本,比如用来显示一些关键字

不常用元素

strong元素

内容加粗,强调

通常加粗会使用css样式来完成
开发中偶尔会使用一下

i元素

内容倾斜

通常斜体会使用css样式来完成
开发中偶尔会使用它来做字体图标

code元素

用于显示代码

偶尔会使用用来显示等宽字体

br元素

换行元素

开发者已经不再使用

HTML全局属性

我们发现某些属性只能设置在特定的元素中：

比如img元素的src、a元素的href
也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为“全局属性（GlobalAttributes）”

id：

定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

class：

一个以空格分隔的元素的类名（classes）列表，它允许CSS 和Javascript通过类选择器或者DOM方法来选择和访问特定的元素；

style：

给元素添加内联样式

title：

包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的.

HTML笔记

HTML笔记

HTML注释

HTML注释的编写方法

body元素

h1~h6标题(Heading)元素

p元素(HTML段落元素)

img元素

两个常见的属性

src属性

alt属性

地址

网络地址

本地地址

绝对路径 (几乎不用)

相对路径（常用）

a元素(锚元素)

两个常用的属性

href属性

target属性

a元素-->锚点链接

a元素-->图片链接

iframe元素

frameborder属性

a元素target的其他值

div元素,span元素

div元素

span元素

不常用元素

strong元素

i元素

code元素

br元素

HTML全局属性

id：

class：

style：

title：

字符实体

URL

URL的格式

和URI的区别