认识HTML结构的基本标签

简介: 认识HTML结构的基本标签
  1. < !DOCTYPE >
    定义:定义⽂档类型。告诉浏览器渲染⻚⾯的规则。

DOC: document ⽂档。
TYPE:类型
说明:任何⼀个⽹⻚都必须在⻚⾯第⼀⾏声明⽂档类型。
⽤法:
h3⽆⽂档类型



H4的⽂档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

</html
H5的⽂档类型

<!DOCTYPE html>
HTML5语义化
语义:标签所含有的意义。
Html 4标签的语义化比不明显
HTML4中有语义的标签

一级标题

段落

  • 无序列表

  • 无序列表项目
    1. 有序列表

    斜切
    HTML4中没有语义的

    导航navigation

    主要内容区域

    次要内容区域

    页尾

    HTML对
    派生出了多个语义化标签

    页头

    导航

    一章一节

    主要内容

    次要内容

    页尾

    1. < html >
      定义:定义⼀个HTML⽂档。

    2. < head >
      定义:定义HTML⽂档的头部区域(次要的区域)。

    不是给⼈看的
    给⽤户代理看
    给搜索引擎看的

    1. < meta >
      定义:定义⻚⾯的元信息(描述⻚⾯信息的信息)。

    ⽤法:

    < meta >标签位于⽂档的头部。
    < meta >是⼀个单标签
    < meta >采⽤"名值对"形式定义⻚⾯元信息。
    语法


    常⻅的meta设置:
    字符集: 设置⻚⾯的字符编码为utf-8字符集


    ⻚⾯描述: 为搜索引擎设置的


    ⻚⾯关键词:为搜索引擎设置的


    视⼝:为移动设备设置的

    1. < title >
      定义:定义HTML⽂档标题。

    2. < link >
      定义:关联外部资源与当前⽹⻚⽂档。

    外部资源:可以css⽂件 也可以是图⽚
    收藏夹图标:favourite icon的缩写,表示收藏夹图标的意思。
    在线转换ico图标:百度搜索
    ⽤法:

    使⽤< link >关联外部的css⽂件


    使⽤ < link >管理收藏夹图标

    <link rel='shortcut icon' href='icon图⽚地址'

    1. < script >
      定义:
      ⽤法2: 通过< script >创建脚本区域。


    1. < body >
      定义:body元素定义⽂档的主体。

    主体:给⽤户看的内容全部放在body⾥⾯。
    ⽂档次要部分:< head >
    ⽤法:
    ⼀个HTML⽂档只能有⼀个body

    1. < header > h5
      定义: 标签定义⽂档的⻚眉。

    ⻚眉包括什么
    LOGO
    搜索框
    主导航
    登录区
    快捷⼊⼝(连接)

    1. < section > h5
      定义: 定义⽂档中的节。 具有通⽤性。

    11.main:主要
    定义:定义文档的主要区域

    12.aside:次要的
    定义:

    13section
    14.nva
    定义:导航

    15.box-sizing属性
    定义:用于定义盒模型的计算规则
    语法

    div{box-sizing:content-box |
    border-box}
    Content-box:内容盒模型,默认值
    Border-box:边框盒模型
    16.container{
    width:1140px;
    margin;

    解析

    盒模型规定了元素的结构。任何一个元素都是由四部分构成:内容、内边距、边框、外边距
    内容盒模型:Winth属性控制到内容区
    边框盒模型:winth属性控制到
    奇数偶数
    odd 奇数
    even 偶数

    1. < footer > h5
      定义:定义文档的页尾

    H5标签可以在项⽬中使⽤吗?

    开会商量⽅案
    确定你的观点:有⼀个⽹站可以帮助你决策:
    Can I Use :http://www.caniuse.com
    常⻅⻚⾯布局的种
    分屏式布局
    ⼯字形布局
    圣杯布局
    ⼝字型布局
    两栏布局
    三栏布局

    目录
    相关文章
    |
    24天前
    |
    数据采集 移动开发 前端开发
    HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
    【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
    29 0
    |
    16天前
    |
    数据采集 存储 JavaScript
    如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
    在现代网页开发中,复杂的HTML结构给爬虫技术带来挑战。传统的解析库难以应对,而Cheerio和jsdom在Node.js环境下提供了强大工具。本文探讨如何在复杂HTML结构中精确提取数据,结合代理IP、cookie、user-agent设置及多线程技术,提升数据采集的效率和准确性。通过具体示例代码,展示如何使用Cheerio和jsdom解析HTML,并进行数据归类和统计。这种方法适用于处理大量分类数据的爬虫任务,帮助开发者轻松实现高效的数据提取。
    如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
    |
    10天前
    |
    前端开发 Windows
    【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
    本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
    28 13
    |
    9天前
    |
    搜索推荐 SEO
    HTML中各种标题标签的正确使用方法及其特点
    在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
    |
    9天前
    |
    Web App开发 前端开发 JavaScript
    HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
    HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
    |
    22天前
    |
    移动开发 数据安全/隐私保护 UED
    HTML表单标签详解:如何用HTML标签打造互动网页?
    通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
    33 4
    |
    2天前
    |
    移动开发 HTML5
    这些年没来得及学习的一些 HTML5 标签
    【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
    HTML中font标签用法
    这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
    HTML中font标签用法
    |
    26天前
    |
    移动开发 前端开发 开发者
    从 HTML4 到 HTML5 的迁移标签
    【8月更文挑战第24天】
    29 0
    |
    26天前
    |
    移动开发 搜索推荐 索引
    HTML5 中 article 标签的含义与作用
    【8月更文挑战第24天】
    344 0