HTML介绍

已于 2023-07-10 13:28:56 修改
阅读量176 收藏
点赞数 1
分类专栏： JavaEE 文章标签： java 开发语言
于 2023-07-09 14:13:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33866936/article/details/131622439
版权
本文介绍了HTML的基础知识，包括文档类型声明、HTML结构、字符编码、元数据以及VSCode中的一些快捷键。还详细讲解了HTML中的标题、段落、换行、格式化文本、图片、超链接、表格、列表和表单元素的使用方法。
摘要由CSDN通过智能技术生成

一. 介绍

最初HTML是用来显示报纸, HTML目前来说是用于文档的排版.
文件后后缀是以.html或.htm结尾
image.png
把这个组织文档的结构叫做文档树DOM TREE, 在DOM树中查找某一个标签可以通过遍历二叉树的方式进行查找.
HTML中的标签大多数都是由开始标签和结束标签组合而成的, 这种没有闭合标签的类型叫单标签, 标签中包含属性, 每个属性可以表示不同的含义.

二. 使用

准备工作

在VSCode里输入 ! 再按Tab, 可以快速生成成HTML文件的基本结构

<!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>浏览器标题</title>
  </head>
  
  <body>
    
  </body>
  
</html>

①<!DOCTYPE html>：这是文档类型声明（Document Type Declaration），指定文档使用的HTML版本。<!DOCTYPE html>声明用于HTML5文档。
②<html lang="en">：这是HTML文档的根元素，表示整个HTML文档的开始和结束。lang="en"是一个语言属性，表示文档使用的是英语语言。
③ <head>：这是HTML文档的头部部分，用于包含文档的元数据（metadata）和引用外部资源。
④ <meta charset="UTF-8">：这个meta元素指定了文档的字符编码为UTF-8，这是一种常用的字符编码方式，支持包括中文在内的大多数字符。
⑤ <meta http-equiv="X-UA-Compatible" content="IE=edge">：这个meta元素指定了浏览器的渲染模式。http-equiv属性用于指定HTTP头部的一个等效属性，这里指定了X-UA-Compatible属性，表示浏览器应该使用最新的可用版本进行渲染。
⑥ <meta name="viewport" content="width=device-width, initial-scale=1.0">：这个meta元素用于设置视口（viewport），即浏览器窗口中用于显示网页的区域。width=device-width表示视口的宽度应该等于设备的宽度，initial-scale=1.0表示初始缩放比例为1.0，即不进行缩放。
⑦ <title>浏览器标题</title>：这个title元素定义了浏览器标题栏中显示的文本内容，用于描述页面的主题或标题。在这个例子中，标题为"浏览器标题"。

快捷键

①"!"+Tab: 快速生成成HTML文件的基本结构
②shift+alt+F: 内容格式化
③shift+alt+↓: 复制当前行到下一行
④ctrl+Enter: 光标到下一行, 而非直接回车
⑤ctrl+alt+↑/↓: 选中多行, 编辑多行

写入内容

在<body>...</body>里面写入要编辑的内容

6级标题

分别用<h1>...</h1>, <h2>...</h2>…包裹的文字会被转换成标题, 而且会自动换行

段落

被包裹的内容相当于一个段落, 结尾会换行

换行

换行符, 单标签, 没有闭合标签

格式化:加粗倾斜删除下划线

都不会自动换行
①加粗
<strong>...</strong>
<b>...</b>
②倾斜
<em>...</em>
<i>...</i>
③删除线
<del>...</del>
<s>...</s>
④下划线
<ins>...</ins>
<u>...</u>

图片

<img src="图片路径,可以本地可以网络" alt="图片加载失败的提示信息" title="鼠标移动到图片上的提示信息" width="缩放到宽度几像素" height="缩放到高度几像素">

超链接

<a href="链接目标">提示文本,也可以内嵌图片</a>

表格

<table>...</table>: 表示整个表格
<tr>...</tr>: 表示一行
<td>...</td>: 一行内的单元格
<th>...</th>: 表头的一整行

列表

有序列表

<ol>...</ol>: 行
<li>...</li>: 列(单元格)

<ol>
	<li>扭一扭</li>
	<li>舔一舔</li>
	<li>泡一泡</li>
</ol>

无序列表

<ul>...</ul>: 行
<li>...</li>: 列(单元格)

<ul>
	<li>吃饭</li>
  <li>睡觉</li>
  <li>原神启动</li>
</ul>

自定义列表

<dl>...</dl>: 行
<dt>...</dt>: 第一行的提示信息
<dd>...</dd>: 列(单元格)

<dl>
  <dt>我的老婆们</dt>
  <dd>宵宫</dd>
  <dd>绫华</dd>
  <dd>妮露</dd>
</dl>

表单

表单是让用户输入信息的重要途径. 分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签
表单控件: 输入框, 提交按钮等. 重点是 input 标签

form

action="..."就是把表单的内容最终提交给谁?对于程序来说, 提交的目标就是后台的接口

<form action="提交的目标">
	<!--表单内容-->
</form>

input

<input type="" name="" id="">
type="t": 这个属性指定了输入元素的类型
name="": 这个属性用于指定输入元素的名称. 名称将作为标识符在表单提交时将输入的值发送到服务器.
id="": 这个属性用于指定输入元素的唯一标识符. 它通常用于在JavaScript中操作元素或者为元素应用样式. 与名称不同, ID必须是唯一的, 不能重复.
①<input type="text" placeholder="提示文字">
**输入框, **用来接收用户输入的信息, placeholder是默认提示文字
②<input type="password">
密码框, 写入的字符被隐藏成 *
③<input type="button" value="提交">
普通按钮, 按钮文字是value里面设置
④<input type="submit" value="提交按钮">
提交按钮, 会提交表单内容, 默认value=“提交”
⑤<input type="radio" name="" id="">
**单选框. **
name这个属性用于指定输入元素的名称. 名称将作为标识符在表单提交时将输入的值发送到服务器. 设置相同name可以互斥选择
id这个属性用于指定输入元素的唯一标识符.
label中的for属性与input中的id属性匹配, 可以使点击labe里面的元素也对单选框生效, label里面可以添加文字,图片等
⑥<input type="checkbox" name="" id="">
复选框
⑦<input type="file" name="" id="">
选择上传文件
⑧<input type="reset" name="" id="">
清空表单已填写的信息

select标签<select…>

<select name="" id="">
  <option selected hidden disabled>提示信息</option>
	<option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

第一行的`<option selected hidden disabled>提示信息</option>`可以写提示信息, value一般可以对应数据库的id

textarea标签

<textarea name="" id="" cols="30" rows="10" placeholder="提示文字">默认填充文字</textarea>
cols列数, rows行数, placeholder默认提示文字

无语义标签div & span

无语义标签对页面的效果没有任何影响, 只是方便以后在DOM树中找到对应的标签
div是独占一行的, 是一个大盒子, 块级标签
span不独占一行, 是一个小盒子, 行级标签

转义字符

①空格: &nbsp
②小于号: &lt
③大于号: &gt
④按位与: &amp

Specium.
关注
专栏目录
一款好看的HTML介绍页、引导页源码
END
05-11 6756
一款好看的个人极简介绍页、引导页源码，图标引用的是阿里巴巴矢量图标库，可引入自己的图标项目更换。 图标项目更换在index.html第9行里面 logo图片在index.html第29行里面 名字在index.html第32行里面 介绍在index.html第65行里面 地图引入了高德的map lab 数据可视化，可用来做足迹，记录去过的地方。 下载地址：好看的扁平化风格的HTML单页面、引导页、介绍页源码-Webpack文档类资源-CSDN下载 ...
HTML 02-02 列表 表单 标签笔记
Write less，do more
06-01 418
1.列表标签 列表是用来布局的。因为非常整齐和自由。 列表的概念：容器里面装载着结构，样式一致的文字或者图表的一种形式，叫列表 特点：列表最大的特点就是，整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高 1.1无序列表ul（重点） 无序列表的各个列表直接没有顺序级别之分，是并列的。 <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> 脚下留心：
html 按钮
qq_42265536的博客
12-23 1万+
按钮分为三种：button(普通按钮)， submit(提交按钮) ， reset(重置按钮) 普通按钮： 语法： &lt;input type="button" value="普通按钮取值" onclick="javaScript脚本程序"&gt; value 的取值就是按钮上要显示的文字 onclick 是普通按钮的事件 实例： &lt;!DOCTYPE html&gt; ...
JavaScript表单验证和提交
hei_xiaomian的博客
03-24 3310
最近做java的时候用到了JavaScript表单。网上相关的教程很多，但大部分都不详细。 很多人学到最后都对form表单不是很熟悉，现在层出不穷的框架使得很多人觉得方便，也就更少地回顾基础知识了，但框架 W3school上面对于初学者展示的表单案例是这样的： <script> function validateForm() { var x = document.forms["my...
HTML学习|初识表单post和get提交、文本框和单选框、按钮、多选框和下拉框、文本域和文件域、搜索框滑块和简单验证、表单的应用、表单初级验证
weixin_73149966的博客
05-09 999
form标签是表单，method控制表单提交方式，get方式，表单填写的参数能够在跳转的url地址中看到，post方式是看不到的，action是向何处跳转表单数据input标签，且type=text，是文本输入框，name设置的就是这个输入内容的参数名称input标签，且type=password，是密码输入框，这个输入内容在页面上会变成保密的形式input标签，且type=submit代表这是一个表单的提交按钮，value可以设置这个按钮的名称。
Html自我介绍模板
Chen_072_11的博客
03-09 7413
html自我介绍的模板
HTML与CSS详细介绍
热门推荐
weixin_44454512的博客
11-28 1万+
HTML 与 CSS 1. 主要内容 2. HTML HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。 它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。 HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件
html网页内部超链接介绍
Kyrieki11的博客
05-23 4984
超链接 html 内部超链接
个人网页介绍家乡纯html
10-26
2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言...
html语言详细介绍
jcf52的博客
03-16 5584
一.html介绍 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。 HTML是由WEB的发明 者 Tim Berners-Lee （蒂姆·伯纳斯·李）和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言（SGML）的应用。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如 ， 等)。 使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTM
用html做自我介绍
hduugdh的博客
05-01 7423
话不多说上代码 顺便挑战一天爆肝三篇文章 <html> <head> <title>朱**</title> <mate name="keywords" content="个人简历"/> <mate name="description" content="朱**的个人简历"/> </head> <body> <table border=5 bordercolor=red align=center&g
用value做提交表单
weixin_54684864的博客
03-02 282
鼠标移动div出入事件 想法:做出类似论坛提交的页面 用if来判断提交时的事件 总结：layer的弹出对使用便利 If的判断极为重要 难点:如何将value判断 提交时vlaue如何触发事件 效果：提交论坛时会判断内容 弹出相应提示 注意:value值的判断不能弄错 Onsubmit事件是当表单提交时执行 JavaScript（不支持IE8） 总过程： 用div包裹form表单 Form表单给与点击事件 Input用vlaue值返回结果 用if语句判断相应结果 输出结果； 过程： HTML部分： 创建包裹
复选框选中时才会提交value值
一杯星空一个世界的博客
08-24 3402
复选框选中时才提交value值。 如果选中设置value=0，未选中value=1，其实后台是接收不到 1 的，HTML太薄弱，开始的时候让我郁闷了十分钟怎么取不到1。 所以要在后台判断接收的参数为null时，其实就是1的时候，设置value=1我感觉就是页面调试好区分吧。。...
【C++刷题】力扣-#121-买卖股票的最佳时机
最新发布
会写代码的饭桶
10-16 545
给定一个数组 prices，其中 prices[i] 表示第 i 天的股票价格。假设你可以在第 i 天买入并在第 j 天卖出股票（i ≤ j），设计一个算法来计算你所能获取的最大利润。注意你只能持有一股股票，并且你不能同时参与多笔交易（即在再次买入前必须卖出股票）。
基于SSM班级事务管理系统的设计
2401_87849773的博客
10-15 414
管理员账户功能包括：系统首页，个人中心，学生管理，班委管理，班会组织管理，健康档案管理，党员发展管理，党员培训管理，学生成绩管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。班委账号功能包括：系统首页，学生管理，学生成绩管理，活动信息管理，班费通知管理。服务器：SpringBoot自带 apache tomcat。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发系统：Windows。
Java安卓开发之Fragment开发（通俗易懂版）——第8章
一个脚本小子的博客
10-13 701
FragmentManager中的getSupportFragmentManager()方法不支持Activity，不论是旧版的FragmentManager还是新版的，因此我们要把继承Activity类改成继承AppCompatActivity类。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值