您的位置: 首页  >  文章  >  HTML学习笔记-入门

HTML学习笔记-入门

分类: 文章 • 2024-12-05 16:27:34
  • HTML结构包含三部分：文档声明+ 头部+主题内容

HTML学习笔记-入门

上述代码涉及到的标签,我们要从格式、作用、经典用法三个方面来学习。

元素=开始标签+内容+结束标签。

  • 标签的类别：
  1. 单标签：只有开始标签，如<meta     />
  2. 双标签：包含开始标签和结束标签，如<html  /html>
  • 标签之间的关系：
  1. 并列标签：对齐写
  2. 嵌套标签：缩进一个tab的距离，如
  • 注：
  1. 并非所有标签都有结束标签，如<img/>,<hr/>,<br/>,它们都可以看做字节数标签。
  2. 对于<meta charset="UTF-8"/>来说，meta是标签，charset是属性名，UTF-8是属性值
  • 语法：
  1. 不区分大小写
  2. 对于自结束标签，可不加/
  3. 属性名可以不加引号
  • 书写标准：
  1. 必须有文档声明
  2. 标签全部小写，属性值全部加上引号
  3. 标签可以嵌套，但是不能交叉
  4. 结束标签要加上/,以保证正确关闭

HTML常见的基本标签

  • 标题标签
  1. 作用：用来定义网页内容的标题
  2. 格式：<hn></hn>,n为1-6，表示标题从大到小
  3. 基本使用
  4. 经典用法
    1. 文章、新闻、博客、论坛题目通常使用h1标签
    2. 网站的logo通常用h1标签
    3. 子标题通常使用h2标签
  • 段落标签
  1. 作用：分割内容，是条理更加清晰
  2. 格式：<p>内容</p>，
  3. 基本使用：<p>第一段</p>，<p>第二段</p>。经常会和<br/>配合使用
  4. 经典用法：用于文章分段
  • p和br的区别
  1. <p>是双标签，<br/>是单标签
  2. <p>是段落标签，<br/>仅仅是换行功能
  3. 不能使用br标签来代替p标签
  • 超链接标签
  1. 作用：用于链接网页、图片、压缩包
  2. 格式：<a href="" target="" title="" name="">内容</a>
  3. href表示用于链接到的资源地址；target=“_blank”表示在新窗口中打开，target=“_self”表示在旧窗口上打开；title表示当鼠标放到链接上时，显示title对应的属性值；name用于设置锚点。
  • 注
  1. 连接到外面的网页时，通常需要加上http：//来保证通信
  2. 对于超链接标签来说，必须有href属性
  3. 事实上任何标签都有title标签，就是将鼠标放在上面的时候显示的内容
  • 超链接分类
  1. 站外链接：链接到web上的资源，将网址一般描述为URL（uniform resource  location，统一资源定位符），专门用来描述资源在web上的地址
  2. 站内链接：站：多个页面集成并上线；对于站内链接，一般使用相对目录，./表示当前目录，可以省略；../表示上一级目录，不能省略。
  3. 锚点链接：效果：360导航，百度百科的页面导航；设置锚点链接步骤：1） 使用a标签name属性建立锚点，2）链接到锚点，通过a标签href属性；默认有两个锚点，1）#top，不需要设置锚点就可以返回顶部，2）#，不需要设置锚点就可以返回顶部。
  • 图片标签
  1. <img src="" width="" height="" alt=""/>
  2. 当图片不存在或者路径错误时显示alt属性内容，alt（alternate,替代），alt是给搜索引擎看的，有利于SEO（搜索引擎优化）
  • 图片作为超链接的使用
  1. 单个图片作为超链接的使用

            <a href="http://www.baidu.com">

                   <img src="./img/01/PNG" alt="找不到图片"/>

            </a>

  • 图片映射
  1. 作用：在一张图片上建立多个超链接，在图像上定义多个区域，每个区域链接到不同的地址
  2. 步骤：通过img显示图片，将img与map进行绑定；<img src="" alt="" usemap="#map">

                          通过map制作一个地图：<map name="map">

                          通过area制定超链接区域：<area shape="rect" coords="85,140,111,155" href="http://www.baidu.com" alt="">

                                                                         </map>

做图片映射的神器：http://www.image-maps.com

  •  div（division，分隔）和span（跨度）
  1. 作用：没有语义，主要是配合CSS完成页面布局，美化网页
  2. 格式：<div>内容</div>   <span>内容</span>
  3. 基本用法：每个div内容独占一行，是一个块级元素，没有语义，主要用于划分大的区域；
  4. span只占一行中的一部分，可以实现并排显示，是一个行内元素，没有语义，负责分割区域中的小部分。
  • 标签的语义化
  1. 定义：什么样的标签干什么事
  2. 意义：有利于SEO；使网页结构更加合理；方便其他设备解析；利于团队合作开发
  3. 做法：尽可能少使用没有语义化的标签如div和span；在语义化不明显时，即可以使用div也可以使用p时使用p标签；不要使用纯样式的标签，如b（加粗），font，u， center（居中），改用CSS控制；需要强调的文本可以包含在strong（默认样式为加粗）或em（斜体）这些语义标签中

相关推荐