编程基础—HTML—学习笔记

已于 2023-03-19 21:20:07 修改
阅读量101 收藏
点赞数
分类专栏： 编程基础 文章标签： html 前端
于 2023-03-19 21:18:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46965422/article/details/129656059
版权

编程基础—HTML—学习笔记

HTML的基本结构

	<!--网页头部-->
    <head>
		<title>网页的标题</title>
	</head>
	<!--网页的身体-->
    <body>
		网页所展示的内容
	</body>

示例：

<!DOCTYPE htm1>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1"><title＞第一个网页＜/title>
	</head>
	<body>
		Hello world!!!
    </body>
</htm1>

在这里插入图片描述

HTML的书写规范

  1. HTML标签名和属性名必须小写
  2. 属性值必须用引号包裹起来（单双引号都行）
  3. 标签必须正确的嵌套
  4. 必须写上正确的文档类型
  5. 必须要有正确的缩进规范
  6. 标签必须正确的关闭（标签存在两种：双标签，单标签，但是结束的标记都是反斜杠 /）

常用标签

标题标签

h1-h6

数字越大标题越小，自动换行，自动加粗

示例：

<!--标题标签-->
<h1 align="center">标题</h1>
<h2 align="right">标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

这里面涉及一个属性：align 排非版对应的属性值： left （默认）| center | right
在这里插入图片描述

段落标签

p

自动换行，有默认的行距

示例：

<!--段落标签-->
<p>我是一个段落</p>
<p>我是一个段落</p>

在这里插入图片描述

换行标签

br
专门用于网页的换行

示例：

HTML
<br/>
CSS
<br/>
JavaScript

在这里插入图片描述

水平分割线

hr

示例：

<!--水平分割线-->
HTMl
<hr/>
CSS
<hr/>
JavaScript

在这里插入图片描述

字体样式标签

加粗：strong / b 斜体：em / i

示例：

<!--字体样式标签-->
</p>我很喜欢<strong><em>rose</em></strong></p>
</p>我很喜欢<b><i>jack</i></b></p>

strong / em 和 b / i 的区别：

​ strong / em ：除了有对应的效果以外，还有语气上的强调，会被搜索引擎爬取

​ b / i ：只有对应的效果
在这里插入图片描述

特殊符号

符号对应的实体代码
>&gt;
<&lt;
"&quot;
空格&nbsp;
版权&copy;

示例：

<!--特殊符号-->
&lt;hr/&gt;
我喜欢&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML
<br/>
&lt;h1 align=&quot;center&quot;/&gt;
<br/>
版权&copy;2023

在这里插入图片描述

图片标签

通常情况下，看到的是：

<img src="图片的地址"/>

地址的类型：

  1. 相对路径（动态的）需要一个参照物，在程序里面参照物通常指的是文件本身。在文件系统中：.／表示同级，..／表示上一级，/表示文件系统中的分隔符
  2. 绝对路径（固定的）

相关的属性：

​ src：图片地址

​ alt：图片错误的时候（显示不出来的时候）的提示信息

​ title：图片的标题

​ width：宽度

​ height：高度

<img src="" title="这是一张图片" alt="这是一张图片" width="500px" height="400px">

在这里插入图片描述

超链接

正常情况：

<a href="网页的地址">文字信息</a>

相关属性：

​ href：网页地址，注意：如果是外站，需要加上：http ://

​ target：目标，指的是窗口的目标，通常属性值是：_ blank ，表示新开一个窗口来显示网页示

示例：

<a href="http://www.baidu.com" target="_ blank">百度一下</a>

在这里插入图片描述

锚点语法：

核心关键属性是：name属性

锚点的起始：

<a href="#first">第一章</a><br/>

锚点的结束：

<h2 align="center"><a name="first">第一章</a></h2>

跨页面的锚点，原理是一致的，只是地址发生了变化：

<a href="./demo04.html#four" target="_ blank">第四章</a><br/>

列表

有序列表
<ol>
	<li>列表的内容</li>
</o1>

示例：

<ol type="1">
	<li>唱歌</li>
	<li>跳舞</li>
	<li>RAP</li>
	<li>篮球</li>
</ol>

所有的内容必须放在 li 标签中

type 属性表示的是列表的序号的样式：1（默认）| a / A |i / I

有序列表用的相对来说比较少
在这里插入图片描述

无序列表
<u1>
	<li>列表的内容</li>
</u1>

示例：

<!--无序列表-->
<ul type="disc">
	<li type="circle">JAVA</li>
	<li type="disc">PHP</li>
	<li type="square">C#</li>
</u1>

所有的内容必须放在 li 标签中

type 属性表示的是列表的的样式： circle （空心圆）| disc （实心圆）| square （方块）

无序列表用的最多
在这里插入图片描述

自定义列表
<dl>
	<dt>标题</dt>
	<dd>内容</dd>
	<dd>内容</dd>
    
	<dt>标题</dt>
	<dd>内容</dd>
	<dd>内容</dd>
</dl>

示例：

<!--自定义列表-->
<dl>
	<dt>语言</dt>
	<dd>Java</dd>
	<dd>PHP</dd>
	<dd>Python</dd>
	<dt>数据库</dt>
	<dd>MySQL</dd>
	<dd>Oracle</dd>
	<dd>MSSQL</dd>
</dl>

在这里插入图片描述

表格标签

表格标签是一种复合标签

由：table，tr，td，th，thead，tbody组合

表格是由行和列组成，行和列交叉的地方就是单元格

<table>
	<tr>
		<td>数据</td>
        <td>数据</td>
    </tr>
	<tr>
		<td>数据</td>
		<td>数据</td>
	</tr>
</table>

基本的示例：

<!--班级信息表-->
<table border="1px" width="800px" align="center">
	<!--表头-->
	<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
		<td>地址</td>
	</tr>
	<!--具体的数据-->
	<tr>
		<td>jack</td>
		<td>boy</td>
		<td>20</td>
		<td>**</td>
	</tr>
	<tr>
		<td>rose</td>
		<td>girl</td>
		<td>18</td>
		<td>**</td>
	</tr>
</table>

在这里插入图片描述

复杂的示例：

<!--班级信息表-->
<table border="1px" width="800px" align="center" bgcolor="#ffc0cb">
	<!--表头-->
	<tr height="70px" bgcolor="gray">
		<th width="100px">姓名</th><th>性别</th>
		<th>年龄</th>
		<th>地址</th>
	</tr>
	<!--具体的数据-->
	<tr height="50px" align="center">
		<td> jack</td>
		<td> boy</td>
		<td>20</td>
		<td>**</td>
	</tr>
	<tr height="50px" align =" center ">
		<td>rose</td>
		<td>girl</td>
		<td>18</td>
		<td align="right" valign="bottom" bgcolor="#adff2f">**</td>
	</tr>
</table>

在这里插入图片描述

表格相关的属性：

table :

​ border ：边框

​ width ：宽度

​ height ：高度

​ align ：整个表格排版 left | center | right

​ bgcolor ：背景色，作用于整个表格

tr ：行

​ height ：行高

​ bgcolor ：作用于一整行的背景色

​ align ：作用于一整行的内容的水平排版 left | center | right

​ valign ：作用于一整行的内容的垂直排版 top | middle | bottom

td ：列

​ width ：列宽

​ bgcolor ：作用于单元格的背景色

​ align ：作用于单元格的内容的水平排版 left | center | right

​ valign ：作用于单元格的内容的垂直排版 top | middle | bottom

行列合并：都作用于 td / th

​ 列合并： colspan =“n”，n 表示合并几列

​ 行合并： rowspan =“n”，n 表示合并几行，保留的是第一个 td

示例：

<!--班级信息表-->
<table border="1px" width="800px" align="center" cellspacing="0px" celpadding="0px">
	<!--表头-->
	<tr height="70px" bgcolor="gray">
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th colspan="2">地址</th>
	</tr>
	<!--具体的数据-->
	<tr height="50px" align="center">
		<td>jack</td>
		<td>boy</td>
		<td>20</td>
		<td rowspan="2">**</td>
		<td>**</td>
	</tr>
	<tr height="50px" align="center">
		<td>rose</td>
		<td>girl</td>
		<td>18</td>
        
		<td>**</td>
	</tr>
</table>

在这里插入图片描述

表单

表单涉及的标签比较多。主要有下面几种：

form

<form action="数据提交的地址" method="数据提交的方法">
	表单控件应该放在 form 标签之间
</form>

input：输入框

<input type="控件类型" name="提交到后端的数据标识" value="控件的值"/> 
type="text"：文本输入框
type="password"：密码输入框
type="number"：数字输入框
type="radio"：单选框	选中 checked 
type="checkbox"：复选框	选中 checked 
type="file":文件域
type="submit"：提交按钮
type="reset"：重置按钮
type="image"：图片按钮
type="button"：普通按钮
type="hidden"：隐藏域

select ：下拉列表

<select name="提交到后端的数据标识">
	<option value="列表项的值">列表项文字信息</option>
    <!--选中项：selected-->
	<option value="列表项的值" selected>列表项文字信息</option>
</select>

textarea：文本域

<textarea name="提交到后端的数据标识" cols="列宽" rows="行高"></textarea>

button：按钮

<button>
	按钮的名字
</button>

button有两种体现形式：

  1. 放在 form 标签中：有提交功能
  2. 没有放在 from 标签中：就是普通按钮

示例：

<!--注册-->
	<form action="#" method="get">
		<!--文本输入框-->
		<label>用户姓名：</label><input type="text" name="userName">
		<br/><br/>
		<!--密码输入框-->
		<label>用户密码：</label><input type="password" name="userPwd">
    	<br/><br/>
		<!--数字输入框-->
		<label>用户年龄：</label><input type="number" name="userAge">
   		<br/><br/>
		<label>用户性别：</label>
    	<!-﹣单选框﹣->
		<input type="radio" name="userGender" value="男" checked> 男
        <input type="radio" name="userGender" value="女"> 女
		<br/><br/>
		<label>用户爱好：</label>
        <!--复选框-->
		<input type="checkbox" name="like[]" value="看书">看书
		<input type="checkbox" name="like[]" value="看电影">看电影
        <input type="checkbox" name="1ike[]" value="唱歌">唱歌
		<input type="checkbox" name="like[]" value="跳舞" checked>跳舞
        <input type="checkbox" name="1ike[]" value="篮球">篮球
		<input type="checkbox" name="like[]" value="RAP" checked>RAP 
        <br/><br/>
		<label>用户生日：</label>
		<!--下拉列表-->
        <select name="year">
			<option value="2000">2000</option>
			<option value="2001">2001</option>
			<option value="2002" selected>2002</option>
		</select>
        年
		<select name="month">
			<option value="1">1</option>
			<option value="2" selected>2</option>
            <option value="3">3</option>
        </select>
		月
		<select name="day">
			<option value="1">1</option >
			<option value="2">2</option >
			<option value="3" selected>3</option>
		</select>
		日
		<br/><br/>
		<!--文件上传组件-->
		<label>用户头像：</label><input type="file" accept="image /*" name="userHeader">
        <br/><br/>
		<!--文本域-->
		<label>用户简介：</label><br/>
		<textarea name="userInfo" cols="60" rows="5"></textarea>
		<br/><br/>
		<!--按钮-->
        <!--提交按钮-->
		<input type="submit" value="注册">
        <!--重置按钮-->
		<input type="reset" value="重置">
		<!--图片按钮：提交功能-->
		<input type="image" src="./imgs/reg.png"/>
        <!--按钮：提交功能-->
		<button>按钮</button>
		<!--普通按钮-->
		<input type="button" value="发送短信">
	</form>

在这里插入图片描述

提示信息属性：

placeholder="提示信息的文本"

只读属性：

readonly：只读

不可用属性：

disabled：不可用
大头涂涂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5学习笔记
m0_61721166的博客
03-08 8928
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
Jquery 基础学习笔记之文档处理
10-29
JQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在JQuery中，文档处理是其核心功能之一...在实际编程中，结合使用这些方法可以实现丰富的用户界面和流畅的用户体验。
【CUDA编程系列】CUDA编程基本入门学习笔记
sazass的博客
08-20 2864
参考博客： https://www.cnblogs.com/skyfsm/p/9673960.html 1.GPU特点 核心很多； 规则数据结构，高度统一； 相互无依赖的大规模数据； 不需要被打断的纯净的计算环境； 可预测存储模式； 在并行化计算表现极佳； 非常适合处理图像领域的计算，图像在计算机中的表现形式是矩阵，而很多矩阵运算可以实现并行计算； 一般，串行部分跑CPU，并行部分跑GPU，异构计算； 2.CUDA线程模型 从小到大： **1.Thread：**线程，并行的基本单位 **2.Thread B
编程笔记 GOLANG基础 001 为什么要学习Go语言
明月看潮生的博客
12-23 1270
Go语言是由Google开发的一种静态类型、编译型、并发安全的编程语言。是本人推荐的首学编程语言。
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
vue2 学习笔记（保姆系列教程）
quokka56的博客
02-21 2317
每天学习30分钟，vue2 入门级保姆教程，完结撒花啦，一起共同进步喽
网页脚本编程学习笔记
zjh2883的博客
09-08 2295
网页脚本编程学习笔记 1、配置 此处以火狐浏览器为例： 1）、 打开web控制台，调出查看器（用于查看该网页的HTML源代码）、控制台（编写控制代码，可以实时操作，显示运行结果、报错，类似于MATLAB的命令框）。 2）、 先在控制台学习各函数的功能、用法，然后在此基础上编写脚本。（初学者） 2、获取需要的网页源代码标签 1)、标签的格式： <标签名, id=“id_name”, class=“class_name”, name=“myname”, 其他属性=“属性值”></标签名&gt
JAVA基础学习大全（笔记）
热门推荐
Frank---7的博客
12-22 9万+
JAVASE和JAVAEE的区别 JDK的安装路径 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-perPRPgq-1608641067105)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201222001641906.png)] 卸载和安装JDK [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYnXvbAn-1608641067107)(C:\Users
Javascript入门学习笔记
weixin_61370021的博客
04-27 4608
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
js学习笔记
angel_791的博客
06-11 4039
JavaScript学习笔记 前端学习
QML学习笔记总结
洪源兄
02-04 9540
这个博客是我记录我自学Qt5 的QML语言的时候一些总结和个人理解概述，也是这个专栏的置顶文章，主要的帮助链接基本在这个专栏内部，主要的参考资料就是Qt 官方的帮助文档，这个官方的帮助文档相当详细，总的来说，QML 学习的成本不大，学习入门也很简单，语法也很清晰，QML真的更加快速的描述这个界面相关的构建方法。这个博客也会持续更新，也作为学习阶段性总结的一个监督方式吧。
java学习笔记markdown
03-12
通过学习这份Markdown版的Java学习笔记，不仅可以掌握Java编程的基础，还能了解到一些高级话题，为成为熟练的Java开发者打下坚实基础。同时，Markdown格式使得笔记易于编辑和分享，是个人学习和团队协作的理想选择。
HTML学习笔记.pdf
11-09
HTML 不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。HTML 文档包含了 HTML 标签及文本内容。 HTML 文件的基本架构： * <!DOCTYPE html> 声明为 HTML5 ...
HTML+CSS+JS学习笔记
10-25
HTML（HyperText Markup Language）是构建网页...学习HTML、CSS和JS是前端开发的基础，它们结合使用可以创建功能丰富、交互性强的网页。了解这些基本概念和标签后，可以通过实践项目来加深理解，逐步掌握前端开发技能。
html css js全套学习笔记＋举例
04-16
HTML、CSS和JavaScript是构建网页和交互式用户体验的三大核心技术，是前端开发的基础。下面将对这三者进行详尽的介绍。 HTML（HyperText Markup Language）是网页内容的结构化语言，它定义了网页的基本元素和布局。...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3330
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
【HTML】iframe
小秀的博客
07-24 351
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1020
iframe 预览邮件 + 打印邮件 + 模拟滚动条
初识HTML文件，创建自己的第一个网页！
2301_79959126的博客
07-24 934
本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。
Java编程基础与实战笔记
本课堂笔记详细梳理了Java的基础知识，覆盖了从编程基础到高级特性的一系列主题，为学习者提供了一个全面的指南。 在第一章“编程基础”中，讲解了Java的特性，包括它的简单性、面向对象的设计、可移植性（即“一次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值