首页 > 其他分享 >关于HTML5的基础学习内容

关于HTML5的基础学习内容

时间：2024-06-12 23:33:30浏览次数：18  
标签：网页 标记 标签 学习 HTML 内容 HTML5 span 浏览器

HTML5的学习之web的介绍


我们重新开始学习了HTML,相当于是开始重新认识这门高级语言,作为一个真正快要步入设计或者程序员的门槛的学习者,现在开始认真的记录每天的学习成果!


关于HTML的第一步

一、认识HTML

  • Web开发

        Web开发是指创建和维护网站和应用程序的过程。它涉及使用各种编程语言、技术和工具来设计、构建和部署网站。Web开发涵盖了前端开发、后端开发和数据库管理等方面。那如今我们需要使用各种编程语言和技术创建、设计、来实现网页初始化和一些网页的美化设计。

        目前来说web开发早已成为各大公司首选的一种开发开源项目。

  • 了解网页

        网页是网站的基础和基本单位，也就是简单的web网页。网页主要是由文字，图片和链接组成，而且还有其他一些多媒体组成。

  • 网页的形成

        主要是通过编辑器对代码进行一系列的一些代码分析、用css对网页设计渲染、添加交互元素，之后在浏览器中真正的显示效果，来真正显示网页的形成结果。

二、浏览器

  • 主要的浏览器

        国际上常用的浏览器有：

  1. Edge浏览器
  2. 谷歌（Chrome）浏览器
  3. safari浏览器
  4. 火狐（Firfox)浏览器
  5. .Opera浏览器

  • 浏览器的组成部分

        这里主要是浏览器引擎（渲染引擎）和JS解释器来对网页进行一系列渲染和显示。

三、Web标准

  • Web 标准构成

        主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

Structure结构是推崇使用语义化的HTML标签来描述网页的内容结构，使网页的结构清晰明了，有助于搜索引擎优化和可访问性。
Presentation遵循web标准意味着使用层叠样式表来定义网页的外观和布局，确保网页在不同浏览器和设备上的一致表现。
Behavior主要是通过代码来进行对交互功能的编写和使用，来提高网页的性能和交互效果。

        结构主要是在HTML文件中进行编写代码，表现主要是使用CSS来进行渲染效果，最后行为是用JavaScript来进行交互功能编写。

四、主要的编写工具（VScode）

  • VSCode的基本使用

        Visual Studio Code (简称 VS Code / VSC) 是由微软开发的一款开源源代码编辑器，免费开源的现代化轻量级代码编辑器，支持插件扩展，通过使用插件扩展来更方便的使用。我们主要是用来编写网页的主要代码。

五、HTML简介

  • HTML名叫“超文本标记语言”（Hyper Text Markup Language ）。

  • 超文本标记语言，主要可以跟各种各样的多媒体进行链接使用，因此称为超文本，但它并非一种编程语言，而是一种标记语言，主要还是应用于文本（我是这样理解的）。
  • 下面就是HTML主要的结构标记了，创建文件后缀是.html的文件就是我们的超文本标记语言的文档了。
  1. 文档结构 
    <html></html>/*主要的根标记，也是最大的标记*/
<head></head>/*这是头标记，主要展示主要信息*/
<title></title>/*标题标记定义题目*/
<body></body>/*body标记主要的代码和渲染代码主要在这里*/
  2. 完整的文档结构 
    <!DOCTYPE html>/*主要声明文档格式*/
<html lang="en">
<head>
    <meta charset="UTF-8">/*主要的编码格式utf-8*/
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

        注意一代meta中的编码格式utf-8是所有国家都使用的编码格式，而且也避免使用其他编码展示网页时出现乱码。

        3.HTML属性

        用于为HTML元素（Element）提供附加信息或配置的键值对。属性位于HTML元素的开始标签中，并以键值对的形式呈现，其中键是属性的名称，值是属性的内容，根据不同的元素和需求，可以使用更多的属性来实现特定的功能和效果。

六、HTML常用标签

  • 了解和熟悉正确使用这些简单的标签来对网页进行一系列的渲染，和交互功能的启用，正确展示web网页的内容。

一、标题标签

 标题标签 head h

   注意：一个HTML中只能有一个且存在一个一级标记！

<h1>一级标题 ：只能有一个</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果展示 

  •  段落标记paragraph p

        形成一个文本块可以在其中添加内容，最终在网页中显示。

<p>这是一个段落标记</p>

  •  水平线 horizonal hr

        形成一条水平线来区分上下标记渲染的内容，是网页更加清晰。

<hr/>/*而且hr是单标记*/

  • 换行标记符 break br

        使用会使文档内容进行换行。

<br>/*换行标记也是一个单标记*/
  •  div标签 division

        div标记是一个块标记，主要是对一块的文档内容进行一系列的渲染和功能编写。而且

div标记独占一行！块级元素，包裹独立的块内容使用请使用div标记标签。<!--div包裹盒子,包裹任何标签-->。 <!--p元素不可以包裹div-->。

<div>div元素1</div>
<div>div元素2</div>
<div>div元素3</div>

  • span标签  span

        span 跨度 行内元素 包裹文本文字的都可以使用span。一定要注意与div的区别。

<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
<span>span元素4</span>
<span>span元素5</span>

二、文本格式化标签

  • 文本标签
b：blodstrong：Strong 加粗，粗体 strong具有语气强调！
i：italic em：Emphasized斜体强调语气！
u：underlineins：insert下划线。
s：strikethroughdel：delete删除线。
 <!--均是行内元素 b:blod strong:strong 加粗，粗体  strong具有语气强调！！！-->
    <b>加粗，粗体</b>
    <strong>加粗，粗体</strong>
    <!--i： em：斜体强调语气-->
    <i>斜体</i>
    <em>斜体强调</em>
    <!--删除线-->
    <s> 删除 </s>
    <del>删除线</del>
    <br>
    <!--u 下划线插入 ins-->
    <u>下划线插入</u>
    <ins>下划线插入</ins>

 

  •  img图像标签

        通过img标记标签可以使选中的图片，图像在网页中显示。注意事项也在代码中。

    <!--不和img文件夹同级文件夹-->
    <!--image图像-->
    <img src="img/1.jpg" alt="这是一张图片" width="500" height="600">
    <!--错误写法 直接路径不能在别的电脑中显示-->

src是图像与图片的路径
alt设置提示信息
width设置图片的宽度
height设置图片的高度
title设置图片的标题
  • 链接标签anchor

        主要是引用其他链接来跳转网页。这里有一个小彩蛋，可以通过在网页地址后输入/favicon.ico来获取某网页的标题图标、logo。而且超链接会直接添加下划线和颜色，而且不仅可以添加链接还能添加多媒体等。

    <!-- anchor(锚)  hypertext reference 超文本引用：target-blank（新页面）-self（默认本页面）-->
    <a href="http://www.baidu.com"> 百度一下</a>
    <a href="day0612-4.html" target="_blank">本地连接</a>
    <div>陪衬</div>
    <a href="#">logo<!--空连接是刷新页面的用法--><!--#出现在连接后表示是一个空连接且不刷新页面--></a>
    <!-- favicon.ico 获取页面小图标-->

  • icon图标 ico后缀的图像

        在head里添加link来对ico的图像进行添加。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

 例如这里我们使用wzry的ico小图标，呈现出的效果。

  • 特殊字符

        特殊字符有很多，但是我们现在能运用到的比较少，就列举几个常用的，还要注意两个空格的区别。

    <!--特殊符号-->
    &nbsp;
    <!--半角空格-->
    <p>&nbsp;
        <!--半角空格-->从历史上看，无论是CPI报告还是美联储政策决议，在公布的当日都常常会搅得市场动荡不安，但这两大事件其实很少在同一天发生。根据道琼斯市场的数据，自2008年以来长达16年的时间里，CPI报告和美联储政策决议在同一天出炉的情况，总共也只有13次。</p>
    &emsp;
    <!--全角空格(三个半角不等于一个全角)-->
    <p>&emsp;&emsp;从历史上看，无论是CPI报告还是美联储政策决议，在公布的当日都常常会搅得市场动荡不安，但这两大事件其实很少在同一天发生。根据道琼斯市场的数据，自2008年以来长达16年的时间里，CPI报告和美联储政策决议在同一天出炉的情况，总共也只有13次。</p>
    &lt; &gt;
    <!--大于小于符号-->
    &copy;
&nbsp半角空格
&emsp全角空格
&ltless-than 小于号
&gtgreater-than 大于号
&copy©️版权字符号

 七、标签的分类

  • 单标签 例如 <hr> 水平线 、< br> 换行
  • 双标签 例如 <p>段落</p>、<div>块级标记</div>、<span>行级标记</span>

 八、标记间具有的关系

  • 嵌套关系
<body>
    <ul>
        <li>
        <li>
    <ul>
</body>
  • 并列关系
<head></head>
<body>
    <div></div>
    <span></span>
</body>
/*这里注意head和body是并列关系，div和span是并列关系*/

        ok，我对今天HTML的学习总结就到这里了，之后还会有一些更细的学习内容。

标签：网页,标记,标签,学习,HTML,内容,HTML5,span,浏览器
From： https://blog.csdn.net/weixin_64991351/article/details/139636596

相关文章

  • 树莓派4B_OpenCv学习笔记6:OpenCv识别已知颜色_运用掩膜
    今日继续学习树莓派4B4G：（RaspberryPi，简称RPi或RasPi） 本人所用树莓派4B装载的系统与版本如下: 版本可用命令(lsb_release-a)查询: Opencv版本是4.5.1：学了这些OpenCv的理论性知识，不进行实践实在是太无聊了，今天就尝试使用OpenCv，已知颜色信息，来识别一张图片的颜色......
  • Spring学习笔记
    1spring介绍1)为什么学习spring​ 1.Spring技术是JavaEE开发必备技能，企业开发技术选型命中率>90%​2.简化开发，降低企业级开发的复杂性​ 3.框架整合，高效整合其他技术，提高企业级应用开发与运行效率​ 作为一个java程序员,spring必学.,是必经之路!2......
  • 报错：ResizeObserver loop limit exceeded的处理方法（学习自用）
    报错：ResizeObserverlooplimitexceeded处理方法:在main.js添加：//从elementui中引出TableimportElementUI,{Table}from'element-ui'//处理table宽度报错的问题constfixElTableErr=table=>{constoldResizeListener=table.methods.resizeListenertabl......
  • JavaScript获取表单数据转换时间格式（学习自用）
    JavaScript获取表单数据转换时间格式：getTime(date){letdateNow=newDate(date);functionconvert(data){//时间为个位数时，前面加个0，使观感更好returndata<10?"0"+data:data;}letyear......
  • C++基础入门学习记录
    本系列基于黑马程序员|c++课程，记录学习相关视频——黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibiliC++基础入门2.6字符串型作用：用于表示一串字符两种风格bool类型占==1个字节==大小示例：C风格字符串： char变量名[]="字符串值"示例：......
  • C++基础入门学习记录
    本系列基于黑马程序员|c++课程，记录学习相关视频——黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibiliC++基础入门3运算符**作用：**用于执行代码的运算本章我们主要讲解以下几类运算符：运算符类型作用算术运算符用于处理四则运算赋值运算符用于......
  • c++哈希表hash_table的深度学习(hash_map,un和hash_set的底层实现)
    什么是哈希表？哈希表（HashTable）是一种数据结构，它使用哈希函数将键（key）映射到桶（bucket）或槽（slot）中，可以直接通过相应的键值直接对数据进行访问，高效的插入，删除，查找 哈希表的组成部分和特性哈希函数：哈希函数接受一个键作为输入，并返回一个索引值（通常是一个整数），该索引值用于确定键......
  • 动手学深度学习课程竞赛：加州2020年房价预测
    课程地址：课程竞赛：加州2020年房价预测_哔哩哔哩_bilibili竞赛地址：CaliforniaHousePrices|Kaggle李沐老师官方答案：10行代码战胜90%数据科学家？_哔哩哔哩_bilibili Kaggle竞赛-2020年加州房价预测李沐老师2020年加州房价数据太大，按4.10节教材中的方法来训练，调参消耗巨大......
  • 机器学习算法：随机森林算法
    在机器学习中，随机森林是一个包含多个决策树的分类器，并且其输出的类别是由个别树输出的类别的众数而定。LeoBreiman和AdeleCutler发展出推论出随机森林的算法。而"RandomForests"是他们的商标。这个术语是1995年由贝尔实验室的TinKamHo所提出的随机决策森林（randomde......
  • 032指针学习—引用字符串
    目录1.字符串的引用方式（1）两种方法（2）举例（3）注意事项2.字符指针作函数参数（1）说明（2）举例（3）注意事项3.用字符指针变量和字符数组的比较1.字符串的引用方式（1）两种方法        用字符数组存放一个字符串，可以通过数组名和下标引用字符串中一个字符，也可以通过数组名和格......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99