HTML 基本标签的一些特性----1

最新推荐文章于 2023-12-04 12:55:17 发布

原创

最新推荐文章于 2023-12-04 12:55:17 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #块元素 #内行元素 #内容类别

本文介绍了网页设计的重要性，以及HTML的基础概念和主要标签的使用，包括标题、段落、强调、图像、超链接、列表和表格等。重点讲述了各标签的分类、内容类型、允许的嵌套内容以及在CSS中的特性。这些标签构成了网页的基本骨架，是网页设计的基石。

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

HTML 基本标签的一些特性----1

为什么要学习网页设计？
网页内容总概
html的概括
图片中的图案解释
参考来源

为什么要学习网页设计？

1、在JavaEE应用最初的阶段，在Java的程序中要生成网页的源码，把这份源码发送到客户端浏览器，由浏览器去解释执行，用户就可以使用网页。此时对程序员的网页设计能力有比较高的要求。
2、jsp技术出现之后，Java程序不需要生成网页的源码，只需要把数据+jsp页面，然后转发并向客户端发送（html与jsp关系）。此时程序员不需要设计独立的网页，只需要在jsp页面中使用一些标签或表达式，就像填空一样，把数据在填空的位置能够呈现出来。
3、ajax技术出现，页面就可以直接向服务器程序发送请求，服务器只需要把页面所需要的数据交给页面去处理，在页面中可以使用jsp中的DOM 技术把数据动态的在网页中呈现。
4、随着Restful的重新出现，服务器可以处理页面发出的restful风格的请求，另外，也随着分布式服务的出现，项目的规模越来越大，很多项目采用前后端分离的方式，此时就在开发岗位上出现了职位的明确的划分，分成前段工程师(设计前段页面的代码)，美工师(做页面的原型图)，Java工程师。

网页内容总概

html：用它提供的标记构造网页的骨架。
css：基于html的页面，进行排版及美化。
Javascript：可以让网页与用户交互，并实现一些前端的动态效果。
jQuery：
UI框架：bootstrap，ElementUI
VUE框架，
node.js
webpack
npm

html的概括

1、html称为超文本标记语言，它提供了一些标签供设计网页时使用，不同的标签对应不同的元素。
2、一份基础网页由文字及标签组成。
3、html的基本语法：< 标记属性=" " > < /标记 > 双标记
< 标记属性=" " /> 单标记
4、标记间的关系
（1）嵌套关系，一个标记内部有另外的标记。

<p>      <img src=" ">      </p>

（2）并列关系，两个标记不存在包含关系，就是并列关系。
（3）如果页面上的标记不属于以上两种之一，肯定有问题。

5、写标记时的基本要求
1、标记不区分大小写。
2、在html的网页中，标记不具有严格的语法要求，还是要求语法要正确。
6、html的版本
现代网页都基于html5的版本来设计。它与老版本的区别有几个方面
第一、文档的声明部分得到简化 <!DOCTYPE html>，老的版本比较复杂。
第二、h5新增了一些排版要素，<foot></foot>，<nav>，<article>
第三、新增了canvas画布，可以实现复杂的动态变化的图形和图像效果。
第四、在多媒体播放方面，统一了标准，播放效果好很多。
第五、新增了很多具有不同功能的表单控件，来丰富页面的交互效果。

#95eb00
#f66754
#26A7FF
#FF5126

标题标签 `< h1>–< h6>`

标签描述：
在这里插入图片描述

标签分类（一些特性针对CSS）：块级元素
内容分类：流式内容（Flow content），标题内容（Heading content），显性内容（palpable content)
允许被嵌套的内容：短语内容（Phrasing content）
允许的父元素：任何接受流式内容（Flow content）的元素；不要把它作为 <hgroup> 元素的子元素, 这种做法已经被废弃了。
标签属性：
在这里插入图片描述
使用要点：

代码示例：

    <h1 align="center">这是标题</h1> 
    <h2 align="left">这是标题</h2>
    <h3 align="right">这是标题</h3> 
    <h4>这是标题</h4> 
    <h5>这是标题</h5> 
    <h6>这是标题</h6>

效果示例：
在这里插入图片描述
可以看到align仍然有效，只是不建议使用，并且默认值为left

段落标签`< p>`

标签描述：
在这里插入图片描述

标签分类（一些特性针对CSS）：块级元素
内容分类：流式内容（Flow content）,显性内容（palpable content)
允许被嵌套的内容：短语内容（Phrasing content）
允许的父元素：接受流式内容（Flow content）的元素。
标签属性：
在这里插入图片描述
注意：

代码示例：

        <p align="left">不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要</p>
        <p align="center">不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要</p>
        <p align="right">不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要不好不好不要</p>

效果示例：
在这里插入图片描述
可以看到align仍然有效，只是不建议使用，并且默认值为left。

划线标签 `< hr>`

标签描述：
在这里插入图片描述

标签分类（一些特性针对CSS）：块级元素
内容分类：流式内容（Flow content）
允许被嵌套的内容：无，是一个空元素（ empty element.）
允许的父元素：接受流式内容（Flow content）的元素。
标签属性：
在这里插入图片描述

代码示例：

    <hr size="5" color="red" width="400dp" align="right">
    <hr size="5" color="red" width="400dp">
    <hr size="5" color="red" width="400dp" align