探索HTML：从入门到精通Web开发（一）

已于 2023-12-03 21:04:57 修改
阅读量1.3k 收藏 56
点赞数 57
分类专栏： web前端 文章标签： 前端 html 学习
于 2023-10-18 16:37:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75623950/article/details/133881589
版权

前端

一：图片属性

属性名： src
属性值：路径，常用相对路径
路径可以分为以下几种：

同级路径： 直接写图片名 或者./+图片名
下级路径： 写文件夹名字 + 图片名
上级路径： 先到上一文件夹 到上一级目录 …/ 当看到目标文件时再进入再找图片名
属性名：title
属性值：提示文本 当鼠标悬停是才显示的文本

属性名：alt
替换文本 ，当图片不显示时显示的文本

属性名：width height
宽度和高度
只设置一个，另一个会自动调整（不会使比例失调）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body> 
  <img src="./dir.png" alt="错误" title="我是title的效果" width=“20”>

二：音频标签

<!-- 音频标签 ，在页面中·插入音频-->
<audio src="./music.mp3" controls autoplay loop></audio>


src      音频的路径
controls 显示播放的控件 
autoplay 自动播放（部分浏览器不支持）
loop     循环播放

三： 视频标签

 <!-- 视频标签 ，在页面中·插入视频-->
  <video src="./video.mp4" controls loop autoplay muted></video>

src   视频的路径
controls 显示视频播放的控件 
autoplay 自动播放视频（谷歌浏览器可配合muted进行默认播放）
loop     循环播放

四：链接标签

使用场景：点击之后，从一个页面跳转到另一个页面

  <a href="./目标网页.html">超链接</a>

特点：双标签 内容可以包裹内容
如果需要a标签点击之后去指定页面，即需设置a标签的href属性

属性： 
_self 默认值，在当前窗口跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）

<a href="./one.html" target="_blank">html</a>
   <a href="https://www.baidu.com/" target="_blank">baidu</a>

五：列表标签

5.1.无序列表

ul表示无序列表的整体
li表示无序列表的每一项
ul标签中只能放li标签 但是li中可以放其他标签比如p什么的

  <ul>
    <li>123</li>
    <li>321</li>
  </ul>

5.2.有序列表

ol表示有序列表的整体
li表示有序列表的每一项
ol标签中只能放li标签 但是li中可以放其他标签比如p什么的

 <ol>
    <li>jiejie</li>
    <li>xiaojiejie</li>
  </ol>

3.自定义列表

dl表示自定义列表的整体 用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容
dl标签中只能放dd/dt标签 但是dd/dt中可以放其他标签比如p什么的

<dl>
  <dt>
    <dd>123</dd>
  </dt>
</dl>

dd前会默认显示缩进效果

六：表格

基本标签： table 表格整体，可用于包裹多个tr
> tr 表格每行，可以用于包裹td
> td 表格单元格，可用于包裹内容
caption 表格大标题 表示在表格整体大标题，默认在表格整体顶部居中位置显示
th 表格单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

6.1合并单元格

具体步骤如下所示：
1.明确合并哪几个单元格
2.通过左上原则，确保保留谁 删除谁
上下合并 只保留最上的，删除其他
左右合并 只保留最左的，删除其他
3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
代码如下所示：

<table border="1" width="200" height="300">
  <caption>1</caption>
  <tr>
    <th>xioajiejie</th>
    <th>表题</th>
  </tr>
  <tr>
    <td>jiejie</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan="2">jie</td>
   
  </tr>
</table>

如下所示：

表题
xioajiejie1
jiejie2
jie

七：input标签

type 属性值
text 文本框，用于输入单行文本
password 密码框 用于输入密码

radio 单选框 用于多选一
name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked 默认选中

checkbox 多选框 用于多选多
checked 默认选中

file 文件选择 用于之后上传文件
multiple 多文件上传

reset 重置按钮 用于重置，点击之后恢复表单默认值
submit 提交按钮 用于提交，点击之后提交数据给服务器
button 普通按钮，默认无功能，之后配合js添加功能

<form action="">
  action是提交地址
 <input type="text" placeholder="情输入账号">
 <input type="password" placeholder="请输入密码">
 <input type="reset">
</form>

 <input type="radio" name="sex" checked>
 <input type="radio" name="sex" checked>#此时默认选择第二个
 <input type="checkbox" name="sex" checked>
 <input type="file" >
 <input type="file" multiple>
 <input type="submit" value="随心所欲提交">
 <input type="button" value="普通按钮">

button可以做标签，可以做任何功能
 <button> 我是标签</button> 
  <button type="submit">提交按钮</button>
  <button type ="reset">重置按钮</button>

八：select系列

下拉菜单
select标签 下拉菜单整体
option标签 下拉菜单的每一项
selected 下拉菜单默认选中

   <select name="" id="">
    <option value="">北京</option>
    <option selected value="">上海</option>
   </select>

默认显示第一项 option标签

九： 文本域标签

标签名：textarea
可在网页中提供可输入多文本的表单控件

<textarea name="" id="" cols="30" rows="10"></textarea>

十：label标签

常用与绑定内容与表单标签的关系

使用方法一：
使用label标签把内容（文本）包裹起来
在再表单标签上添加id属性
在label标签的for属性中设置对应id属性值

<input type="radio" id="nam"><label for="nam">nam</label>

第二种方法：
直接使用label标签把内容和表单标签一起包裹起来
需要把label标签中的for属性删除即

<label> <input type="radio">wen </label>

十一：语义化标签

做手机的网页常用（有语义化的标签）：

<head>网页头部</head>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

十二：字符实体

空格 用 &nbsp;代替

一个 &nbsp; 代表一个空格，从而可以输出多个空格

结尾

  <h1>文章标题</h1>
  <p>段落标签</p>
  <strong>重要加粗</strong> <b>不重要加粗</b>
  <ins>下划线</ins> <u>下划线</u>
  <em>倾斜</em> <i>倾斜</i>
  <del>删除线</del> <s>删除线</s>

  单标签：
  <br>换行标签
  <hr>分割不同的主题内容的水平线
</body>
</html>

十三：图书推荐

请添加图片描述

《C++从入门到精通（第5版）》从初学者角度出发，以通俗易懂的语言和丰富多彩的实例，详细讲解了C++程序开发需要掌握的知识。本书分为4篇共18章：第1篇是基础知识，包括绪论，数据类型，运算符与表达式，条件判断语句，循环语句，函数，数组、指针和引用，以及构造数据类型；第2篇是核心技术，包括面向对象编程，类和对象，以及继承与派生；第3篇是高级应用，包括模板、标准模板库、RTTI与异常处理、程序调试、文件操作和网络通信；第4篇是项目实战，结合人事考勤管理系统，依照软件项目的开发流程，讲述如何进行实际开发。书中所有知识都结合具体实例进行介绍，涉及的程序代码给出了详细的注释，读者可以轻松领会C++的强大功能，快速提高开发能力。
购书链接京东：购书链接

文章到此结束，欢迎点击下方名片一起交流合作。

洁洁！
关注
  • 57
    点赞
  • 踩
  • 56
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 59
    评论
专栏目录
html从入门到精通（全）
码农研究僧的博客
07-22 4570
目录前言1. 基本标签2. 实体符号3. 表格 前言 本文是一个综合阐述，可看我之前写的一篇文章复习巩固 html标签详细诠释（全） HTML: Hyper Text Markup Language （超文本标记语言） 由大量的标签组成，每一个标签都有开始标签和结束标签（但也有单标签） <!doctype html> <!--根--> <html> <!--头--> <head> <!--网页标题，显示在网页左上角-->
HTML从入门到精通
热门推荐
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
wangluoanquan111的博客
09-05 8818
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
web前端之html从入门到精通
jingjing的博客
08-04 742
HTML是超文本标记语言，由多个标签（元素）组成，标签可以嵌套，为树型结构。 <!Doctype html5> <html> <head> <meta /> <link /> </head> <body> <!--块元素--> <div> <!--行内元素--> <span>hello world</span> </div
HTML零基础入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-08 1930
欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！
sapabap开发从入门到精通
07-22
资源名称：sap abap开发从入门到精通 内容简介：　《SAP ABAP开发从入门到精通》以应用实例的形式，讲解了SAPABAP开发的相关知识点，详细介绍了SAPABAP开发者必须掌握的包与变更传输系统（CTS）、数据类型、数据库...
前端开发学习宝典：从入门到精通的路径规划
最新发布
04-28
前端开发学习宝典：从入门到精通的路径规划 前端开发是现代Web开发的重要组成部分，掌握前端技术对于成为一名优秀的Web开发者至关重要。本文将详细介绍前端开发的学习路线，并提供具体的学习建议和示例。 基础编程...
蜡烛图方法：从入门到精通学习.pdf
11-25
蜡烛图方法：从入门到精通学习.pdf
Python Web开发-Django从入门到精通(高清PDF，薯条老师 )
06-17
django从入门到精通的实战教程，作者是薯条老师大神
《MATLAB从入门到精通教程》PDF文档下载
11-08
《MATLAB从入门到精通教程》PDF文档下载 英文版，PDF格式！ 提示PDF文件阅读方法： PDF格式文件可以在专门的软件（如：Adobe Acrobat、Adobe Reader）中打开，也可以直接拖放到浏览器中打开。
HTML 5 从入门到精通 高清PDF版
03-11
HTML 5 从入门到精通 高清PDF版
HTML 5 从入门到精通 pdf
04-11
HTML 5 简介............................................................................................................................................................15 HTML 5 视频............................................................................................................................................................17 HTML 5 音频............................................................................................................................................................21 HTML 5 Canvas........................................................................................................................................................25 HTML 5 Web 存储....................................................................................................................................................36 HTML 5 Input 类型................................................................................................................................................41 HTML 5 表单元素....................................................................................................................................................51 HTML 5 表单属性....................................................................................................................................................56 HTML 5 参考手册....................................................................................................................................................70 HTML 5 标准属性....................................................................................................................................................79 HTML 5 事件属性....................................................................................................................................................79 HTML 5 标签
HTML+CSS从入门到精通（中文）
10-20
HTML+CSS从入门到精通（中文）
`HTML`入门到精通
weixin_47267628的博客
06-12 292
指是()，后缀必须为或1.文档类型声明：文档类型声明标签：，必须位于文档中的最前面位置，处于标签之前 ，注意：不是一个html标签，它就是文档类型声明标签2.语言种类，表示是英文网站，表示英文，表示中文3.字符集：，注意是：不要写成或1.标题标签单词：的缩写，状况，标题的意思特点：；加粗文字，一个标题独占一行2.段落和换行标签段落：：文本在一个段落中会根据浏览器窗口大小自动换行，段落与段落之间保有空隙换行：，强制换行，是一个单标签3.文本格式化标签：4.盒子标签：和是大盒子，是小盒子5.图像标签：在标签中，
HTML5从入门到精通笔记
斗师——Ace
03-20 2378
添加小程序，兑换各种视频教程/数据资源。 第一章：HTML5新增语法，元素，属性，事件 1.html5语法： 1.1 html是不区分大小写，也不区分大双引号。 1.2 对于具有boolean值得属性，如disabled和readonly等，当值写属性不写值，将属性值设置为属性名或设置为空字符串时，表示为true，如<input disabled /&...
Web前端开发教程
weixin_41135508的博客
05-03 1万+
web前端开发，基于html+css+js,JQuery。
HTML零基础入门视频课程——笔记
weixin_34259232的博客
12-07 270
视频课程链接：http://edu.51cto.com/course/16023.html HTML，主讲：汤小洋 一、HTML简介 1. HTML是什么 ​ HTML：Hyper Text Markup Language超文本标签(标记)语言 ​ 由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2. 作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过...
web前端开发是什么？
程序员生活
01-20 8551
web前端开发 1、web即web系统，是以网站的形式呈现，通过浏览器的访问来实现一定的功能的系统。 2、什么是前端开发？ 前端开发是创建web页面或app等前端界面呈现给用户的过程。通过html、css、js以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户交互界面。 3、现在流行的三大网站有：电商网站(如淘宝、京东)、综合门户网站 （新浪、搜狐）、管理网站（内部管理系统）。 4、什么...
flask web开发从入门到精通 云盘
08-02
《Flask Web开发从入门到精通》是一本介绍如何使用Flask来进行Web开发的书籍。Flask是一个基于Python的轻量级Web框架，它简单易学、灵活且功能强大，适用于各种规模的Web开发项目。 这本书从基础概念开始讲解，详细介绍了Flask的工作原理、核心组件和基本用法。读者可以学习如何搭建一个简单的Flask应用，并通过实例了解路由、模板、表单处理、数据库操作等关键知识点。书中还提供了大量的示例代码和实践项目，帮助读者深入理解Flask的各种功能和技术应用。 同时，《Flask Web开发从入门到精通》也从入门到精通的过程，逐步介绍了如何构建复杂的Web应用。读者可以学习如何优化性能、处理用户认证和授权、实现RESTful API等高级技术。此外，书中还对与其他常用工具如数据库、前端框架的集成等进行了探讨。 云盘是指云存储服务，它通过网络为用户提供存储和备份服务。在网络时代，云盘成为了人们共享和传输文件的重要方式。对于Flask Web开发从入门到精通这样的书籍来说，如果有相关的云盘提供，会方便读者获取书籍的各种资源，如代码示例、实例项目、扩展模块等。 利用云盘存储这些资源，读者可以方便地进行下载、备份和共享。此外，云盘还提供了多种访问方式，可以在不同的设备上随时随地进行访问，方便读者在学习过程中的查阅和使用。 总而言之，《Flask Web开发从入门到精通》是一本全面介绍Flask框架的书籍，通过学习这本书，读者可以掌握Flask的基础知识和高级应用技巧。如果提供相应的云盘服务，将对读者的学习和使用带来更多的便利。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 59
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洁洁！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值