【Web开发】深度学习HTML(超详细,一篇就够了)

在这里插入图片描述

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

💓 博客主页：从零开始的-CodeNinja之路
⏩ 收录文章：【Web开发】深度学习html(超详细,一篇就够了)
🎉欢迎大家点赞👍评论📝收藏⭐文章

目录

  • HTML
    • 1. HTML基础
        • 1.1 什么是HTML
        • 1.2 认识HTML标签
        • 1.3 HTML文件基本结构
        • 1.4 标签层次结构
    • 2. HTML常见标签
        • 2.1 段落标签:p
        • 2.3. 换行标签:br
        • 2.4 图片标签:img
        • 2.5 超链接标签:a
        • 2.6 select标签
    • 3. 表格标签
    • 4. 表单标签
        • 4.1 form标签
        • 4.2 input标签
    • 5. 无语义标签:div&span
    • 6. 综合练习:用户注册

HTML

1. HTML基础

1.1 什么是HTML

HTML(Hyper Text Markup Language),超⽂本标记语言
超文本:比文本要强大.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包
含图片,音频,或者自已经审阅过它的学者所加的评注、补充或脚注等等.
标记语言:由标签构成的语言

1.2 认识HTML标签

HTML代码是由"标签"构成的.

  • 标签名(body放到<>中

  • 大部分标签成对出现.<> 为开始标签,</> 为结束标签.

  • 少数标签只有开始标签,称为"单标签".

  • 开始标签和结束标签之间,写的是标签的内容.

  • 开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

1.3 HTML文件基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

  • html标签是整个html⽂件的根标签(最顶层标签)

  • head标签中写页面的属性.

  • body标签中写的是页面上显⽰的内容

  • title标签中写的是页面的标题.

细节解释:(了解即可,不必深究)

  • 称为DTD(⽂档类型定义),描述当前的⽂件是⼀个HTML5的⽂件.
  • 其中lang属性表⽰当前页面是⼀个"英语页面".这⾥暂时不用管
  • 描述⻚⾯的字符编码⽅式.没有这⼀⾏可能会导致中文乱码.
  • name=“viewport” 其中viewport指的是设备的屏幕上能用来显示我们的网页的那⼀块 区域.
  • content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽 度等宽,并设置初始缩放为不缩放.(这个属性对于移动端开发更重要⼀些).
1.4 标签层次结构

标签之间的结构关系,构成了⼀个DOM树
DOM是Document Object Mode(文档对象模型)的缩写
在这里插入图片描述
其中:

  • head和body是html的子标签(html就是head和body的⽗标签)
  • title是head的⼦标签.head是title的父标签.
  • head和body之间是兄弟关系.

可以使用chrome的开发者⼯具查看页面的结构.
F12或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到页面结构细节.

2. HTML常见标签

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

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>

结果如下:在这里插入图片描述

2.1 段落标签:p

在HTML中,段落,换行符,空格都会失效,如果需要分成段落,需要使用专门的标签
• p标签表示⼀个段落.

<p>这是⼀个段落</p>
<p>这是⼀个段落</p>

注意:

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

想要完成换行的话,也可以通过
标签来实现.
br是break的缩写.表示换行

  • br是⼀个单标签(不需要结束标签)
  • br标签不像p标签那样带有⼀个很大的空隙.
这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>
2.4 图片标签:img

img标签必须带有src属性.表示图片的路径.

<img src="rose.jpg" width="500px" height="800px" border="5px">

此时要把rose.jpg这个图片文件放到和html中的同级目录中.
img标签的其他属性

  • width/height:控制宽度高度.高度和宽度⼀般改⼀个就行,另外⼀个会等比例缩放.否则就会图片失 衡.
  • border:边框,参数是宽度的像素.但是⼀般使用CSS来设定.

注意:

  1. 属性可以有多个,不能写到标签之前
  2. 属性之间用空格分割,可以是多个空格,也可以是换行
  3. 属性之间不分先后顺序
  4. 属性使用"键值对"的格式来表示.
2.5 超链接标签:a
  • href:必须具备,表示点击后会跳转到哪个页面
  • target:打开方式.默认是_self.如果是_blank则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>

链接的几种形式:

  • 外部链接:href引用其他网站的地址
<a href="http://www.baidu.com">百度</a>
  • 内部链接:网站内部页面之间的链接.写相对路径即可
  • 空链接:使用#在href中占位.
<a href="#">空链接</a>
2.6 select标签

下拉菜单

  • option中定义selected="selected"表示默认选中.
<select>
	<option>北京</option>
	<option selected="selected">上海</option>
</select>

3. 表格标签

  • table标签:表示整个表格
  • tr:表示表格的⼀行
  • td:表⼀个单元格
  • thead:表格的头部区域
  • tbody:表格的主体区域.
  • table包含tr,tr包含td

表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使CSS⽅式来设置.
这些属性都要放到table标签中.

  • align是表格相对于周围元素的对齐式. align=“center” (不是内部元素的对⻬⽅式)
  • border表⽰边框.1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
  • cellpadding:内容距离边框的距离,默认1像素
  • cellspacing:单元格之间的距离.默认为2像素
  • width/height:设置尺⼨
 <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
   height="500">
    <tr>
        <td>11</td>

        <td>22</td>
    </tr>
    <tr>
        <td>33</td>
        <td>44</td>
    </tr>
    <tr>
        <td>55</td>
        <td>66</td>
    </tr>
   </table>

在这里插入图片描述

4. 表单标签

表单是让用户输⼊信息的重要途径.
分成两个部分:

  • 表单域:包含表单元素的区域.重点是form标签.
  • 表单控件:输⼊框,提交按钮等.重点是input标签.
4.1 form标签
<form action="test.html">
... [form 的内容]
</form>

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

4.2 input标签

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

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

3.单选框

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥

注意:单选框之间必须具备相同的name属性,才能实现多选⼀效果
4. 复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input
type="checkbox"> 打游戏
  1. 普通按钮
<input type="button" value="我是个按钮">
  1. 提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>

提交按钮必须放到form标签内.点击后就会尝试给服务器发送请求

5. 无语义标签:div&span

div标签,division的缩写,含义是分割
span标签,含义是跨度
就是两个子,⼦用于网页布局

  • div是独占⼀行的,是⼀个大盒子
  • span不独占⼀行,是⼀个小盒子.

6. 综合练习:用户注册

用户注册界面:
在这里插入图片描述

<h1>⽤⼾注册</h1>
<table>
<tr>
<td>⽤⼾名</td>
<td><input type="text" placeholder="请输⼊⽤⼾名"></td>
</tr>
<tr>
<td>⼿机号</td>
<td><input type="text" placeholder="请输⼊⼿机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输⼊密码"></td>
</tr>
</table>
<div>
<input type="button" value="注册">
<span>已有账号? </span><a href="#">登录</a><br/>
</div>

在这里插入图片描述
如果觉得文章不错，期待你的一键三连哦，你个鼓励是我创作的动力之源，让我们一起加油，顶峰相见！！！💓 💓 💓

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/446084.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

HTML使用

HTML使用

文章目录 一、简介二、HTML快速入门三、基础标签四、图片、音频、视频标签五、超链接标签六、列表标签七、表格标签八、布局标签九、表单标签十、表单向标签 一、简介 二、HTML快速入门 ​ <html><head><title>你好</title></head><body>再…
阅读更多...
Springboot整合Mybaits启动过程

Springboot整合Mybaits启动过程

Springboot整合Mybaits启动过程 1.前言2.MybatisAutoConfiguration3.SqlSessionFactoryBean3.1 XMLConfigBuilder.parse()3.1.1 XMLMapperBuilder.parse()3.1.1.1 XMLStatementBuilder.parse() 4.SqlSession4.1 Executor 1.前言 直接加载mybatis配置文件&#xff0c;然后创建S…
阅读更多...
代码训练LeetCode(7)删除有序数组中的重复项

代码训练LeetCode(7)删除有序数组中的重复项

代码训练(7)LeetCode之删除有序数组中的重复项 Author: Once Day Date: 2024年3月10日 漫漫长路&#xff0c;才刚刚开始… 全系列文章可参考专栏: 十年代码训练_Once-Day的博客-CSDN博客 参考文章: 26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09;力扣…
阅读更多...
利用websocket +定时器简易的实现一个网络聊天室

利用websocket +定时器简易的实现一个网络聊天室

其实原理非常简单,就是客户端用户通过websoket来连接websocket服务端。然后服务端,收集每个用户发出的消息, 进而将每条用户的消息通过广播的形式推送到每个连接到服务端的客户端。从而实现用户的实时聊天。 // TODO : 我主要是讲一下实现思路。并未完善其功能。 1.后端 依赖 …
阅读更多...
2024年【电工（初级）】考试内容及电工（初级）考试报名

2024年【电工（初级）】考试内容及电工（初级）考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 电工&#xff08;初级&#xff09;考试内容根据新电工&#xff08;初级&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将电工&#xff08;初级&#xff09;模拟考试试题进行汇编&#xff0c;组成一套电…
阅读更多...
线程的魔法：揭开现代操作系统并发执行的面纱

线程的魔法：揭开现代操作系统并发执行的面纱

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
elasticsearch篇：RestClient操作

elasticsearch篇：RestClient操作

1. RestClient ES官方提供了各种不同语言的客户端&#xff0c;用来操作ES。这些客户端的本质就是组装DSL语句&#xff0c;通过http请求发送给ES。官方文档地址&#xff1a;Elasticsearch Clients | Elastic 其中的Java Rest Client又包括两种&#xff1a; Java Low Level Res…
阅读更多...
解读BOT攻击，探索灵活高效的防护之道

解读BOT攻击，探索灵活高效的防护之道

回顾早期的互联网应用&#xff0c;由于业务流量比较小&#xff0c;往往单台服务器就能满足负载需求。随着互联网的流量越来越大&#xff0c;单服务器已经不能满足业务需求&#xff0c;无论它优化得再好&#xff0c;都较难承受大量的访问压力。支持负载均衡的技术很多&#xff0…
阅读更多...
openssl3.2 - exp - 选择最好的内建椭圆曲线

openssl3.2 - exp - 选择最好的内建椭圆曲线

文章目录 openssl3.2 - exp - 选择最好的内建椭圆曲线概述笔记将 openssl ecparam -list_curves 实现迁移到自己的demo工程备注END openssl3.2 - exp - 选择最好的内建椭圆曲线 概述 在openssl中使用椭圆曲线, 只允许选择椭圆曲线的名字, 无法给定椭圆曲线的位数. 估计每种椭…
阅读更多...
扩展学习|系统理解数字经济

扩展学习|系统理解数字经济

文献来源&#xff1a;[1]肖静华,胡杨颂,吴瑶.成长品&#xff1a;数据驱动的企业与用户互动创新案例研究[J].管理世界,2020,36(03):183-205.DOI:10.19744/j.cnki.11-1235/f.2020.0041. [2]陈晓红,李杨扬,宋丽洁等.数字经济理论体系与研究展望[J].管理世界,2022,38(02):208-22413…
阅读更多...
浅谈JUC的理解（含JUC知识体系图）

浅谈JUC的理解（含JUC知识体系图）

浅谈JUC的理解 一、前言感悟二、并发知识三、一年前回答四、补充体系回答五、补充层次回答六、碎碎念 本文除了说技术&#xff0c;更多的是在一个两年多开发经验的程序员视角下&#xff0c;记录下自己探索到的世界。 如有不妥之处&#xff0c;还请指正。共勉。 一、前言感悟 当…
阅读更多...
力扣hot100：239.滑动窗口最大值（优先队列/单调队列）

力扣hot100：239.滑动窗口最大值（优先队列/单调队列）

本题是一个经典的单调队列题。不过用优先队列也能解决。 一、优先队列 在使用优先队列时&#xff0c;我们会遇到这样的问题&#xff1a;如何将一个目标数从优先队列中弹出&#xff1f;如果使用stl这是办不到的&#xff0c;虽然可以自行实现这样的功能。但是我们可以这样思考&am…
阅读更多...
什么是GoogLeNet，亮点是什么，为什么是这个结构？

什么是GoogLeNet，亮点是什么，为什么是这个结构？

GooLeNet 亮点 最明显的亮点就是引入了Inception&#xff0c;初衷是多卷积核增加特征的多样性&#xff0c;提高泛化能力 &#xff0c;比如&#xff0c;最下边是一个输入层&#xff0c;然后这个输入分别传递给1*1&#xff0c;3 * 3 &#xff0c;5 * 5和一个最大池化层&#xff…
阅读更多...
IP数据报格式

IP数据报格式

每一行都由32位比特&#xff0c;即4个字节组成&#xff0c;每个格子称为字段或者域。IP数据报由20字节的固定部分和最大40字节的可变部分组成。 总长度 总长度为16个比特&#xff0c;该字段的取值以字节为单位&#xff0c;用来表示IPv4数据报的长度(首部长度数据载荷长度)最大…
阅读更多...
Long-term Correlation Tracking LCT 目标跟踪算法源码运行

Long-term Correlation Tracking LCT 目标跟踪算法源码运行

资源 LCT-tracker项目地址VLFeat官网OpenCV下载地址OTB50数据集百度网盘资源 参考博客 一步一步教你跑lct-tracker&#xff08;Win10Matlab 2016bVisual Studio 2015&#xff09;LCT代码跑起来先文章思路总结 正文 1. 环境配置 我的环境&#xff1a;Win11、Visual Studio…
阅读更多...
python+realsense

python+realsense

单目相机(RGB影像):分辨率&#xff1a;320180,320240,424240,640360,640480,848480,960540,1280720,19201080&#xff1b;帧率&#xff1a;6,15,30,60 按照博文Python实战之Realsense_realsense python-CSDN博客的代码显示如下&#xff08;我更改了分辨率和帧率&#xff0c;大…
阅读更多...
设计模式：观察者模式 ⑧

设计模式：观察者模式 ⑧

一、思想 观察者模式是一种常见的设计模式&#xff0c;也称作发布-订阅模式。它主要解决了对象之间的通知依赖关系问题。在这种模式中&#xff0c;一个对象&#xff08;称作Subject&#xff09;维护着一个对象列表&#xff0c;这些对象&#xff08;称作Observers&#xff09;都…
阅读更多...
css3中nth-child属性作用及用法剖析

css3中nth-child属性作用及用法剖析

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 标题&#xff1a;CSS3中nth-child属性作用及用法剖析 摘要&#xff1a;CSS3中的nth-child选择器允许我们根据元素位置来定位特定的元素…
阅读更多...
Vue3中Vue Router的使用区别

Vue3中Vue Router的使用区别

在 Vue 3 中&#xff0c;useRouter 和 useRoute 是两个用于 Vue Router 的 Composition API 函数&#xff0c;它们的用途和返回的对象不同&#xff0c;接下来详细了解一下它们的区别以及如何正确使用它们。 useRouter useRouter 用于获取 router 实例&#xff0c;这个实例提供…
阅读更多...
python（5）之处理数组

python（5）之处理数组

上次代码结果如下&#xff1a; 1、处理数组的缺失值 1、isnan&#xff08;&#xff09;函数 isnan&#xff08;&#xff09;函数是Numpy模块里的一个可以标记数组中缺失值的位置 代码示例如下&#xff1a; import numpy as np ac np.array([1,2,3,2,3,4,5,9,np.nan,1]) p…
阅读更多...
最新文章

Copyright @ 2022~2023