首页 > 其他分享 >学习日记之html

学习日记之html

时间:2024-11-19 23:44:41浏览次数:3  
标签:网页 HTML 标签 学习 html 文档 浏览器 文本 日记

声明
学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负

HTML基础

1.html简介
HTML是用来描述网页的一种语言
HTML指的是超文本标记语言:HyperTextMarkup Language
HTML不是一种编程语言,而是一种标记语言
标记语言是一套标记标签
HTML使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容
HTML文档也叫web页面

一、HTML基本结构概述
HTML(超文本标记语言)网页有一个标准的结构,主要由以下几个关键部分组成:文档型声明、HTML根元素、头部(head)和主体(body)部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。

二、文档类型声明(DOCTYPE)
<!DOCTYPE html>: 这是HTML5的文档类型声明。它必须位于HTML文件的第一行,作用是告知浏览器文档所遵循的HTML版本,以便浏览器能够正确地渲染页面。对于HTML5来说,这个声明简洁明了,统一了HTML文档类型的标准,取代了以往复杂的DTD(文档类型定义)声明

三、HTML 根元素(<html>)
<html>:作为HTML文档的根标签,所有其他的HTML元素都被包含在它里面。它有开始标签<html>和结束标签</html>。这个标签界定了整个HTML文档的范围,浏览器会识别其中内容为有效的HTML代码。

四、头部部分(<head>)
<head>:此部分包含了关于网页的元数据,这些信息对浏览器的渲染和网页的展示特性有重要作用,但不会直接在网页的可见区域显示。</head>结尾
<title>:用于定义网页的标题,标题内容会显示在浏览器的标题栏或标签页上。例如:<title>精彩网页世界</title>。这是用户识别网页的重要标识,同时也对搜索引擎优化(SEO)有一定影响。
<meta>:用于提供多种类型的元数据。常见的有字符编码设置,如<meta charset="UTF-8">,它却表浏览器能够正确解析和显示网页中各种字符,支持多种语言的字符集,例外还可用于设置网页描述、关键词等信息,如<meta name="description" content="这是一个充满趣味的网页">用于向搜索引擎描述网页内容,<meta name="keywords" content="网页,趣味,示例">可设置关键词帮助搜索引擎索引网页。
<link>:主要用于链接外部资源,最常见的是连接CSS样式表。例如:<link rel="stylesheet" href="styles.css">,其中rel="stylesheet"表明这是一个样式表链接,href属性指定了CSS文件的路径。通过这种方式,可以实现网页内容和样式的分离,方便网页设计和维护
<script>: 可用于在HTML文档中嵌入JavaScript代码或引用外部的JavaScript文件。如果是嵌入代码,可以这样写:<script>alert('欢迎来到我的网页');</script>。若引用外部文件,则是<script src="script.js"></script>,这里src属性指定了JavaScript文件的路径。脚本可以为网页添加交互功能

五、主体部分(<body>)
<body>:包含了所有在网页中可见的内容,如文本、图像、超链接、表格、表单等各种网页元素。
文本元素:可以使用段落标签<p>来组织文本,如<p>这是一段普通的文本内容。</p >。标题标签<h1>-<h6>可用于创建不同级别的标题,<h1>表示最高级别的标题,重要性一次递减,例如<h1>主标题</h1><h2>副标题</h2>。
图像元素:使用<img>标签来插入图像,如< img src="image.jpg" alt="图像描述">,src属性指定图像的来源路径,alt属性在图像无法正常显示时提供替代文本,对于可访问性和SEO都很重要。
超链接元素:通过<a>标签创建超链接,如<a href=" ">点击这里</a >,href属性定义了链接的目标url,标签内的文本是用户看到的可点击的链接内容。
表格元素:使用<table>标签创建表格,<tr>表示表格行,<td>表示表格单元格,例如:
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
     <tr>
         <td>单元格3</td>
         <td>单元格4</td>
      </tr>   
</table>

表单元素:用于收集用户输入信息,例如<form>标签包含表单内容,<input>标签用于创建各种输入框,如<input type="text" placeholder="请输入用户名">用于创建一个文本输入框,type属性指定输入类型,placeholder属性显示提示文本.

代码示例
<!DOCTYPE html>
<html>
<head>
         <title>示例网页</title>
         <meta charset="UTF-8">
</head>
<body>
          <h1>欢迎来到示例网页</h1>
          <p>这是网页的主要内容部分,这里可以展示各种信息。</p >
          < img src="example.jpg" alt="示例图片">
           <a href=" ">访问示例网站</a >
</body>
</html>

示例涵盖里基本的HTML网页结构元素,可以在此基础上根据实际需求扩展和完善网页的功能和设计

标签:网页,HTML,标签,学习,html,文档,浏览器,文本,日记
From: https://blog.csdn.net/2301_79863409/article/details/143898496

相关文章

  • HTML学习笔记
    <!DOCTYPEhtml><!--documenttype文件类型--><!--<>单标签一般用于声明属性<></...>双标签决定范围--><htmllang="en"> <!--language=english--><head>  <metacharset="UTF-8">  <!--meta后设......
  • c语言初学者练习——指针进阶学习
    c语言初学者练习——结构体一、字符指针在指针的类型中有一种指针类型为字符指针:char*字符指针的一般使用方法:intmain(){ chara='w'; char*pc=&a; *pc='b'; printf("%c",a); return0;}另一种使用方法:把字符串首字符a的地址赋值给了p,但不安全VS......
  • 学习笔记493—简单解释超声波成像的工作原理【全网最详细讲解!】
    简单解释超声波成像的工作原理 我们将从以下几个方面进行讨论。请向下滚动,开始阅读。声音与超声波导论发送和接收超声波超声波与人体组织的相互作用扫描方式:A扫描扫描方式:B扫描频率、波长、分辨率和深度多普勒效应声音和超声波我们都很熟悉声音。它帮助......
  • 深度学习的实践层面
    深度学习的实践层面设计机器学习应用在训练神经网络时,超参数选择是一个高度迭代的过程。我们通常从一个初步的模型框架开始,进行编码、运行和测试,通过不断调整优化模型。数据集一般划分为三部分:训练集、验证集和测试集。常见的比例是60%用于训练,20%用于验证,20%用于测试。然而,......
  • 针对初学者的C和C++23的对比学习-4.循环结构的学习
    4.循环结构的学习学习目标:学习内容:了解for语句:for循环的执行流程了解while语句:while循环的执行流程了解dowhile语句:dowhile循环的执行流程了解break和continue的使用for,while和dowhile的对比练习学习目标:了解循环结构了解for语句了解while语句了解d......
  • 前端技术对css属性的学习
    css属性目录css属性文本字体背景文本属性说明CSScolor设置文本的颜色1direction规定文本的方向/书写方向2letter-spacing设置字符间距1line-height设置行高1text-align规定文本的水平对齐方式1text-decoration规定添加到文本的装饰效果......
  • 李沐大佬-动手学深度学习笔记-注意力机制
    注意力机制(显示考虑随意线索)随意线索:查询query每个输入是一个value和不随意线索key的对通过注意力池化层偏向性选择某些输入历史演变:非参注意力池化层:60年代提的Nadaraya-Watson核回归,类似于knn如果使用高斯核,fx函数类似于softmax和y(y是一个value)的乘积参数化注意力机制:......
  • 零基础逆向学习记录6
    逆向学习记录之汇编基础61.什么是堆栈平衡?<1>如果要返回父程序,则当我们在堆栈中进行堆栈的操作的操作的时候,一定要保证ret这条指令之前,esp指向的是我们压入栈中的地址,即返回call的下一行。<2>如果通过堆栈传递参数了。那么在函数执行完毕之后,要平衡参数导致的堆栈变化。......
  • Oracle 深入学习 Part 1: Oracle Architectural Components(Oracle 架构组件)
    Oracle服务器(OracleServer)OracleServer是一个管理系统,提供一种开放、全面、集成的信息管理方式。它包含了Oracle实例(OracleInstance)和Oracle数据库(OracleDatabase)。1.Oracle实例(OracleInstance)定义:Oracle实例是访问Oracle数据库的方式,始终打开一个且仅......
  • 圣诞老人html-css和js没发奥
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Jinglebellsrock!</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.......