HTML简单学习记录

最新推荐文章于 2023-01-12 15:14:08 发布
最新推荐文章于 2023-01-12 15:14:08 发布
阅读量91 收藏
点赞数
分类专栏： 前端 html 文章标签： android 百度 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67401499/article/details/123253764
版权
前端 同时被 2 个专栏收录
31 篇文章 3 订阅
订阅专栏
html
31 篇文章 0 订阅
订阅专栏

文章目录

HTML简单学习记录

简介

HTML5（超文本标记语言）是 Hyper Text Markup Language 5 的缩写，超文本包括文字、图片、音频、视频、动画等等

HTML基本结构

在这里插入图片描述

<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/>意为用/来关闭空元素

  • DOCTYPE声明：告诉浏览器我们要使用什么规范
  • <title>标签
  • <meta>标签：描述性标签，用来描述网站的信息，一般用来做SEO（搜索引擎优化）

网页基本标签

  • 标题标签：<h1>一级标签</h1>、<h2>二级标签</h2>…
  • 段落标签：<p></p>
  • 换行标签：<br/>
  • 水平线标签：<hr/>
  • 字体样式标签：
    粗体：<strong>i love you</strong>
    斜体：<em>i love you</em>
  • 注释和特殊符号：
    注释：<!--注释 -->
    特殊符号：
    空格：&nbsp;
    大于号：&gt;
    小于号：&lt;
    版权符号：&copy;
  • 特殊符号记忆方式：
    以“&”开头，以“;”结尾，用“&+一个字母”可以预览特殊符号：
    在这里插入图片描述

图像标签

<img src="path" alt="text" title="text" width="x" height="y" />

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >

</body>
</html>

其中：

  • "…/"指上级目录
  • src与alt是必填项，其他选填
链接标签

超链接标签：<a></a>

<a href="path" target="目标窗口位置">链接文本或图像</a>

在这里插入图片描述

其中：
href是必填项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://www.baidu.com" target="_blank">点击我在新窗口跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我在当前窗口跳转到百度</a>

<br>
<!--头像超链接-->
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttp%3A%2F%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
    <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
</a>

</body>
</html>

在这里插入图片描述

其中：

  • target="_blank"表示在新窗口跳转页面；target="_self"表示在当前窗口跳转页面

超链接

锚链接

在这里插入图片描述
点击跳转到顶部

其中：

  • name属性已经被淘汰（<a name="top">顶部</a>），当前流行用top属性（<a top="top">顶部</a>）
    锚链接可以用来跳转到页面指定位置
功能性链接

如邮箱链接：

<a href="mailto:邮箱地址">点击联系我</a>

行内元素和块元素

  • 块元素
    无论内容多少，该元素独占一行 (p、h1-h6…)
  • 行内元素
    内容撑开宽度，左右都是行内元素的可以在排在一行( a . strong . em …)

列表

列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展现出来，以便浏览者能更快捷地获得相应的信息
列表的分类：

  • 有序列表：

    1. Java
    2. python
    3. C/C++

  • 无序列表

    • Java
    • python
    • C/C++

  • 自定义列表

    学科 
    <dd>Java</dd>
<dd>python</dd>

表格

简单通用、结构稳定
基本结构：

  • 单元格

  • 行

  • 列

  • 跨行

  • 跨列

    表格学习
    1
    2-12-22-32-4
    3-13-23-3

其中：

  • <table></table>：创建表格
  • <tr></tr>：创建行
  • <td></td>：创建列
  • colspan：跨行
  • rowspan：跨列

视频和音频

视频
<video src="视频资源路径" controls autoplay></video>
音频
<audio src="音频资源路径" controls autoplay></video>

其中：

  • controls：控制选项，设置视频可播放
  • autoplay：自动播放

页面的简单布局

元素名

描述

header

标题头部区域的内容（用于页面或页面中的一块区域）

footer

标记脚部区域的内容（用于整个页面或页面的一块区域）

section

web页面中的一块独立区域

article

独立的文章内容

aside

相关内容或应用（常用于侧边栏）

nav

导航类辅助内容

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

在这里插入图片描述

表单语法

在这里插入图片描述

其中：

  • action：表单提交的位置，可以是网站，也可以是一个请求处理地址
  • method：post，get 提交方式
    get方式提交可以在url中看到提交的信息，高效但不安全
    post方式提交在url中无法看到提交的信息，比较安全，也用来传输大文件
表单元素格式

属性

说明

type

指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text

name

指定表单元素的名称

value

元素的初始值。type为radio时必须指定一个值

size

指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

maxlength

type为text或password时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否为被选中

单选框
<!--
value：单选框的值
name：表示组 
-->
<p>性别：
	<input type="radio" value="boy" name="sex"/>男
	<input type="radio" value="girl" name="sex"/>女
</p>
多选框
<input type="checkbox"   ...>
按钮
  • input type=”button“ ：普通按钮
  • input type=”image“ ：图像按钮
  • input type=”submit“ ：提交按钮
  • input type=”reset“ ：重置按钮（清空表单）
下拉框
<!-- selected 默认选择-->
<select name="...">
	<option value="选项的值">1</option>
	<option value="选项的值">2</option>
	<option value="选项的值" selected>3</option>
	<option value="选项的值">4</option>
</selcet>
文本域
<textarea name="..." cols="10" rows="50">文本内容</textarea>
文件域
<input type="file" name="...">
邮件验证
<input type="email" name="...">

验证比较初级

url验证
<input type="url" name="...">

验证比较初级

数字验证
<input type="number" name="..." max="100" min="0" step="1">
滑块（音量）
<input type="range" name="..." max="100" min="0" step="2">
搜索框
<input type="search" name="...">

表单的应用

  • 隐藏域
    如：

    密码：

  • 只读
    如：

    名字：

  • 禁用
    如：

    性别： 男 女

表单的初级验证

作用：

  • 减轻服务器压力
  • 保证安全性

常用方式：

  • placeholder
  • required
  • pattern
m0_67401499
关注
专栏目录
HTML的学习记录
m0_60518344的博客
08-05 588
HTML不是一种编程语言，而是一种标记语言（别人问学过什么编程语言的时候千万不要说HTML！！） web的第一门编程语言：Javascript HTML文件的后缀名：.html或者.htm 现在大家都在用的是2014年10月诞生的HTML5 HTML的特点： 1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 2.可拓展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。 3.平台无关性：超文本标记语言可以使用在广泛的平台上。 4.通用性：它允许网页制作人建立文本与图片
html学习记录
秀秀的奇妙旅行
10-15 158
前言：
HTML自学笔记
lee_goi的博客
03-02 654
文章目录一、什么是HTML二、HTML文档结构:fire: HTML元素（elements）:fire: 文本格式:fire: 超链接:fire: 图片及文件路径:fire: 表格:fire: 列表:fire:表单 Form:fire: 其它 一、什么是HTML HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。 “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要
JavaWeb学习笔记，包括简单的HTML、CSS、JS.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
前端学习笔记，做一个简单的网站-html，学习代码
06-20
前端学习笔记，做一个简单的网站-html
前端学习笔记，做一个简单的网站，模仿阿里网站.html，学习代码
最新发布
06-20
这篇"前端学习笔记，做一个简单的网站，模仿阿里网站.html"的文档，旨在通过实际操作来帮助初学者理解和掌握这些基础知识。 HTML（HyperText Markup Language）是网页内容的结构化标记语言，用于定义网页的基本元素...
HTML学习记录
m0_63064861的博客
08-28 159
HTML学习
HTML(学习记录)
qq_43096062的博客
09-24 251
HTML 前端脚本，浏览器能识别的脚本 html 标签库 （积木，界面太难看，无法定位） 伪xml规范 1.只有一个根节点 2.每个节点(多个子节点 多个属性 内容) 3.每个节点 （开节点 闭节点） （1） 标签框架（html，head，body） head 非显示，设置性标签 body 文档显示内容 按html5标准处理 （2）标签类型 基本标签 href 目标地址 targe...
HTML学习记录（1）
MrEnigma的博客
03-14 353
1、HTML 全称：Hyper Text Makeup Language–超文本标记语言 文本:普通txt文件，无法保存图片，视频，表格等 超文本:比较厉害的文件，可以保存图片，视频，表格等 W3C World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括 1.结构化标准语言（XHTML 、XML） 2.表现标准语言（CSS
html学习记录(1)
cjmdyl的博客
03-12 189
1.基本框架和基本标签 前言:由于学校不开学在家摆太久了()所以开始学习 <!DOCTYPE html><!--基本框架--> <html><!--总标签--> <head><!--网页头部--> <title>cjmdyl</title><!--网页标题--> </head> <body><!--网页主体-->
Html学习记录
m0_51054563的博客
07-30 463
HTML (Hyper Text Markup Language) —— 超文本标记语言 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。 HTML 文档由嵌套的 HTML 元素构成。 HTML 提示：使用小写属性 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，
HTML基础学习记录
qq_51724176的博客
01-24 782
HTML基础学习记录一、HTML的学习1.HTML是什么 一、HTML的学习 1.HTML是什么 HTML是HyperText Markup Language的简写，即超文本标记语言。（超文本: 普通文本只能显示文字,超文本除了显示基本文字之外还能显示图片,视频,音频,文件特殊效果等；标记是HTML的组成元素） HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 ...
HTML学习笔记(全)
weixin_63676550的博客
01-12 5978
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
HTML学习笔记本精粹
资源摘要信息:"学习HTML的笔记本.zip" HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。HTML的学习资源文件被压缩打包成"学习HTML的笔记本.zip"，该文件多次重复提及学习HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值