HTML基础

已于 2023-03-26 09:41:21 修改
阅读量109 收藏 1
点赞数 1
分类专栏： html 文章标签： html 前端 html5
于 2023-03-24 09:49:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73180034/article/details/129705006
版权

HTML基础

*HTML基本结构标签

<HTML>
  <head>
    <title>   </title>
  </head>
  <body>
  </body>
</HTML>

网页开发工具

1. <!DOCTYPE>标签

文档声明标签（并不是HTML标签），告诉浏览器用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采用的是HTML5的版本来显示页面

2. lang语言种类

  • en定义语言为英语（英文网页），也可显示中文
  • zh-CN定义语言为中文（中文网页），也可显示英文

3. 字符集

<meta charset ="UTF-8"/>

采用UTF-8来保存文字，不写会乱码。

*HTML常用标签

标题标签

<h1>-<h6>

标签语义:作为标题使用，并且依据重要性递减。
特点：
1.加了标题的文字会变粗，字号也会依次变大。
2.一个标题独占一行

段落标签

<p>
标签语义:可以把HTML文档分割成若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口大小自动换行
2.段落和段落之间保有空隙。

换行标签

<br />
标签语义:强制换行。
特点：
1.单标签
2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

<div>和<span>标签

无语义，就是一个用来装内容的盒子
特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>(大盒子）
2.<span>标签用来布局，一行上可放多个<span>(小盒子）

图像标签和路径

1.图像标签
<img src="图像URL" />

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
在这里插入图片描述

2.路径

（1）目标文件夹和根目录
目录文件夹：普通文件夹，里面存放了做网页所需相关素材，比如HTML文件、图片
根目录：打开目录文件夹的第一层就是根目录
（2） 路径

  • 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。也就是图片相对于HTML页面的位置
    在这里插入图片描述
  • 绝对路径
    目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签

1.链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在这里插入图片描述
target 打开窗口的方式 ：
默认的值是：_self 当前窗口打开页面; _blank 新窗口打开页面

2.链接分类

1.外部标签

<a href="http://www.qq.com" target="_blank">腾讯</a>

在这里插入图片描述
效果图

2.内部标签：网站内部页面之间的相互链接
3.空链接：#
4.下载链接：如果href里地址是一个文件或压缩包，会下载这个文件
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。

  • 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
  • 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

注释标签

HTML中的注释以"<!--"开头，以"-->"结束
在这里插入图片描述

特殊字符

在这里插入图片描述
重点记住空格、大于号、小于号

*表格标签

1.表格的基本语法
<table>
   <tr>
     <td>单元格内的文字</td>
     ...
   </tr>
   ...
</table>
2.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
<th>标签表示HTML表格的表头部分

<table>
   <tr>
     <th>姓名</th>
     ...
   </tr>
   ...
</table>

举例说明：

<table border="1">
   <tr><th>姓名</th> <th>性别</th> <th>电话</th></tr>
     <tr><td>小王</td><td>女</td><td>110</td></tr>
       <tr><td>小明</td><td>男</td><td>120</td></tr>
</table>

在这里插入图片描述

效果图

表格属性（了解）

在这里插入图片描述

表格结构标签

<thead>标签 ：表格的头部标签,内部必须拥有<tr>标签，一般是位于第一行
<tbody>标签 ：表格的主体标签，主要用于放数据本体

合并单元格

方式：

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan =“合并单元格的个数”
    在这里插入图片描述
合并单元格三部曲：

1.先确定是跨行还是跨列合并
2.找到目标单元格，写上合并方式=合并的单元格数量。
3.删除多余的单元格

举例说明：

 <table width="500" height="249" border="1" cellspacing="0">
   <tr><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
 </table>

原表格：
在这里插入图片描述
合并行：

<table width="500" height="249" border="1" cellspacing="0">
   <tr><td rowspan="2"></td><td></td><td></td></tr>
   <tr><td></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
</table>

在这里插入图片描述
效果图
合并列：

 <table width="500" height="249" border="1" cellspacing="0">
   <tr><td colspan="2"></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td></tr>
 </table>

在这里插入图片描述
效果图

列表标签

在这里插入图片描述

*无序列表

基本语法格式如下：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
   </ul>

在这里插入图片描述
效果图
快捷：ul>li*n
1.无序列表的各个列表项之间没有顺序之分，是并列的
2.<ul> </ul>中只能嵌套<li> </li>,输入其他标签或文字的做法是不被允许的
3.<li>与 </li>之间相当于一个容器，可以容纳所有元素
4.用css设置无序列表的样式属性

有序列表
 <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
   </ol>

在这里插入图片描述
效果图
快捷： ol>li*n
1.<ol> </ol>中只能嵌套<li> </li>,输入其他标签或文字的做法是不被允许的
2.<li>与 </li>之间相当于一个容器，可以容纳所有元素
3.用css设置有序列表的样式属性

自定义列表

自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
在这里插入图片描述
<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

在这里插入图片描述
效果图

表单标签

在这里插入图片描述

表单域

表单域是一个包含表单元素的区域
<form>会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>

常用属性
在这里插入图片描述

表单控件（表单元素）
<input>输入表单元素

用于收集用户信息

<input type="属性值" />
  • <input />标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值以及描述如下：

在这里插入图片描述
1.type属性文本框和密码框

<form>
用户名：<input type="text"> <br>
密码：<input type="password">
</form>

在这里插入图片描述
效果图

2.type属性单选按钮和复选框

性别：男<input type="radio"> 女<input type="radio"><br>
爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="checkbox">

在这里插入图片描述
在这里插入图片描述
效果图
注意：此代码下的单选按钮无法实现单选效果

除type属性外，<input>标签还有很多其他属性，如下：
在这里插入图片描述

  • name和value是每个表单元素都有的属性值，主要给后台人员使用
  • name表单元素的名字，要求单选按钮和复选按钮有相同的name值

3.name和value属性
name是表单元素的名字
这里的性别单选按钮必须有相同的名字name，才可实现多选一

<form>
用户名：<input type="text" name="username" value="请输入用户名"> <br>
密码：<input type="password" name="psw" ><br>
性别：男<input type="radio" name="sex" value="nan"> 女<input type="radio" name="sex" value="nv"><br>
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" value="睡觉">打豆豆<input type="checkbox" name="hobby" value="打豆豆">
</form>

![在这里插入图片描述](https://img-blog.csdnimg.cn/7e2ef3e660464071b5f
效果图
4.checked和maxlength属性

(1)checked

爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked">打豆豆<input type="checkbox" name="hobby" value="打豆豆">

在这里插入图片描述
效果图

(2)maxlength

用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>

在这里插入图片描述（最多输入6个字符）

效果图
5.type属性提交和重置按钮

<!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
<input type="submit" value="免费注册">

在这里插入图片描述
效果图

在这里插入图片描述上传内容

<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">

在这里插入图片描述
效果图

6.type属性普通按钮和文件域

<!-- 普通按钮button  后期结合js 搭配使用 -->
<input type="button" value="获取短信验证码">

在这里插入图片描述
效果图

<!-- 文件域 使用场景 上传文件使用的 -->
上传图像:<input type="file" >

在这里插入图片描述
效果图

7.label标签

  • input元素定义标注（标签）
  • 用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
<label for ="sex"> 男 </label>
<input type = "radio" name="sex" id="sex">

核心：<label>标签的for属性应与相关元素的id属性相同

<select>下拉表单元素

语法：

<select >
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
    ...
</select>

在这里插入图片描述
效果图
1.<select>中至少包含一对 <option>
2.在 <option>中定义selected="selected"时，当前项即为默认选中项

textarea文本域元素
<textarea>文本内容</textarea>

在这里插入图片描述
效果图

xby_1.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础知识点
qq_40046544的博客
07-27 8610
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6061
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
全网最全HTML基础
a1085653724的博客
04-20 5055
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML基础知识
xuan971130的博客
03-02 2894
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
头歌-HTML基础
somewon的博客
03-06 9988
四川师范大学 头歌 web应用开发
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
HTML基础.xmind
12-07
HTML基础.xmind
html基础整理
04-19
整理一些html常用的基础的标签作用与其网页的展示效果非常基础，简单易懂
关于如何转换MarkDown文本并在Html内进行显示
ioioppk的博客
07-25 927
今天遇到一个问题，从ChatGpt的API获取的文本格式为MarkDown，在HTML上使用textarea控件显示的时候就只是文字格式，并没有对MarkDown格式进行处理，今天就分享一下如何在Html上进行MarkDown格式文本的显示。
【HTML — 构建网络】HTML 中的元数据
07-24 930
这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定语言的结果中正确显示），则搜索引擎将更有效地索引您的 HTML 文档，并且它对使用屏幕阅读器的视觉障碍者很有用（例如，“六”一词在法语和英语中都存在，但发音不同。的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。指定包含与您的页面内容相关的关键字的描述很有用，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高（此类活动称为。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1106
iframe 预览邮件 + 打印邮件 + 模拟滚动条
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 911
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML基础：表单标记详解
本章节详细介绍了HTML基础知识中的表单标记，这是网页设计和交互的重要组成部分。HTML (HyperText Markup Language) 是一种描述性标记语言，非编程语言，主要用于构建网页结构和呈现内容。表单标记`<form>`是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值