您的位置: 首页  >  文章  >  HTML

HTML

分类: 文章 • 2025-02-03 16:28:22

网站的搭建分为三部分：

  • web前端
    前端的技术主要包括
    1. html： 负责搭建结构和内容 （盖房子）
    2. css： 负责美化页面 （装修）
    3. JavaScript： 负责给页面添加动态效果和动态内容 （智能家居）
    4. jQuery: 对js进行封装，写的更少 实现的更多
  • 服务端
  • 数据库

HTML

  • 学习html主要学习的就是 有哪些标签 标签有哪些属性 标签和标签的嵌套关系

  • HyperTextMarkupLanguage：超文本标记语言，超文本指不仅仅是纯文本还包括字体相关的设置和多媒体信息(音频、视频、图片)

  • html页面结构介绍：

      <!DOCTYPE html><!-- 文档声明：告诉浏览器使用
  	html哪个版本的标准解析页面 -->
  <html><!-- 页面根标签 所有内容都在它里面 -->
  	<head><!--头标签：给浏览器看的内容  -->
  		<meta charset="UTF-8">
  		<title>第一个html页面</title>
  	</head>
  	<body><!--体标签：给用户看的内容 -->
  		
  	</body>
  </html>

HTML常见标签

内容标题

  • 独占一行 并且有上下外边距 字体加粗
    <h1>-<h6> 字体从大到小
    属性： align=“left/right/center” 水平对齐方式

段落标签 p

  • 独占一行 并且有上下外边距

水平分割线 hr

换行 br

列表标签

  1. 无序列表
    ul:type=“disc/circle/square”
    li

  2. 有序列表
    ol:
    type=“disc/circle/square”
    start起始值 reverse降序
    li

  3. 定义列表
    dl :definition list 定义列表
    dt :definition term 定义一级列表项
    dd:definiton description 定义二级列表项（对一级项的描述）

    <dl>
	<dt>大宝剑</dt>
	<dd>干将</dd>
	<dd>鱼肠</dd>
	<dd>倚天剑</dd>
	
	<dt>宝刀</dt>
	<dd>屠龙刀</dd>
	<dd>杀猪刀</dd>
</dl>

  4. 列表嵌套

  • 有序无序可以任意无限嵌套

分区标签(元素)

  • 自身没有显示效果，用于管理多个标签

  • 分区的作用：

    1. 方便多页面复用
    2. 对多个元素进行统一管理

  • 块级分区元素： div
    独占一行

  • 行内分区元素: span
    共占一行

  • h5新增的分区标签

      <header>头部</header>
  <article>正文</article>
  <footer>脚部</footer>

标签分类

  1. 块级元素：独占一行
    div     h1-h6     p      hr
  2. 行内元素：共占一行
    span
    字体加粗：strong和b
    斜体：em和i
    删除线：del和s
    下划线:ins 和u

空格折叠现象

  • 如果出现多个空格只能识别一个

实体引用

  1. 空格 &nbsp;
  2. 小于号 &lt;
  3. 大于号 &gt;
  4. 换行 <br>
  • 常用的实体引用：markdown语法里的转义和html好像一样的
    HTML

图片标签 img

  • src 访问路径

    1. 相对路径：访问站内资源时使用相对路径
      • 图片和页面在同一目录，直接写图片名
      • 图片在页面的上级目录, …/图片名
      • 图片在页面的下级目录, 文件夹名/图片名
    2. 绝对路径：访问站外资源使用绝对路径
      称为图片盗链，好处：节省自己网站资源，
      坏处：有可能找不到图片 -->

  • alt：图片不能显示时显示的文本内容

  • title: 鼠标悬停时显示的文本

  • width/height: 两种赋值方式

    • 如果只给宽度赋值 则高度会等比例缩放
      1. 像素
      2. 上级元素的百分比

  • 支持 jpg/jpeg、png、gif

图像地图

  • map 属性：name（唯一标识）
  • 子标签
    area: shape形状：rect/circle coords坐标：（矩形4个值对角线点的坐标，圆形三个值 圆心坐标和半径）
    href资源路径： 页面资源和文件资源(能浏览浏览不能则下载)
<li>
	<img alt="1jpg" src="../img/b/1.jpg" usemap="#map1">
	<map name="map1">
		<area shape="circle" coords="100,100,50" href="http://www.baidu.com">
	</map>
</li>

超链接a

  • 如果a标签内部没有href属性则就是纯文本
  • target="_blank" 在新窗口中显示页面
  • a标签包裹文本就是文本超链接 包裹图片就是图片超链接

相关推荐