HTML简单认识

最新推荐文章于 2024-08-15 14:47:41 发布
最新推荐文章于 2024-08-15 14:47:41 发布
阅读量112 收藏 1
点赞数 1
分类专栏： 前端部分 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53190518/article/details/124381879
版权
这篇博客介绍了HTML的基本结构，包括html、head、body、title标签。详细讲解了常用的HTML标签，如注释、标题、段落、换行、格式化、图片、超链接、表格、列表和表单等，强调了它们的用途和属性。此外，还提到了div和span作为无语义标签在网页布局中的应用。
摘要由CSDN通过智能技术生成

文章目录


html的学习就是标签的学习

HTML的结构

html整体框架:

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>
  • html标签是整个html文件的根目录
  • head标签中写页面的属性
  • body标签中写的是页面显示的内容
  • title标签中写的是页面的标题

HTML常见的标签

注释标签

注释标签不会再显示在页面中,可以提高代码的可读性

<!-- 这是一个注释标签 -->

ctrl + / 快捷键可以快速进行创建/取消注释

注释的原则

  • 要和代码逻辑一致.
  • 尽量使用中文.
  • 不要传递负能量.

标题标签

有六个, 从 h1 - h6. 数字越大, 则字体越小.

<h1>这是一级标题</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

image-20220420095732481

段落标签 :p

一个p标签里面的内容就好比是一个段落中的内容,p标签之间的关系好比是一篇文章中段落与段落的关系

<p> 输入的文本 </p>

image-20220420100520743

image-20220420100507212

注意:

  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进.
  • 自动根据浏览器宽度来决定排版.
  • html 内容首尾处的换行, 空格均无效.
  • 在 html 中文字之间输入的多个空格只相当于一个空格.
  • html 中直接输入换行不会真的换行, 而是相当于一个空格.

有些特殊的字符在 html 文件中是不能直接表示的, 例如:

空格: &nbsp ;

小于号: &lt;

大于号: &gt;

按位与: &amp;

image-20220420100845099

image-20220420100900972

换行标签 br

br 是 break 的缩写. 表示换行.

br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有一个很大的空隙. <br/>是规范写法. 不建议写成 <br>

image-20220420101105351

image-20220420101117568

格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签
    <strong>加粗</strong>
    <b>加粗</b>
    <em>斜体</em>
    <i>斜体</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

image-20220420103132500

图片标签 img

img是一个单标签

img里面可以 写很多属性,其中最重要的就是 src属性 通过src可以,描述图片所在的位置

此处的src可以是一个绝对路径,也可以是一个相对路径,也可以是一个网络路径

    <img src="F:\photoBox\aaa.jpg">
    <img src="aaa.jpg">
    <img src="https://img1.baidu.com/it/u=2775655496,2255017447&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">

image-20220420105517524

img 标签的其他属性

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

alt属性

<img src="aa.jpg" alt="图片出现了错误">
<img src="aaa.jpg" alt="图片出现了错误">

image-20220420105907882

title属性

<img src="aaa.jpg" alt="图片出现了错误" title="这是博主的头像">

image-20220420110018662

width/height属性

一般的只会调整其中一个属性,另一个属性就会等比调整

<img src="aaa.jpg" alt="图片出现了错误" width="100px">
<img src="aaa.jpg" alt="图片出现了错误" title="这是博主的头像" width="50px">

image-20220420110308063

超链接 a

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>

a 标签是行内元素,不是块级元素

空链接 ,是属于在开发阶段,有的链接具体的地址不确定,就可以用# 占个位置

如果href里面的链接,是对应到一个普通文件(不是html之类的),就会触发下载操作

如果把图片放到a标签里面,就会实现点击图片惠州跳转的效果

表格标签

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格得到主体区域.

关系:table 包含 tr , tr 包含 td 或者 th.

    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

image-20220420111621038

此时创建出来的表格完全看不出来像一个表格,此时就要添加一些属性,此时添加的属性只能加载table标签的头标签中

border属性

border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框

    <table border="1">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

image-20220420112016968

此时看起来像一个表格了,但是单元格和单元格之间出现了间隙,也可以使用属性进行消除

cellspacing: 单元格之间的距离. 默认为 2 像素

    <table border="1" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

此处将单元格之间的距离调整为0

image-20220420112320837

除此之外,还可以调整表格的内容和表格边距之间的距离

cellpadding: 内容距离边框的距离, 默认 1 像素

    <table border="1" cellspacing="0" cellpadding="12">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

image-20220420112545936

width / height: 设置尺寸.

    <table border="1" cellspacing="0" cellpadding="12" width="300px" height="100px">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

image-20220420112858330

此处看不出有多大的差别,可以自己写一下看

align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)

    <table border="1" align="right" cellspacing="0" cellpadding="12" width="300px" height="100px">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

image-20220420113023462

跨行合并: rowspan=“n”

跨列合并: colspan=“n”

这里的属性,使用在td或者tr标签中

    <table border="1" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td colspan="2">23</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </table>

image-20220420113401757

列表标签

主要使用来布局的. 整齐好看.

  • 无序列表[重要] ul li , .
  • 有序列表[用的不多] ol li
  • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
    <h3>有序列表</h3>
    <ol>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
    </ol>
    <h3>无序列表</h3>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
    </ul>
    <h3>自定义列表</h3>
    <dl>
        <dt>计算机语言</dt>
        <dd>Java</dd>
        <dd>C++</dd>
        <dd>Python</dd>
    </dl>

image-20220420113938024

表单标签

表单是让用户输入信息的重要途径.

分成两个部分:

  • 表单域: 包含表单元素的区域. 重点是 form 标签.
  • 表单控件: 输入框, 提交按钮等. 重点是 input 标签

form标签

<form action="test.html">
   ... [form 的内容]
</form>

描述了要把数据按照什么方式, 提交到哪个页面中.

关于 form 需要结合 服务器 & 网络编程 来进一步理解.

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度.
  1. 文本框
<input type="text">

image-20220420114326293

这就是文本框的样子,可以在文本框中输入数据什么的

  1. 密码框
<input type="password">

image-20220420114531215

  1. 单选框
<input type="radio" name="sex">男
<input type="radio" name="sex">女

image-20220420114702763

此时可以在其中一个单选框中加入checked属性,表示默认选中

只有两个单选框的name一样的时候,才可以实现单选(多选一)操作

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

image-20220420114809860

  1. 复选框
爱好:
<input type="checkbox"> 吃饭 
<input type="checkbox"> 睡觉 
<input type="checkbox">打游戏

image-20220420115030443

可以一次选择多个

同时也可以通过checked属性表示哪些是默认选中的

  1. 普通按钮
<input type="button" value="我是一个按钮">

image-20220420115224809

此时点击这个按钮没有任何反应,我们需要搭配js代码使用

<input type="button" value="我是一个按钮" onclick="alert('hello')">

image-20220420115419883

  1. 提交按钮
<form>
    <input type="submit" value="提交">
</form>

提交按钮需要放在form标签中. 点击后就会尝试给服务器发送

  1. 清空按钮
<form>
    <input type="reset" value="清空">
</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

  1. 选择文件
<input type="file">

image-20220420115911630

点击选择文件, 会弹出对话框, 选择文件.

label标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

  • for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="women">
<label for="women">女</label>

image-20220420120308329

在没使用label标签之前,需要点钟小圆圈才可以选中,点击汉字没有任何的反应;加了label标签之后,点击汉字也可以选中对应的单选框

select标签

下拉菜单

option 中定义 selected=“selected” 表示默认选中

<select>
    <option>--请选择年份--</option>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    <option>2003</option>
</select>

image-20220420120721671

textarea标签

<textarea cols="30" rows="10">

</textarea>

image-20220420120905524

无语义标签: div & span

div 标签, division 的缩写, 含义是 分割

span 标签, 含义是跨度

就是两个盒子. 用于网页布局

  • div 是独占一行的, 是一个大盒子.
  • span 不独占一行, 是一个小盒子.
<div>这是一个div标签</div>
<div>这是一个div标签</div>
<span>这是一个span标签</span>
<span>这是一个sapn标签</span>

image-20220420121145591

yuuyin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot制作个人博客-博客关于我页面
qq_48838980的博客
06-25 508
文章目录 package net.zjs.lrm.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; /** * 功能： * 作者：zjs * 日期：2021-06-24 */ @Controller public class AboutShowController { @GetMapping("/about
认识HTML
weixin_44483524的博客
03-29 288
认识HTML什么是HTML目前市面上的主要浏览器内核HTML的编辑工具HTML的基本结构HTML的标签及分类网页的摘要信息 什么是HTML HTML (Hyper Text Markup Language，超文本标记语言) 是用来描述网页的一种语言。 - 超文本 指页面中可以包含图片、链接、甚至音乐视频等非文本元素 - 标记 指页面上的元素是由标记排列在页面进行显示的 HTML 是网页的...
简单的HTML认识
doi79215的博客
08-03 65
HTML,全称为Hyper Text Markup Language （超文本标记语言）。 常用开发工具有：1.vs code（全栈开发） 2.hbulider（纯前台开发工具） 3.sublime（简易速度快） 4.Webstorm 标签：用<xx>（开始） </xx>（结束）做标记，其中可放置文本内容或其他标签，可嵌套使用。 元素：标签和其内容...
关于HTML的一些最最最最基础的知识
不安静的小田田的博客
05-11 288
最近在学习Web项目开发技术，其中就涉及到了关于写前端页面的一些基础知识，本篇文章嘞我将要介绍一下下关于写前端页面的一些很基础很基础的知识（这些也是我在做第一次作业---个人简历当中都会使用到的知识啦~）也可以让初学html的小伙伴们更好的了解html！ 一、HTML基础 1、HTML的简介 HTML是超文本标记语言（ Hyper Text Markup Language）的缩写，HTML 不是一种编程语言，而是一种标记语言 (markup language) ，标记语言是一套标记标签 (markup
我的第一篇博客(关于html初学笔记)
su190977024的博客
04-27 310
题记 第一次写博客竟是怀着如此激动的心情。曾经不论是在百度还是谷歌都受到过大神博客的文章在我的生活和学习中得到了帮助。如今自己动起手来实属激动。相信第一次来这里的心情都会和我一般。 初来到这里，像是发现了另一片天地。广场上刷着大神们的学习心得和资源分享。实属丰富了自己的生活。虽然自己还是一个菜鸟，还是想把自己学到的发表在这里。 我的html笔记 基本标签作用 <strong>：字体...
简单了解HTML
jajdhdhd的博客
08-05 735
目录 1.什么是HTML？ HTML是HyperText Markup Language(超文本标记语言)的缩写 HTML是一种标记语言，用于告诉浏览器如何构建网页。它可以通过各种HTML元素来构建出开发人员想要的页面。“超文本是指页面中可以存在链接、图片、音乐、视频、程序等非文字元素。 同时HTML也是一种规范、一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页本身是一种文本文件，通过在文本文件中添加标记符，告诉浏览器该如何显示其中的内容（如文字如何处理，...
初识HTML5，认识html
03-05
【初识HTML5，认识HTML】 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，是用于创建网页的标准标记语言。自2014年正式发布以来，HTML5已经成为现代网页开发的核心，它极大地提升了用户体验，...
简单自我介绍HTML版本
06-30
对于初学者来说，完成这样一个项目是非常好的实践，可以理解基本的HTML结构和元素，同时对HTML5的新特性有初步的认识。接下来，可以尝试添加CSS样式来美化页面，甚至结合JavaScript进行交互式设计，进一步提升网页的...
XHTML教程,简单认识XHTML基础知识
09-28
本文简单让大家认识一下XHTML,了解XHTML的基础知识什么是XHTML　XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来...
认识HTML语言 认识HTML语言
06-30
创建一个简单的HTML网页涉及以下几个基本步骤： 1. **编写HTML代码**：使用文本编辑器（如Notepad++或Sublime Text）编写HTML标记。 2. **保存文件**：将文件保存为`.html`格式。 3. **预览网页**：在浏览器中打开...
HTML的基础及入门认识
11-07
例如，创建一个简单的HTML页面，可以包含标题、段落和列表： ```html <!DOCTYPE html> <html> 我的第一个HTML页面 欢迎来到我的网站 这是我的简介。 爱好：阅读 特长：编程 </html> ``` 这段代码会显示...
JAVA进阶补充
最新发布
2301_80150315的博客
08-15 521
概念：把已经有的方法拿过来用，当作函数式接口中抽象方法的方法体条件：引用处必须是函数式接口被引用的方法需要已经存在被引用方法的形参和返回值需要跟抽象方法的形参和返回值保持一致被引用方法的功能需要满足当前需求：方法引用符意义：就是为让控制台的报错信息更加的见名知意自定义异常的步骤：定义异常类写继承关系空参构造带参构造​file对象就表示一个路径，可以是文件的路径、也可以是文件夹的路径；这个路径可以是存在的，也允许是不存在的构造方法描述根据文件路径创建对象。
进程间通信 ---共享内存
BUG制造机的博客
08-14 769
在这篇文章中向大家介绍了共享内存的原理以及常用的指令函数，希望大家有所收获！😁。
SpringBoot快速入门（手动创建）
m0_74124657的博客
08-11 517
代码如下//引导类项目的入口//注解添加导入进来你可以浏览器中查看自己编写的代码，看是否正确localhost：你命名的端口号（默认是8080。后面你也可以在配置文件修改）
Java Spring|day3.SpringBoot
weixin_60364343的博客
08-15 228
告诉Spring boot需要什么功能,它就能引入需要的依赖库起步依赖就是特殊的Maven依赖，利用了传递依赖解析，把常用库聚合在一起，组成几个为特定功能而定制的依赖。
集合（1）
supercool7的博客
08-12 807
表示不同的类型集合，Collection、Map、List、Set、Queue、Deque等，以及辅助性质的接口Iterator、LinkIterator、Comparator、Comparable这些接口是为迭代和比较元素而准备。对接口的具体实现，主要常用的有：ArrayList、LinkedList、HashMap、HashSet、TreeMap等等。理解Java集合体系可以从三个层次：最上层的接口、中间的抽象类、最后的实现类。是所有集合框架的根接口，包含了对集合进行基本操作的方法。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 908
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Mybatis XML 数据源为 Oracle 之批量插入或更新 Merge Into 的具体介绍与使用
欢迎来到 ABin-阿斌的博客：写一生代码，创一世佳话，筑一览芳华。
08-12 655
由于近期在所开发的项目中，对于数据入库，有存在即更新，不存在则插入的需求，因此发现了 Oracle中的 MergeInto 命令。本文将对MergeInto的用法进行介绍并将 MergeInto 和批量插入进行结合，同时还会对在 MergeInto 开发中遇到的问题进行总结。MergeInto 命令是 Oracle9i 中新增的命令，有了 MergeInto 语句，我们对数据能够不仅仅只做单一的插入或单一的更新，而是可以将更新与插入一起操作。
构造方法，JavaBean，对象内存图，基础数据类型和引用数据类型
qq_63126439的博客
08-14 221
栈内存处理完数据之后会退出，指向推内存的箭头都会消失，当没有人指向他的时候，堆内存中的数据也会被移除。带参构造方法和无参数构造方法，两者方法名相同，但参数不同，这叫做构造方法的重载。方法区，新增元空间，把原来的方法区的多种功能进行了拆分。创造对象的时候，虚拟机会自动调用构造方法，作用是给成员变量进行初始化的。只要是看见new就会在堆内存创建新的空间，两个空间是独立的，互不影响。基础数据类型，在变量当中存储真实的数据值，和其他空间没有任何关系。使用其他空间的数值，自己的空间存储的是地址值。
Dreamweaver下的HTML初学者教程
第二章引导学习者构建第一个HTML文档，讲解了HTML的基本结构，并通过创建简单的网页实例来实践。了解HTML文档的基本结构是编写有效HTML代码的关键。 第三章深入到HTML元素和标签，讲解了如何使用标签以及它们的属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值