HTML笔记

文本标记

1. 标题

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

特点：1.字号h1最大，h6最小

              2.字体加粗

              3.独自占一行

              4.上下有垂直空间

专有属性：align: 设置文本的水平对齐方式left(默认左对齐）/center（居中）/right（右对齐）

2. 段落

<p></p>

特点：独自占据一行，上下有垂直的空间

专属属性 align

注意:p标签中不能嵌套块级元素

3. 水平分割线

<hr> 或者 <hr/>

功能：独占一行，页面上画出一行线

注意：属性值可以不带双引号，推荐加上双引号

 属性呢： size 可设置高度

                     color 可设置颜色

                     width 可设置的宽度

          align 设置水平对齐方式 left/center(默认值)/right

4. 文本样式标签

推荐使用带语义的标签

<b></b><strong></strong> 加粗

<i></i><em></em> 斜体

<s></s><del></del> 删除线

<u></u> 下划线

 上标

 下标

5. 分区元素

块分区<div></div> 做页面的结构布局时使用

       特点，没有样式，单独成行

       属性 align=””left/center/right

行分区<span></span> 同一行文本，如果有不同样式，使用span.修饰文本用的

       特点，没有样式，与其他文本共用一行

6. 块级元素和行内元素

块级元素     行内元素     行内块元素

独占一行 与其他文本和其他行内元素还有行内块共用一行 与其他文本和其他行内元素还有行内块共用一行

图片与超链接

1. 图片的使用

<img src="图片资源路径/url">

2. url

Uniform Resource Locator

统一资源定位符，简称路径

URL的分类

1.绝对路径

2.相对路径

①绝对路径

一个完整的资源路径地址

使用网络资源的时候，都使用绝对路径

网络资源的特点

服务器本地资源不可能使用绝对路径，要使用相对路径

②相对路径

相对路径的参照物，是html本身

兄弟关系，直接调用兄弟资源的名称 src="资源名称"

3.img的属性

src="" 引用资源路径

width=””设置宽度

height=”” 设置高度

注意，设置的宽高如果不符合图片原始的宽高比例，会出现图片的失真现象。一般宽高只设置一个，另外一个自动适应

4. 超链接

项目中，src还是href都不允许写空的

跳转到其它页面

<a href=""></a>

a标签的其它表现形式

<a href="1.zip">下载</a>

<a href="mailto:aaa@qq.com">发送邮件</a>

<a href="#">回到页面顶部</a>  

5. 锚点

在页面中任意位置做一个记号

点击a标签，让页面跳转到这个记号，显示当前的内容

1.定义锚点

  htm规定使用a标签定义锚点 <a name="锚点名称"></a>

2.跳转锚点，使用a标签跳转

  <a href="#锚点名称"> </a>

6. a标签的属性

href="" 资源路径

name="" 使用a标签定义锚点时，设置锚点名称