HTML常见语法设计

HTML常见语法设计

  • 1.HTML类和ID
  • [2.HTML 响应式 Web 设计](#2.HTML 响应式 Web 设计)
  • [3.HTML5 语义元素](#3.HTML5 语义元素)
  • [4.HTML 字符实体](#4.HTML 字符实体)
  • [5.HTML 编码(字符集)](#5.HTML 编码(字符集))

1.HTML类和ID

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。HTML类使用class属性定义

例如:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <style>
        .cities {
            background-color:black;
            color:white;
            margin:20px;
            padding:20px;
        }
    </style>
</head>

<body>

<div class="cities">
    <h2>London</h2>
    <p>
        London is the capital city of England.
        It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
</div>

</body>
</html>

id

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的

id 的语法是:写一个井号 (#),后跟一个 id 名称。然后,在花括号 {}中定义 CSS 属性

下面的例子中我们有一个 <h1> 元素,它指向 id 名称 "myHeader"。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <style>
        #myHeader {
            background-color: lightblue;
            color: black;
            padding: 40px;
            text-align: center;
        }
    </style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用


2.HTML 响应式 Web 设计

HTML 响应式 Web 设计(RWD)是一种用于创建网页的方法,使网页能够根据用户设备的屏幕大小、分辨率和方向进行自动调整,从而在不同设备(如手机、平板、台式机)上都能有良好的显示效果和用户体验。

RWD的核心概念:

  • 弹性布局:通过相对单位(如百分比 %)而不是绝对单位(如 px)定义网页元素的宽度和高度,使得元素能根据屏幕的宽度比例进行缩放和调整
  • 弹性图像:使用CSS将图像设定为相对宽度(如 max-width: 100%),确保图像在不同设备上不会超出其容器的范围,随容器大小自动缩放
  • 媒体查询:使用CSS中的@media规则,根据设备的特定特征(如屏幕宽度、高度、分辨率等)应用不同的样式。这样,可以为不同设备设置特定的布局和设计

例子:

html 复制代码
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        /* 针对大屏幕设备 */
        @media (min-width: 768px) {
            .container {
                width: 70%;
                margin: 0 auto;
            }
        }
        /* 针对小屏幕设备 */
        @media (max-width: 768px) {
            .container {
                background-color: lightgrey;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>响应式设计示例</h1>
    <p>这段文字会根据设备屏幕的大小自动调整布局。</p>
</div>
</body>

另一个创建响应式设计的方法,是使用现成的 CSS 框架比如Bootstrap


3.HTML5 语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码。HTML5 提供了定义页面不同部分的新语义元素

++1、HTML5 <section>++

HTML5 中的 <font style="color:#0e0e0e;"><section></font> 元素用于定义页面中的独立区块或章节,这些区块通常具有相似的内容主题。它可以包含标题、段落、图像或其他元素,帮助组织和结构化网页内容,使其更易于理解和语义化

当页面的内容可以划分为若干具有独立主题的部分时,适合使用 <font style="color:#0e0e0e;"><section></font> 元素。例如,新闻网站的每一篇新闻报道、博客文章中的每个章节、产品介绍页面的各个产品细节部分等,都可以放在 <font style="color:#0e0e0e;"><section></font>

例子:

html 复制代码
<body>
    <header>
        <h1>公司官网</h1>
    </header>

    <section>
        <h2>公司简介</h2>
        <p>我们是一家专注于创新技术的公司。</p>
    </section>

    <section>
        <h2>我们的产品</h2>
        <p>我们提供各种技术解决方案,帮助客户实现目标。</p>
    </section>

    <footer>
        <p>版权所有 © 2024 公司</p>
    </footer>
</body>

++2、HTML5 <article>++

HTML5 中的 <font style="color:#0e0e0e;"><article></font> 元素用于表示页面中的独立、自包含的内容部分。这些内容通常可以独立存在,并能够在不同的上下文中重复使用。例如,博客文章、新闻条目、论坛帖子、用户评论等,都是典型的 <font style="color:#0e0e0e;"><article></font> 元素的使用场景

例子:

html 复制代码
<article>
    <header>
        <h2>如何使用 HTML5</h2>
        <p>作者: 张三,发布时间: 2024年9月15日</p>
    </header>
    <p>HTML5 是最新的 HTML 标准,提供了许多新的功能和标签...</p>
    <footer>
        <p>分类: Web开发</p>
    </footer>
</article>

<section> 的区别:<section> 用于分组相关内容,而 <article> 用于表示独立的内容部分。换句话说,<section> 是为了区分页面中不同主题的内容,而 <article> 则表示可以单独引用的内容单元

++3、HTML5 <header>++

<header> 元素为文档或节规定页眉

例子:

html 复制代码
<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 

<footer> 元素为文档或节规定页脚

例子:

html 复制代码
<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer> 

++4、HTML5 <nav>++

<nav> 元素常用于定义大型的导航链接块

例如:

html 复制代码
<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>

4.HTML 字符实体

在 HTML 中,某些字符是预留的。例如在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体

下表是 HTML 中有用的字符实体:

显示结果 描述 实体名称 实体编号
空格 &nbsp;
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
分(cent) ¢ ¢
£ 镑(pound) £ £
¥ 元(yen) ¥ ¥
欧元(euro)
§ 小节 § §
© 版权(copyright) © ©
® 注册商标 ® ®
商标
× 乘号 × ×
÷ 除号 ÷ ÷

5.HTML 编码(字符集)

为了正确显示 HTML 页面,Web 浏览器必须知道要使用哪个字符集,这在 <meta> 标签中指定:

html 复制代码
<meta charset="UTF-8">

可以使用 CSS @charset规则来指定样式表中使用的字符编码:

css 复制代码
@charset "UTF-8";
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1119 小时前
css实现div被图片撑开
前端·css