day01 HTML基础

已于 2024-07-13 15:36:42 修改
阅读量928 收藏 7
点赞数 13
分类专栏： HTML 文章标签： html 前端
于 2024-06-10 15:37:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liang_z_/article/details/139577487
版权

目录

WEB标准

介绍：

HTML

介绍：

标记

注释

HTML原理

HTML文档

html元素

head元素

body元素

HTML常用标签

标题

段落

列表

有序列表

无序列表

表格

行分组

行内元素

图形

相对路径

超链接

锚点

元素显示方式

表单控件

文本域

下拉框

实体符号对照表

音频

Q&A

WEB标准
介绍：

  • WEB标准是指网页设计和开发的一系列标准，它们被设计用来确保网页在各种浏览器和操作系统上显示出正确的样式和功能。

WEB标准说明
结构（Structure）网页的基本框架，它是网页的基本组成部分，主要包括HTML、XML等标签语言
表现（Presentation）网页的外观，它是网页的美观度和可读性的重要体现,CSS
行为（Behavior）网页的交互行为，它是网页的功能实现和用户体验的重要体现。行为规范是指网页的交互行为，包括JavaScript、Ajax等脚本语言
HTML
介绍：

  • HTML—HyperText Markup Language:超文本标记语言，纯文本类型的语言

  • 用来设计网页的标记语言

  • 用该语言编写的文件，以.html或者.htm为后缀

  • 浏览器解释执行

  • HTML页面上，可以嵌套用脚本语言编写的程序段，如：JavaScript

  • 可以理解为标签固定的XML

标记

  • HTML标记通常也被称为HTML标签（HTML tag）

  • HTML标签是由尖括号包围的关键词，比如<html>

  • HTML标签通常是成对出现的，比如<P>和</P>

  • 标签对中的第一个标签是开始标签，第二个标签是结束标签

注释

  • 格式：<!--注释的内容-->

  • 注释不可以嵌套

HTML原理

  • HTML是部署在服务器上的文本文件

  • 根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML

  • 浏览器解释执行HTML，从而显示出内容

  • HTML部署在服务器上，运行在浏览器上

HTML文档

基本格式

<!DOCTYPE html>声明版本，使浏览器可以正确显示HTML网页，不是标签
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
  <body>
  </body>
</html>

HTML版本

版本年份
HTML1991
HTML +1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
HTML 1.02000
HTML52012
XHTM52013

常用声明：

HTML 4.01
<!DOCTYPEHTML PUBUC"-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0
<!DOCTYPEhtmlPUBUC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML5
<!DOCTYPE html>
html元素

  • 表示当前页面书写的范围要在<html></html>之间

head元素

  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

body元素

  • 所有页面的布局写在body中

HTML常用标签
标签名说明
<h1></h1>标题标签 h1-h6 一般用于文章的标题
<p></p>段落 用于正文显示
<ol></ol>有序列表
<ul></ul>无序列表
<table></table>表格
<span></span>没有特定的含义,不换行显示
<i></i>字体斜体
<em></em>字体斜体
<b></b>加粗字体
<strong></strong>加粗字体
<del></del>带删除线的字体
<u></u>带下划线的字体
<br/>换行符号 一般是单标签
<img>图形 可以引用图片
<a></a>超链接 可以引用网址
标题

  • <h1~h6>，数字越大字体越小

段落
  • ​

    段落标签,一般用于正文中 会自动换行

    ​
列表
  • 有序列表

    < ol>每个元素有顺序标识 使用< li>表示每一项

  • 无序列表

    < ul> 不出现顺序数字

表格
属性名说明
border表格边框
width表格宽度
height表格高度
align表格位置 默认left center水平居中 right靠右显示
colspan跨列
rowspan跨行

style="border-collapse: collapse;内外边框合并

行分组

  • <thead>表头thead 字体醒目

行内元素
<!-- 行内元素:不会换行 -->
<span>携杖来追柳外凉</span>
<span>画桥南畔椅胡床</span>
<p>月明船笛参差起</p>
<span>风定池莲自在香</span>
<i>斜体</i>
<em>斜体</em>
<b>加粗</b>
<strong>加粗</strong>
<del>删除线</del><br><br/>
<u>下划线</u>
图形

<img>

属性名说明
src图片的路径 一般使用相对路径
width图片宽度
height图片高度
相对路径

  • ../表示上一层目录

  • ./表示当前目录

超链接
属性名说明
href网址 http://
target打开的方式 _blank重新打开一个页面
<a href="http://www.baidu.com" target="_blank">百度一下</a>
锚点

  • 定位网页的位置

<a name="top"></a>
<a href="#top">回到顶部</a>
元素显示方式

  • 块级元素特点:独占一行,有宽高的属性，元素前后会自动换行<div><p><hr>

  • 行内元素特点:不换行,没有宽高的属性<span><a>

  • 行内块:有宽高属性且不换行

表单控件
标签名说明
<input type="text">文本框 可以输入内容
<input type="password">密码框 内容不可见
<input type="button">按钮 可点击
<input type="radio">单选框
<input type="checkbox">多选框
<input type="hidden">隐藏域 用于保存数据
<input type="file">文件框 可以选取文件
<textarea></textarea>文本域 大的文本框

常用属性

属性名说明
type表单控件的类型 text password button...
placeholder输入框提示
maxlength最大输入字符数
value文本框的值
readonly只读 不可输入
文本域

<textarea>

属性名说明
cols列数
rows行数
下拉框
标签名说明
<select></select>根据选项选择
<option></option>选项
实体符号对照表

音频
属性名说明
src音频路径
controls显示控制面板
autoplay值为true时自动播放
loop循环播放

Q&A

题1 什么是HTML

  • HTML—HyperText Markup Language:超文本标记语言，纯文本类型的语言

  • 用来设计网页的标记语言

  • 用该语言编写的文件，以.html或者.htm为后缀

  • 浏览器解释执行

  • HTML页面上，可以嵌套用脚本语言编写的程序段，如：JavaScript

  • 可以理解为标签固定的XML

题2 HTML中,<head>和<body>标签各写哪些代码

  1. <head> 标签：

    • <title>：定义文档的标题，显示在浏览器的标题栏或标签页上。

    • <meta>：提供有关文档的元数据，如字符编码、关键词等。

    • <link>：引入外部资源，如样式表、图标等。

    • <script>：引入 JavaScript 代码，通常用于文档的行为和交互。

    • <style>：定义内部样式表，用于为文档指定样式。

  2. <body> 标签：

    • 文档的实际内容，如段落、标题、图像、表格等。

    • JavaScript 代码：如果脚本不需要在文档加载时立即执行，通常会放在 <body> 的末尾，以提高页面加载速度并避免阻塞。

题3 解释下列标签名含义

标签名解释
<h1>一级标题
<p></p>段落 用于正文显示
<ol></ol>有序列表
<ul></ul>无序列表
<table></table>表格

题4 块级元素和行内元素及行内块的特点

  • 块级元素特点:独占一行,有宽高的属性，元素前后会自动换行<div><p><hr>

  • 行内元素特点:不换行,没有宽高的属性<span><a>

  • 行内块:有宽高属性且不换行

题5 解释下列标签名含义

标签名说明
<input type="text">文本框 可以输入内容
<input type="password">密码框 内容不可见
<input type="button">按钮 可点击
<input type="radio">单选框
<input type="checkbox">多选框
爱看星星的猪_
关注
  • 13
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识汇总
qq_43544490的博客
08-03 3361
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
day01html基础1总结.xmind
07-18
day01html基础1总结.xmind
Day01_HTML
weixin_53073551的博客
01-05 2848
Day01_HTML 1, 概述 // javase (): 记忆 // 前端: javaweb, javaee : 缓冲 // 数据库 // spring 以及衍生框架 // 分布式相关 // 前端学习的目的: // 1, 至少知道前端是怎么回事? // 2, 通过前端理解前后端以及服务器的概念 // 3, 能稍微'抄'几个前端页面 // 前端的学习方式, 要求 // 1, 记单个知识点,难, 因为太多了 // 2, 前端不难, 很难接受 // 3
day01：HTML 基础
m0_73644785的博客
03-24 1530
最近在学习html#目的主要是提升自身能力，希望也给大家带来帮助嘿嘿！
# Day01-Java基础
Java厂长
07-25 7959
Day01-Java 1、Java主要特点 简单性、跨平台性、分布性、安全性、健壮性、平台独立与可移植性、多线程、动态性、面向对象的编程语言、支持垃圾自动收集处理等，可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用等多个系统中。 2、计算机的高级汇编语言类型： 编译型——c语言 解释型——html 编译型和解释型的结合——java java运行原理源程序进行编译形成字节码文件在一台电脑进行解释程序 java最核心的部分就是虚拟机JVM 3、JVM（Java Visual Machine)
HTML-Day01-1
xinqing007的博客
01-07 2430
HTML定义： HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页，尽管可以不关闭标签，但建议关闭写法，大小写不敏感，但建议小写。Web 浏览器的作用是读
【Python】day01 基础知识
xingyunzizai的博客
03-24 4869
python项目的课上笔记。 零基础。
前端学习笔记DAY01
weixin_51676635的博客
02-14 2672
前端学习日记（记录从不会玩电脑小白到大神的过程）： （目标：2021年2月14日开始学习HTML，一个月拿下HTML基础。初心：记录个人学习成长，欢迎大神指点。） 一、基本语法记录： 1、基本标签 1、标题标签- 解释：共6个等级 ；作为标题使用，重要性依次递减。 特点：1、加了标题文字会变粗，字号变大 2、一个标题独占一行 。 记忆：单词head的缩写，意思为头部、标题。 用法：一级标题 2、段落标签 解释：网页中文字分段显示，在HTML中用于定义段落，可把网页分为若干段落。 记忆：program的
HTML零基础入门教程完整版
热门推荐
哈哈
09-11 2万+
HTML零基础入门教程完整版
前端学习--Day01
Cure The World的博客
08-22 4305
Web前端基础知识 HBuilder中Chrome无法运行问题 一、Web基本概念 Web：网页、公众号、动画 H5：html5 URL：网络资源的地址 服务器：一个性能比较高（内存大、运行速度快）的电脑，安装了提供服务的软件（Apache，tomcat，ISS，Nginx） 云服务器：阿里云、腾讯云、百度云、华为云 有专门的团队提供维护工作 浏览器：能帮我们打开网页，Google Chrome、IE、火狐 二、标记语言 用各种标签将相关的信息或者关键字包裹起来，方便搜索引擎的抓
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7080
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
day01-HTML附件
07-23
1. **HTML基础**: HTML由一系列元素组成，这些元素以开始标签和结束标签的形式出现，如`<p>`和`</p>`，用于创建段落。每个元素都有其特定的含义，例如`<h1>`到`<h6>`用于定义不同级别的标题，`<img>`用于插入图片，`...
day01基础WEB
10-18
【标题】：“day01基础WEB” 在计算机科学领域，Web开发是构建和维护Web应用程序的过程，它使得用户可以通过互联网进行交互。"day01基础WEB"可能是一个学习系列的第一部分，专注于介绍Web开发的基本概念和技术。这...
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
HTML678day_htmlCSS_前端基础_
10-01
从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别针对前端开发的基础技能提升。 在前端开发中，HTML（HyperText Markup Language）是构建网页结构的...
剖析HTML 元素——WEB开发系列02
一条晒干的咸鱼的博客
08-07 866
HTML元素是构成HTML文档结构的基本单位，定义了页面上的不同部分和内容。HTML元素可以包含不同类型的内容，如文本、图片、链接、表格等，每种元素都有其特定的用途和语义。通过组合和嵌套不同的HTML元素，可以创建复杂的网页结构和布局。一、HTML 元素语法HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容...
HTML学习笔记——用HTML记录学习过程4——非主体结构元素
qq_47968354的博客
08-07 182
非主体结构元素主要是为了表达逻辑结构或者附加信息的元素。
探索Python的文本转换魔法：html2text库的奥秘
最新发布
AIGC搞起
08-07 741
以下是html2text库中一些基本函数的使用示例，每个示例都附有代码和逐行说明。基本转换这段代码将一个简单的HTML文档转换为文本。忽略链接设置可以忽略HTML中的链接。自定义样式使用baseurl参数可以为相对URL添加基础URL。使用Unicode字符设置会使用Unicode字符代替某些HTML实体。处理表格参数可以设置表格的宽度。html2text是一个功能强大且易于使用的Python库，它能够帮助开发者在多种场景下将HTML内容转换为文本。
Html实现全国省市区三级联动
qq_36973384的博客
08-02 557
关键技术：SpringBoot、Html、Jquery、js、ajax在网上找到的资料都比较乱，对于初学者来说，可能不太友好。以前，我刚开始学习Html的时候，也搞不清楚这个要怎么做，找了好久的资料都没法实现，就算是实现了，也没有完整的教程，现在实现了，整理好了，就想分享一下给每一位热爱编程的小伙伴。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值