前端笔记_HTML01

最新推荐文章于 2024-07-05 14:41:46 发布

dev_coding

最新推荐文章于 2024-07-05 14:41:46 发布

阅读量47

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/qq_41033768/article/details/124254934

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、HTML结构分析

文档声明
- 声明文档类型（HTML5）
- 放在文档前面，不能省略

html元素

<!DOCTYPE html>   //文档类型声明、不能省略
<html lang="en">  //语音合成工具、翻译工具
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
</body>
</html>

常用规则
- lang=“en” ：标识HTML文档的语言是英文
- lang=“zh-CN” ：表示HTML文档的语言是中文

head元素
- 规定文档相关的配置信息（也称之为元数据），包括文档的标题、图标、脚本信息
- 网页的标题：title元素
- 网页的编码：meta元素
  - 设置网页的字符编码，不设置或设置错误可能会使浏览器报错
body元素
- 常用元素
  - p元素、h元素
  - img元素、a元素、iframe元素
  - div元素、span元素

2、h1~h6、p元素

h元素通常和SEO优化有关系
p元素：分段、段落

3、img、a、ifame元素

img元素
- 可替换元素（replace element）
- src属性：数据源
  - 绝对路径
    - 从电脑的根目录开始一直找到资源
  - 相对路径
    - 相对于当前文件的一个路径
    - . 代表当前文件夹，可以省略
    - …代表上级文件夹
  - 路径分隔符 /
- alt属性：
  - 当图片加载失败的时候，显示文本
  - 屏幕阅读器使用
- img支持的图片格式
  - img\png\svg\gif\bmp等
a元素（anchor:锚）
- 定义超链接，用于打开新的url
- 常见属性
  - href(hypertext Reference)
    - 可以指定要打开的url地址
    - 也可以是一个本地地址
  - target
    - 默认：_self
    - 其他值：_blank \ _top \ _parent
- a元素锚点链接
  - 定义id
ifame元素
- x-frame-options: SAMEORIGIN：允许同源嵌套
- 属性
  - frameborder:边框默认0不显示，其它取值1显示
- a元素target的其他值
  - _parent：在父窗口中打开url
  - _top：在顶层窗口中打开url

4、div、span元素

div元素：division。分开、分配的意思
- 一般作为其它元素的父元素，把其他元素包住、代表一个整体
span元素：跨域、涵盖的意思
- 默认情况与普通文本没有区别
- 用于区分普通文本和特殊文本，进一步显示关键字

5、不常用元素

strong元素：内容加粗、强调
i元素：内容倾斜
code元素：用于显示代码、等宽字体
br元素：换行元素（开发中已经不使用）

6、HTML全局属性

常用全局属性
- id：定义唯一标识符
- class：一个以空格分隔的元素类名列表，允许css和js通过类选择器或dom方法来选择和访问特定元素
- style：给元素添加内联样式
- title：包含表示与其所属元素相关信息文本，这些信息通常可以作为提示呈现给用户，但不是必须的

dev_coding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记_HTML01

1、HTML结构分析文档声明声明文档类型（HTML5）放在文档前面，不能省略html元素<!DOCTYPE html> //文档类型声明、不能省略<html lang="en"> //语音合成工具、翻译工具<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
复制链接

扫一扫