Web前端（一）

最新推荐文章于 2022-10-23 15:15:16 发布

SileeLiu

最新推荐文章于 2022-10-23 15:15:16 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Web前端 HTML

本文链接：https://blog.youkuaiyun.com/qq_37875585/article/details/89403927

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML的基本概念，包括标签的使用、属性设置及文本、列表、分区等元素的应用。同时，深入探讨了图片、超链接、表格等核心标签的属性与功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

Hyper Text Markup Language（超文本标记语言）,超文本指不仅仅是纯文本还包括字体样式颜色大小，和多媒体相关(图片、音频、视频)
学习HTML主要学习的就是有哪些标签，标签有哪些属性，标签和标签之间的嵌套关系

body里面常用的标签

文本标签

h1-h6 文本标题 align=“left/right/center”
p 段落标签
hr 水平分割线
br 换行

列表标签

无序列表

<ul type="circle"> <!-- unordered 无序 list列表 -->
    <li>刘备</li><!-- list 列表 item项-->
    <li>貂蝉</li>
    <li>孙尚香</li>
</ul>

有序列表

<ol type="1" start="5" reversed="reversed"><!-- ordered有序 list列表 -->
    <li>打开冰箱门</li>
    <li>把大象装进去</li>
    <li>关上冰箱门</li>
</ol>

定义列表 dl dt dd

<dl><!-- definition定义 list 列表 -->
    <dt>凉菜</dt><!-- definition定义 term 标题 -->
    <dd>老醋花生</dd><!-- definition定义 description描述 -->
    <dd>花毛一体</dd>
    <dd>东北大拉皮</dd>
    <dt>炒菜</dt>
    <dd>宫保鸡丁</dd>
    <dd>木须肉</dd>
</dl>

列表嵌套：有序列表和无序列表可以任意无限嵌套

分区标签（元素）

作用：
可以对页面中的元素进行复用
可以对页面中的多个元素进行统一管理
div: 独占一行
span: 共占一行

一般页面开发都会把页面分为三大区：

<div>头部</div>
<div>体部</div>
<div>脚部</div>

h5标准中新增了几个分区元素

头部

正文

脚部
分区标签默认没有显示效果，可以理解成是装标签的容器。

标签（元素）分类

块级元素：独占一行包括：div，h1-h6，p ，hr
行内元素：共占一行包括：span， b和strong，i和em，del和s，u
行内元素的空格折叠现象，只能识别一个空格，如果需要多个空格则用取代空格

图片标签 img

常用属性：
src：图片的路径
1. 相对路径：访问站内资源时使用相对路径
  1. 和页面在同一目录：直接写图片名
  2. 在页面的上一级目录：…/图片名
  3. 在页面的下级目录：文件夹名/图片名
2. 绝对路径：访问站外资源时使用，绝对路径以http开头，称为图片盗链，可以节省自己网站资源，但是存在找不到图片的风险
alt: 当图片不能正常显示的时候显示的文本
title：当鼠标在图片上悬停时显示的文本
width、height：两种赋值方式：1. 像素 2. 上级元素的百分比
支持的图片格式： jpg（jpeg）、png、gif

图像地图map

map属性：name 用于表示地图唯一性的标识
map的子元素area标签
area的属性：shape形状（rect、circle）coords坐标（矩形4个值对角线点的坐标，圆形3个值圆心坐标和半径） href路径：可以指向页面资源，也可以指向文件资源，如果浏览器支持浏览此文件则直接浏览，如果不支持则下载
```
<img src="../imgs/h.jpg" width="1000" usemap="#mymap">
<map name="mymap">
    <area shape="circle" coords="280,330,30" 
    href="http://www.tmooc.cn"> 
    <area shape="circle" coords="365,395,33" 
    href="web01.zip"> 
</map>
```