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

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

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>

如果觉得文章不错,期待你的一键三连哦,你个鼓励是我创作的动力之源,让我们一起加油,顶峰相见!!!💓 💓 💓

相关文章
|
2天前
|
安全 编译器 PHP
PHP 8:探索新特性及其对现代Web开发的影响
本文将深入探讨PHP 8版本中引入的新特性,以及这些更新如何影响现代Web开发的实践。我们将通过实际的代码示例和性能分析,展示PHP 8如何提升开发效率、加强安全性和增强应用性能,从而为开发者提供更优的编程体验。 【7月更文挑战第18天】
11 6
|
1天前
|
安全 编译器 API
探索PHP 8的新特性及其对现代Web开发的影响
随着PHP 8的发布,这一广泛使用的服务器端脚本语言迎来了重大升级。本文将深入探讨PHP 8引入的关键新特性,包括JIT编译器、联合类型、命名参数、匹配表达式等,以及这些特性如何提升性能、增强类型安全和改善开发者体验。同时,我们将分析这些变化对于现代Web开发实践的具体影响,以及它们如何塑造了PHP的未来发展方向。
8 1
|
2天前
|
前端开发 JavaScript 网络协议
深入理解Python Web开发中的前后端分离与WebSocket实时通信技术
【7月更文挑战第18天】前后端分离采用Flask/Django框架,前端JavaScript框架如Vue.js与后端通过AJAX/Fetch通信。WebSocket提供实时双向通信,Python可借助websockets库或Flask-SocketIO实现。最佳实践包括定义清晰的接口规范,确保安全性(HTTPS,认证授权),优化性能,和健壮的错误处理。结合两者,打造高效实时应用。
15 1
|
7天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
20 7
|
4天前
|
JavaScript 前端开发 UED
WebSocket在Python Web开发中的革新应用:解锁实时通信的新可能
【7月更文挑战第16天】WebSocket是实现Web实时通信的协议,与HTTP不同,它提供持久双向连接,允许服务器主动推送数据。Python有多种库如websockets和Flask-SocketIO支持WebSocket开发。使用Flask-SocketIO的简单示例包括定义路由、监听消息事件,并在HTML中用JavaScript建立连接。WebSocket提高了实时性、减少了服务器压力,广泛应用于聊天、游戏等场景。
12 1
|
1天前
|
安全 编译器 测试技术
PHP 8新特性解析及其对现代Web开发的影响
本文将深入探讨PHP 8中引入的关键新特性,包括JIT编译器、联合类型、命名参数、匹配表达式等,并分析这些变化如何优化现代Web开发流程。通过实例演示和性能比较,揭示升级至PHP 8的益处与挑战,为开发者提供升级决策的参考依据。
5 0
|
1天前
|
SQL 前端开发 数据库
Python Web开发进阶之路:从模板引擎到ORM的全面掌握
【7月更文挑战第19天】在Python Web开发中,提升技能的关键是理解和运用模板引擎(如Jinja2)与ORM技术。模板引擎,如在Flask中使用的Jinja2,使前端HTML与后端逻辑分离,便于维护。例如,通过路由函数`show_posts()`和`render_template()`呈现文章列表模板,用Jinja2的`for`循环展示内容。ORM,如SQLAlchemy,提供Pythonic的数据库操作,将表映射为类,SQL转化为方法调用。在博客系统中,定义Post模型并与数据库交互,展示了ORM简化数据管理的优势。通过实践这些工具,开发者能更好地驾驭复杂的Web项目。
10 0
|
5天前
|
算法 安全 编译器
PHP 8的新特性及其对现代Web开发的影响
在数字时代的浪潮中,PHP作为一门历史悠久的服务器端脚本语言,一直在不断地进化以适应新的编程挑战。本文将深入探讨PHP 8的最新特性,包括JIT编译器、联合类型、命名参数、匹配表达式等,并分析这些新特性如何优化代码、提升性能和增强安全性。通过实际案例,我们还将展示PHP 8如何影响现代Web开发的实践,以及开发者如何利用这些新工具来构建更快、更可靠、更易于维护的应用。
|
6天前
|
XML 前端开发 API
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
【7月更文挑战第14天】Web开发中,AJAX作为异步通信先驱,与新兴的Fetch API一起革新交互体验。Fetch基于Promise,简化了请求处理。Python后端,如Flask,提供稳定支撑。这三者的融合,推动Web应用达到新高度,实现高效、实时交互。通过示例展示,我们看到从发送请求到更新UI的流畅过程,以及Python如何轻松返回JSON数据。这种组合揭示了现代Web开发的潜力和魅力。
12 0
|
6天前
|
开发者 C++ Python
从零到一,Django/Flask带你走进Web开发的梦幻世界!
【7月更文挑战第14天】在Python Web开发中,Django和Flask各具特色。Django是全能框架,提供ORM、模板、认证等全套解决方案,适合快速建站和新手入门;Flask则轻量灵活,适合原型开发和定制化需求。两者都有活跃社区和丰富扩展,Django学习曲线平缓,Flask更需自定义配置。选择适合自己的框架,开启编程新篇章。
12 0