HTML标签&认识浏览器

最新推荐文章于 2024-05-24 23:45:01 发布
最新推荐文章于 2024-05-24 23:45:01 发布
阅读量300 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengweiwei_/article/details/124000302
版权

纲要：HTML5中标签的使用&浏览器的认识

小主想先看哪里呢？

o(●’◡’●)o小朋友你是否有很多问号？

经过一周的接触，我们已经对前端有了初步认识，而具体要如何完成一个自己想要的网页呢？首先就是标签，其次就是要了解浏览器是如果工作以及浏览器是如何解析我们的html文本的呢？？

一、什么是标签

1.标签的结构

在这里插入图片描述

2.标签的分类

在这里插入图片描述

3.html骨架

在这里插入图片描述

二、都有哪些常用的标签呢？

1.排版标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <p>我是段落标签我是段落标签看我换行<br>我是段落标签我是段落标签看我换行</p>
</body>
</html>

我是一级标题

我是二级标题

我是三级标题

我是四级标题
我是五级标题

我是段落标签我是段落标签看我换行
我是段落标签我是段落标签看我换行

换行
hr显示水平线 就像这样


2.文本格式化标签

在这里插入图片描述

列表
ul标签里面只能放li

<ul>
        <li>我是无序列表</li>
    </ul>
    <ol>
        <li>我是有序列表</li>
    </ol>
  • 我是无序列表
  1. 我是有序列表

表格
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>真棒</td>
        </tr>
    </table>
学生成绩单
姓名成绩评语
张三100真棒

在这里插入图片描述

表单
input
在这里插入图片描述

button按钮
在这里插入图片描述

select下拉菜单

<select>
        <option>解封</option>
        <option>见面</option>
        <option>回家</option>
    </select>

textarea–文本域标签
placeholder–占位符 提示用户要输入的内容

3.语义化标签

无语义化标签
div
一行只能有一个（独占一行）
span
一行可以有多个

有语义的标签
在这里插入图片描述

4.媒体标签

图片

<img src="wozaixiangni.jpg" alt="iloveyoubaby">

alt表示替换文本

音频
在这里插入图片描述
视频
在这里插入图片描述

5.链接标签

超链接

<a href="https://www.jiefeng.com/">解封</a>

点击解封去到https://www.jiefeng.com/

在这里插入图片描述

三.浏览器

1.认识浏览器

在这里插入图片描述

2.渲染引擎

在这里插入图片描述

在这里插入图片描述

3.web标准

在这里插入图片描述
图片

ovo这里引用一位大佬的博客ovo

那么浏览器是如何解析我们的代码并生成网页的呢

总结

通过这一周的预习，我们学会了如何利用标签呈现我们想展示给受众的界面，如果通过代码实现元素的表达，也学会了浏览器是如何解析我们的代码的，总的来说，在学习前端的道路上越走越远啦！


下周再见~

mengweiwei_
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML标签语义化的介绍
12-11
前几年在网站开发上DIV+CSS很是流行，当时掀起一片狂狼啊。可是在后来对于前端开发来说纯DIV+CSS已经被程序员们所丢弃，随着&ldquo;标签语义化&rdquo;这个词就出来了。 那么这个词是什么意思呢？下面摘自百度百科： html标签语义：即html标签的含义。 首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。,用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。 那么我
语义化你的HTML标签和属性
01-08
语义化你的HTML标签和属性 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用 来代替 标记标题。 首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。,用来区别于其他文字，起到了强调的作用
HTML5 Video标签的属性、方法和事件汇总介绍
11-21
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。 &lt;video&gt;标签的属性 复制代码代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码 复制代码代码如下: &lt;video id=&rdquo;media&rdquo; src=&rdquo;https://www.jb51.net/test.mp4&Prime;
详解HTML5新增标签
12-13
HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。 HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似和 标签，但有一定含义，例如 （网站导航块）和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用
前端开发每天必学之认识HTML标签（1）
12-13
2.1 语义化，让你的网页更好的被搜索引擎理解 这一章节我们要开始把网页中常用到的标签一 一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。 什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理），比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。 2.2 body标签，网页显示内容放在这里 在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个
HTML常见标签、认识浏览器
weixin_62859027的博客
04-07 1268
今天开始，我们才算真正的走进web开发前端，开始系统的学习几种语言。我们先从最基本的HTML语言开始学习 第一部分 认识html 一.语言概述 html语言是用来描述网页结构的一种标准语言。“超文本”就是通过超链接的形式，将文本有机的组织在一起；“标记”是指应用一些预先定义好的标签来描述网页的标题、段落、图片、超链接等内容，每种标签都具有特定的韩毅 ...
HTML常用标签、认识浏览器
m0_65025332的博客
04-07 393
一、HTML常用标签 1.基本标签 &lt;html&gt;...&lt;/html&gt; 定义HTML文档 &lt;head&gt;...&lt;/head&gt; 文档的信息 &lt;title&gt;...&lt;/title&gt; 文档的标题 &lt;style&gt;...&lt;/style&gt; 文档的样式信息 &lt;body&gt;...&lt;/body&gt; 可见的页面内容 &lt;link&gt; 文档与外部资源的关系 2.文本 &lt;h1&gt;...&
HTML标签、认识浏览器
m0_67736469的博客
04-09 589
文章目录前言一、html标签是什么？二、html基本特点三、html标签种类1.标题标签2.段落标签和换行标签3.文本格式化标签4.&lt; div &gt;和&lt; span &gt;标签5.图像标签和路径6.超链接标签链接分类（1）外部链接（2）内部链接（3）空链接（4）下载链接（5）网页元素链接（6）锚点链接7.列表标签有序列表无序列表四、认识浏览器常用浏览器浏览器内核排版引擎技术分支总结学习心得认识不足 前言 本周主要学习了html常用标签，并且认识了浏览器 一、html标签是什么？ html
HTML常用标签，认识浏览器
m0_61810513的博客
04-03 1198
HTML常用标签 2.1标题标签&lt;h1&gt;~&lt;h6&gt; 注：1.从1到6，依次减小 2.文字会加粗 3.占一行 2.2段落标签&lt;p&gt; &lt;/p&gt; 注：1.文本的一个段落中会根据浏览器大小自动换行 2.段落与段落之间保有空隙 2.3段内换行&lt;br/&gt; 2.4水平线&lt;hr/&gt; 2.5文本格式化标签 ~加粗：&lt;strong&gt; &lt;/strong&gt...
html常用标签、认识浏览器
m0_62558365的博客
04-05 1129
html常用标签、认识浏览器html常用标签一、常用标签二、列表标签（1）无序列表：（2）有序列表：三、表格标签四、表单标签（1）input控件（2）select控件（3）text area控件认识浏览器浏览器的结构组成 html常用标签 一、常用标签 1.标题： &lt;h1…h6&gt;&lt;/h1…h6&gt; 2.段落： &lt; p &gt;&lt; /p &gt; 3.段内换行：&lt; br / &gt; 4.段内分组：&lt; span &gt; 5.水平线： &lt; hr/ &gt;
认识浏览器及HTML常用标签
烬欢yu的博客
01-15 559
超文本标记语言（HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。 下面记录一下HTML中的常用标签及语法规范。 HTML5标签常用标签标题标签段落标签换行标签文本格式化标签&lt; div&gt; &lt; span&gt; 标签图像标签超链接标签 常用标签 HTML中的标签通常由尖括号包围的关键词，且通常是成对出现的，比如 &lt; div&gt; 和 &lt; / div&gt;，当然也有单独出
html&css&浏览器相关面试题大全
weixin_59763367的博客
03-28 1537
html css 浏览器面试题
WEB标准&认识HTML&HTML常用标签
Driedmango的博客
04-03 901
typora-copy-images-to: media 第01阶段.web基础：html-day01笔记-01-前言&amp;WEB标准&amp;认识HTML&amp;HTML常用标签 一、前言 1. 基础班学习目标 目标： 能根据psd文件（psd文件，其实就是一张类似于图片的格式，这个呢是用ps做的，也就叫做源文件）， 用HTML+CSS 布局出符合W3C规范的网页（也就是说，我们...
第二次预习---HTML常用标签、认识浏览器
m0_62021245的博客
04-08 405
蓝旭工作室第二周预习内容---HTML常用标签、认识浏览器
第二次博客——HTML常用标签、认识浏览器
m0_63616040的博客
04-08 346
HTML标签 超文本标记语言标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML最重要的组成部分。 基本 &lt;html&gt;…&lt;/html&gt; 定义 HTML 文档 &lt;head&gt;…&lt;/head&gt; 文档的信息 &lt;meta&gt; HTML 文档的元信息 &lt;title&gt;…&lt;/title&gt; 文档的标题 &lt;link&gt; 文档与外部资源的关系 &lt;style&gt;…&lt;/st..
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 570
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 1098
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 1153
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 554
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
html文档显示在浏览器中内容的标签
06-09
HTML文档中显示在浏览器中的内容标签有很多，常见的包括但不限于以下几种： 1. 标题标签：`&lt;h1&gt;`-`&lt;h6&gt;`，用于定义标题。 2. 段落标签：`&lt;p&gt;`，用于定义段落。 3. 列表标签：`&lt;ul&gt;`、`&lt;ol&gt;`、`&lt;li&gt;`，用于定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值