认识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
    常⻅⻚⾯布局的种
    分屏式布局
    ⼯字形布局
    圣杯布局
    ⼝字型布局
    两栏布局
    三栏布局

    目录
    相关文章
    |
    2月前
    |
    移动开发 HTML5
    HTML5的基本结构
    HTML5的基本结构。
    37 5
    |
    2月前
    |
    移动开发 HTML5
    HTML5标签的类型
    HTML5标签的类型。
    63 5
    |
    28天前
    |
    移动开发 搜索推荐 UED
    HTML5的新语义化标签
    HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
    94 49
    |
    22天前
    |
    前端开发 测试技术 定位技术
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
    本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
    46 7
    |
    22天前
    |
    存储 移动开发 前端开发
    高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
    本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
    35 5
    |
    1月前
    |
    移动开发 编解码 UED
    除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
    【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
    |
    1月前
    |
    存储 移动开发 前端开发
    |
    2月前
    |
    前端开发
    【HTML】img标签和超链接标签
    【HTML】img标签和超链接标签
    49 2
    |
    2月前
    |
    移动开发 前端开发 JavaScript
    【HTML】HTML页面和常见标签
    【HTML】HTML页面和常见标签
    43 1
    |
    2月前
    |
    移动开发 HTML5
    一个最简单的 HTML 页面结构如下:
    HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
    76 0