认识HTML

最新推荐文章于 2024-05-14 23:39:54 发布
最新推荐文章于 2024-05-14 23:39:54 发布
阅读量140 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45635928/article/details/108719067
版权

学习目标

  • 理解
    • HTML的概念
    • HTML标签的分类
    • HTML标签的关系
    • HTML标签的语义化
  • 应用
    • HTML骨架格式
    • sublime基本使用

1. HTML 初识

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

pink老师 一句话说出html作用:

网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。

所谓超文本，有2层含义：

  1. 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **）
  2. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。
<img src="timg.jpg" />

门外汉眼中的效果页面

S

我们要做的html页面

SS

html 总结:

  • html 是超文本标记(标签)语言
  • 我们学习html 主要学习html标签
  • 我们用html标签描述网页元素。 比如 图片标签 、文字标签、链接标签等等
  • 标签有自己的语法规范，所有的html标签都是用 <> 表示的
  • H（很）T（甜）M（蜜）L（啦） 是很快乐的一件事情

1.1 HTML骨架标签

日常生活的书信，我们要遵循共同的约定。

![SSS](https://img-blog.csdnimg.cn/20200921210412647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYzNTkyOA==,size_16,color_FFFFFF,t_70#pic_center)

同理：HTML 有自己的语言语法骨架格式：（要遵循，要专业） 要求务必非常流畅的默写下来。。

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>
html骨架标签总结
标签名定义说明
HTML标签页面中最大的标签，我们成为 根标签
文档的头部注意在head标签中我们必须要设置的标签是title
文档的标题让页面拥有一个属于自己的网页标题
文档的主体元素包含文档的所有内容，页面内容 基本都是放到body里面的

**课堂练习1： **

书写我们的第一个HTML 页面。

  1. 新建一个 01-html骨架标签 的 TXT 文件。

  2. 里面写入刚才的HTML 骨架。

  3. 把后缀名改为 .HTML。

  4. 右击–谷歌浏览器打开。

    <html>   
    <head>     
        <title>我的第一个页面</title>
    </head>
    <body>
           你我之间 黑马洗练 月薪过万   一飞冲天   
    </body>
</html>

在这里插入图片描述

为了便于记忆，我们请出刚才要辞职回家养猪的二师兄来帮忙， 我称之为 猪八戒记忆法

在这里插入图片描述

团队约定大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

推荐：

<head>     
        <title>我的第一个页面</title>
 </head>

不推荐：

<HEAD>     
        <TITLE>我的第一个页面</TITLE>
</HEAD>

1.2 HTML元素标签分类

标签：

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <html>、<head>、<body>都是HTML骨架结构标签。

分类：

  1. 常规元素（双标签）
<标签名> 内容 </标签名>   比如 <body>  我是文字  </body>
  • 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。
  • 和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
  • 我们以后接触的基本都是双标签
  1. 空元素（单标签）
<标签名 />  比如  <br />
  • 空元素 用单标签来表示， 简单点说，就是里面不需要包含内容， 只有一个开始标签不需要关闭。
  • 这种单身狗标签非常少，一共没多少，我们多记忆就好

pink老师 一句话说出他们:

世界上单身狗毕竟是少数的， 大部分还是喜欢成双成对，不要拉下你的另外一半，对待一个双标签要有始有终。

1.3 HTML标签关系

主要针对于双标签 的相互关系分为两种： 请大家务必熟悉记住这种标签关系，因为后面我们标签嵌套特别多，很容易弄混他们的关系。

  1. 嵌套关系
<head>  
	<title> </title> 
</head>

在这里插入图片描述

2.并列关系

<head></head>
<body></body>

在这里插入图片描述

倡议：

如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

pink老师 一句话说出他们:

html双标签 可以分为 有 一种是 父子级 包含关系的标签 一种是 兄弟级 并列关系的标签

1.4 课堂一练

**请问下列哪组标签关系是错误的？ **

2. 代码开发工具（书写代码）

  • 为了提高我们的开发效率

  • 减少代码的出错我们不提倡用记事本开发，我们有更好的犀利哥。

在这里插入图片描述

  • Dreamweaver

  • SublimeText

  • WebStorm

  • HBuilder

  • VScode

sublime有非常多的优点， 最开心的就是非常轻量级，打开速度超快，后面更高的功能，后面再接触。

sublime生成html骨架小技巧

  • 双击打开软件
  • 新建文件（ctrl+n）
  • 保存（ctrl+s）,保存为：文件名.html （ 注意 后缀名必须是 .html )
  • 放大缩小代码 按住 ctrl 在 滚动鼠标滚轮 或者 ctrl+ 加号 键 和 ctrl + 减号键
  • 生成页面骨架结构
    • html: 5 按下tab键 或者
    • ! 按下tab键
  • 在浏览器中预览页面
    • 右键在 浏览器中打开

3. 文档类型<!DOCTYPE>

用法：

<!DOCTYPE html>

作用：

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

pink老师 一句话说出他们:

就是告诉浏览器按照HTML5 规范解析页面.

团队约定：

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明

4. 页面语言lang

<html lang="en">  指定html 语言种类

最常见的2个：

  1. en定义语言为英语
  2. zh-CN定义语言为中文

pink老师 一句话说出他们:

指定该html标签 内容 所用的语言为中文

团队约定：

考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

@拓展阅读：

简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。
比如可以

  • 根据根据lang属性来设定不同语言的css样式，或者字体
  • 告诉搜索引擎做精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别
    等等

5. 字符集

<meta charset="UTF-8" />

字符集(Character set)是多个字符的集合。

计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

  • gb2312 简单中文 包括6763个汉字 GUO BIAO
  • BIG5 繁体中文 港澳台等用
  • GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
  • UTF-8则基本包含全世界所有国家需要用到的字符
  • 这句代码非常关键， 是必须要写的代码，否则可能引起乱码的情况。

pink老师 一句话说出他们:

这句话是让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。

团队约定：

一般情况下统一使用 "UTF-8" 编码, 请尽量统一写成标准的 "UTF-8"，不要写成 "utf-8" 或 "utf8" 或 "UTF8"。

6. HTML标签的语义化

白话： 所谓标签语义化，就是指标签的含义。

pink老师 一句话说出语义化目的:

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

  1. 方便代码的阅读和维护
  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化

在这里插入图片描述

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 )

遵循的原则：先确定语义的HTML ，再选合适的CSS。所以，我们接下来学习html标签，要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签。

木 棉
关注
带你认识HTML5中的WebSocket
12-14
认识 HTML5 的 WebSocket 在 HTML5 规范中，我最喜欢的Web技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从...
02-认识HTML.md
11-24
- HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)是用来描述网页的一种语言。 - HTML 不是一种编程语言，而是一种标记语言 (markup language) - 标记语言是一套标记标签 (markup tag)
〖大前端 - 基础入门三大核心之 html 篇④〗- 初步认识html网页文件与HTML5骨架
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-01 2万+
在前导课中我们大致了解了”前端“行业和技术，也安装好了开发环境，了解了互联网的基本原理，可以说我们已经迈出了进入前端开发行业的第一步。但这还远远远远不够，从今天开始正式进入前端开发技术的学习，从认识HTML网页文件开始，一起加油吧！
01.认识HTML及常用标签
2301_80401457的博客
05-14 1942
标题1描述内容1111标题2描述内容2222无序列表ul {li {北京上海广州
重新认识HTML系列003——base标签详解
林中路
06-09 6273
HTML-base标签详解 文档查看 属性说明href文档中说此属性是“用于文档中相对URL地址的基础URL”，不好理解，我们来做几个实验。实验一base-href-1.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base-href实验1：不设置base标签</title>
重新认识HTML系列001——html根元素详解
林中路
06-09 5048
html根元素详解 文档查看 html作为HTML页面的根元素，根据文档，其原来有三个属性：manifest,version,xmlns ，由于新的版本更替，前两个已经不用了，我们来讲一下xmlnsxmlns它的作用是指派XML的命名空间。关于XML的命名空间，这里有详尽的教程：XML命名空间通过该教程，我们明确了以下几点： XML的命名空间解决了XML文件中标签命名冲突的问题 XML命名空间属
重新认识HTML中的p标签
gaohuanjie的专栏
11-18 3985
重新认识HTML中的p标签
html语言中标记h1代表什么,认识HTML中h1h2h3h4标签
weixin_39932939的博客
05-30 4492
H1 H2 H3 H4标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。一、搜索引擎下看h1标题标签针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用的1-2中H型标签中都含有一个相同关键字，搜索引擎也会格外注重你所注重关键字与内容，但切记无滥用。二、Html h1 h2 h3 h4用法HTML代码片段：最重要的标题H1次要栏目或标题-小标题H2再次要...
2 认识HTML标签（1）
蔷薇岛少年的博客
05-15 8847
2.1 语义化，让你的网页更好的被搜索引擎理解 这一章节我们要开始把网页中常用到的标签一 一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。 什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理），比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段
HTML初步认识
darkcode007的博客
12-16 2428
HTML初步认识本篇博客给大家带来html最基础的东西，也就是初步认识html，打算从以下几个方面给大家介绍： 认识什么是纯文本文件txt HTML是负责描述文档语义的语言 HTML骨架和基本语法 可能大家会认为这纯文本文件和html没啥关系吧，我要告诉大家的是，虽然这的确和html没多大关系，但对纯文本文件的理解有助于更加深刻的去理解html，好，接下来我将一一给大家介绍关于html初步认识的这三
HTML详解——初识html（一）
qq_46362763的博客
03-12 2853
HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。它是专门制作网页的计算机语言。提示：以下是本篇文章正文内容，下面案例可供参考。
认识HTML的盒子模型/＜div＞标签/通过css设置边框的样式与属性/css对边框的颜色设置与综合写法/学习笔记
No1banana的博客
01-24 3386
一、认识盒子模型 盒子模型：在网页中，承载内容的区域 网页中盒子模型拥有内边距、边框、外边距、宽和高 盒子模型用于划分区域和承载内容，使网页的元素清晰的排列 二、div标签 div标签是一个块容器标签（可以设置宽度和高度） div标签可以把网页分割为独立的部分，用来实现网页的规划和布局 大多数HTML标签都可以嵌套<div>标签中可以嵌套多层<div> 可以替代大多数块容器标签，如：<h3>或<p> 示例代码 <!doctype html&gt
认识HTML5网页结构.pdf
06-18
认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf
项目1-认识HTML5.pptx
06-08
项目1-认识HTML5.pptx
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
省市区数据，完成三级联动，选择地区
09-21
省市区数据，完成三级联动，选择地区
机械原理课程设计网球自动捡球机.doc
最新发布
09-21
机械原理课程设计网球自动捡球机.doc
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
09-21
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
借助于Ascend310 AI处理器完成深度学习算法部署任务，
09-21
应用背景为变电站电力巡检，基于YOLO v4算法模型对常见电力巡检目标进行检测，并充分利用Ascend310提供的DVPP等硬件支持能力来完成流媒体的传输、处理等任务，并对系统性能做出一定的优化。.zip深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值