三天速成前端——HTML

最新推荐文章于 2024-09-20 13:42:43 发布
最新推荐文章于 2024-09-20 13:42:43 发布
阅读量232 收藏 5
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43772228/article/details/113754589
版权

HTML

WC3标准：

  1. 结构化标准语言（HTML、XML）
  2. 表现标准语言（CSS）
  3. 行为标准（DOM、JAVAScript）

基本结构

<html>
	<!-- 头部 -->
	<head>
		<!-- meta描述标签，用来描述我们网页的一些信息 -->
		<!-- 一般用来写SEU -->
		<meta charset="utf-8">
		<meta names="keywords" content="HTML" />
		<meta names="description" content="HTML" />
		<title></title>
	</head>
	<!-- 主体 -->
	<body>
		aaa
	</body>
</html>

基本标签

		<!--标题标签-->
		<h1>一级标题标签</h1>
		<h2>二级标题标签</h2>
		<!--水平标签-->
		<hr />
		<!--段落标签-->
		<p>两只老虎跑得快   
		跑得快</p>
		<!--换行标签-->
		两只老虎跑得快   <br />
		跑得快
		<!--粗体，斜体-->
		<strong>粗体</strong>
		<em>斜体</em>
		<!--特殊符号-->
		空&nbsp;&nbsp;&nbsp;格
		版权所有&copy;

图像标签

		<!--推荐相对路径 src alt 必填-->
		<img src="resource/img/640.webp" alt="基金投资" title="悬停文字"
			width="500" height="300"/>

链接

		<!--链接标签  href必填
			target：窗口在哪打开
		-->
		<a href="第一个网页.html" target="_blank">点击我跳转到页面1</a>
		<a href="https://www.baidu.com">跳转到百度</a>

		<!--使用name作为标记-->
		<a name="top">顶部</a>
		....
		....
		<!--锚链接，#标记名字-->
		<a href="#top">回到顶部</a>

        <!--功能性链接-->
        <a href="m:1361106292@qq.com">联系我</a>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
            <img border="0" src="http://wpa.qq.com/pa?p=2::53" 
            alt="加我推广小电影" title="加我推广小电影"/></a>

块标签和行标签

  1. 块标签：独自占领一行、可以进行宽高的数值的设定；
  2. 行标签：在一行内显示、不可以进行宽高的数值设定；

列表

		<!--有序列表-->
		<ol>
			<li>java</li>
			<li>python</li>
			<li>javascript</li>
			<li>c++</li>
		</ol>
		
		<!--无序列表-->
		<ul>
			<li>java</li>
			<li>python</li>
			<li>javascript</li>
			<li>c++</li>
		</ul>	
	
	<!--自定义列表
		常用于公司网站底部
	-->
	<dl>
		<dt>列表标题</dt>
		
		<dd>java</dd>
		<dd>linux</dd>
		<dd>c</dd>
		<dd>python</dd>
		
		<dt>列表标题2</dt>
		
		<dd>java</dd>
		<dd>linux</dd>
		<dd>c</dd>
		<dd>python</dd>
	</dl>

表格

		<!--表格table
			线框粗细 border 
			行 tr
			列 td
		-->
		<table border="1px">
			<tr>
				<!--colspan实现跨列-->
				<td colspan="4">1-1</td>
			</tr>
			<tr>
				<!--rowspan实现跨行-->
				<td rowspan="2">2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<td>3-2</td>
				<td>3-3</td>
				<td>3-4</td>
			</tr>
		</table>

音频视频

		<!--音频和视频
			controls 控制开关
			autoplay 打开网页自动播放
		-->
		<video src="../resource/vedio/纸牌屋.mkv" controls autoplay"> </video>

页面结构

img

内联框架

	<!--iframe内联框架：在网页中打开另一个网页-->
	<iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe>
	
	<iframe src="" name="hello"  width="1000px" height="800px"></iframe>
	<a href="第一个网页.html" target="hello">点击内联显示第一个网页.html</a>

表单form

post和get

		<!--表单
			action：表单提交的位置，可以是网站也可以是请求处理
			method：post、get 提交方式
			get：可以在URL中看到提交的信息，高效
			post：可以传输大文件，安全
		-->
		<form action="第一个网页.html" method="get">
			
			账号：<input type="text" name="username"/>
			密码：<input type="password" name="password"/>
			<p>
				<input type="submit" />
				<input type="reset" />
			</p>
		</form>

文本框&单选框&多选框input

			<!--文本框  type="text"
				name 表单调用的名字
				value 默认填入框内的内容
				maxlength 最大输入字符个数
				size 文本框长度
				-->
			账号：<input type="text" name="username" value="默认用户名" 
				maxlength="8" size="30"/>
			密码：<input type="password" name="password"/>
			<!--单选框  type="radio"
				value 单选框的值
				name="sex" 放到同一个组中
				-->
			<p>性别：
				<input type="radio" value="boy" name="sex"/>男
				<input type="radio" value="girl" name="sex"/>女
			</p>

			<p>爱好：
				<input type="checkbox" value="sleep" name="hobby" /> 睡觉
				<input type="checkbox" value="game" name="hobby" /> 游戏
				<input type="checkbox" value="code" name="hobby" /> 编码
			</p>

按钮

			<!--按钮-->
			<p>按钮：
				<input type="button" name="bt" value="点击变长"/>
				<input type="image" src="resource/img/640.webp" />
			</p>
			<!--提交和清空按钮-->
			<p>
				<input type="submit" />
				<input type="reset" value="清空表单"/>
			</p>

下拉框select

			<!--下拉框
				seleted默认选中
			-->
			<p>国家：
				<select name="country">
					<option value="china">中国</option>
					<option value="eth" selected>瑞士</option>
					<option value="usa">美国</option>
				</select>
			</p>

文本框&文件域

			<!--文本域-->
			<p>反馈：
				<textarea name="textarea" rows="10" cols="50">text</textarea>
			</p>
			<!--文件域
				所有input标签都需要name属性，kv对才能获取值
			-->
			<p>
				<input type="file" name="files" />
				<input type="button" value="上传" name="upload" />
			</p>

input验证&滑块&搜索

			<!--邮件验证-->
			<p>邮箱：
				<input type="email" name="email" />
			</p>
			<!--url验证-->
			<p>URL：
				<input type="url" name="url" />
			</p>
			<!--数字验证-->
			<p>数字：
				<input type="number" name="number" max="100" min="10" step="1"/>
			</p>
			
			<!--滑块-->
			<p>音量
				<input type="range" name="voice" min="0" max="100" step="2"/>
			</p>
			
			<!--搜索-->
			<p>搜索
				<input type="search" name="search" />
			</p>

标签

hidden隐藏（用于提交一个默认值）、disabled禁用、readonly只读

		密码：<input type="password" name="password" value="123" hidden/>

			<!--增强鼠标可用性-->
			<p>
				<label for="mark">你点我试试</label>
				<input type="text" id="mark" />
			</p>

表单初级验证

为了减轻服务器压力

		placeholder="请输入用户名"   <!--输入框中，提示信息-->
        required 非空判断
        pattern 正则表达判断
        <!--pattern属性 脚本之家查找正则表达式-->
		<p>自定义邮箱：
			<input type="text" name="diymail"
				pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
		</p>
Carmine逸
关注
专栏目录
三天速成前端
weixin_42175197的博客
06-26 1435
第一天 下载vscode 安装插件Live Server 新建文件 记住12个标签 html、title、body、head、p、em、s、br、botton、h1—h6 、ul、oi、li 引入CSS标签style，selector、property、value color background font-family boder:none\ 圆角： border:2px sol...
记录自己三天速成django+html制作国内疫情可视化平台的过程（二）
qq_53500716的博客
06-22 1691
经过（一）中的操作，我们已经将登录/注册的功能基本实现。下面就是设计可视化页面了，一共会画8张图，我初步的设计是这样的： 分成8个区域，每个区域放一张图这里同样也会用到我们之前提到的后端给前端传数据功能，由于摆烂不想写sql语句，所以借鉴了 大佬（点击跳转原帖）的sql语句思路。 在utils下建立一个sqldata.py，学过一点pymysql的人应该都看的懂 然后将这个类在views中调用 写上可视化页面对应的函数，将这些死数据都丢给前端（同样也别忘记在urls中添加） 3.3 echarts 可视
三天速成前端——JavaScript
weixin_43772228的博客
02-13 1020
JavaScript JS是一门世界上最流行的类型脚本语言，源代码在发往客户端运行之前不需经过编译。最新版本es6，但大部分浏览器还停留在支持es5上！ ​ JQuery：一个JS的方法库，可以直接调用 ​ 三大框架：Angular、React、Vue（模块化+Dom） 一个合格的后端人员，一定要精通JavaScript 快速入门 <!--script标签内，写JS代码--> <script> alert("hello world") </script>
三天学完HTML基础（三）
RoddyLD的博客
12-12 153
三天学完HTML基础（三）表单标签表单的作用表单的组成表单的属性表单的控件关联标签（label）文本域 （textarea）下拉菜单 （select）按钮标签（button）浮动框架(iframe)跑马灯标签(marquee)无语义标签 表单标签 表单的作用 用于 显示、收集 用户信息 ，并且提交给服务器 表单的组成 1.表单元素 -------将信息提交给服务器 2.表单控件 --------负责接收用户的数据 表单提交： 点了提交按钮就会跳转到新的页面 form 代表的就是一个表单元素 表单的属性 a
前端基础之HTML入门速成（简单的标签学习）
Java小萧博客
03-11 625
昨天有粉丝私信我，说我分享的哪些教程好多都比较抽象，代码也看不懂，还有电子书，也不知道从哪个开始看起，觉得很迷茫。 那么今天工作之余，我自己整理了一些比较简单的前端入门代码，主要是HTML的标签，希望帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。 一. 最常见的网页结构 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>开始HTML</ti
前端框架的速成
zxcvb0825的博客
01-14 343
但关键的是，社区在哪里，心中的社区在哪里，如何去找问题，解决问题的方向是如何的，这才是我们需要不断的去强化，锻炼的能力，持续的跟进是要求我们时刻关注框架的动态的新闻，保持对新技术的一个敏感度，随时做好升级的准备。（1）首先：基础就是基石，我们的基石要非常的巩固，所以不管学习那个框架，javascript都是我们的一个立足之本，不要只追逐新潮，扎实的javascript基础会让我们事半功倍。实践才是真实演练，从简单的项目入手逐渐的升级难度，这样才能够在实际的战斗中磨练出过硬的技能。
7天速成Springboot前后端分离项目——01
与其终的知识小窝
07-21 1037
10天速成前加粗样式后端分离项目——01 一、介绍项目结构 本项目为前后端分离项目： 前端: html+css+js+jquery+vue+Ajax， 后端: SpringBoot+Spring+SpringMVC+Mybatis+ Lombok+Mysql 二、开始前步骤—框架搭建 前端：Hbuilder 后台：IDEA 2018 数据库：navicat mysql：5.6.24 jdk：1.8 Maven:3.6.2 三、导入Lombok 方式有两种， 1、File–》settin
四天带你快速前端入门
Wiliam的博客
06-04 955
Day1 什么是前端，前端技术的应用 前端就是数据的呈现 了解代码的编写软件vs code。 vs code包含Emmet，所以可以快捷的完成很多操作 ！ 快速生成html基础结构 lorem+数字 快速生成指定值的随机单词 前端的三驾马车——HTML,CSS,JS HTML——超文本标记语言 ，负责网页的结构 CSS——层叠样式表，负责网页的格式 JS ——负责网页的效果，JavaScript CTRL+/——快速注释 指令*数量——快速执行多个重复命令 HTML包含哪些元素 开始标记、结束标记、元素
HTML CSS游戏官网网页模板——卡通的萌王游戏网页(13个页面)
QQ_____365392777的博客
08-13 1112
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
sql20天速成
06-29
### SQL20天速成知识点概述 #### 第一天：SQL简介 - **SQL简史**：SQL（Structured Query Language）是一种用于管理关系型数据库的标准语言。它最初由IBM的Donald D. Chamberlin和Raymond F. Boyce在1970年代初开发...
html新手3分钟速成秒杀一切教程
09-11
基础教程: 1.Html的结构组成 2.Body的常用属性 3.字体 4.图像 5.表格表项对齐方式 6.表格 7.框架 8.序列卷标 9.表单 10.排版卷标 11.背景标志 12.链接标志 其他实例教程 13.关于Iframe标记 14.关于播放音乐 HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。 先简单的介绍一下HTML语言（我们在这灌输大家的是能够实际操作），HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。 是呀，HTML并不是很神奇，只是因为你不是很了解它，现在咱们就开始接她的面纱： 一、HTML的组成结构（头部、眼睛、身体----好像一个人一样是不是？） 1、头部。只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是头部的内容，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。 2、眼睛。就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:标题这些应放在和之间。也就是 标题 3、身体。身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：页面内容 最后，别忘了把这些部分组成一体----网页，所以咱们就用把他们给包起来。 好了，咱们来大体看看网页的结构： 标题 页面内容
前端零基础快速入门html
web前端学习
05-20 717
前端零基础快速入门html
HTML8小时速成笔记（一）
Dream__Catcher的博客
11-16 614
一、基础 1、html,xhtml,shtml,htm分别是什么，有什么区别 2、!doctype声明，有哪几种，最好选严格型 3、开发环境和工具准备，sublime使用技巧 二、html主体三大结构 &lt;!DOCTYPE html&gt; #类型声明 &lt;html&gt; #html标签，大框架 &lt;head&gt; #head标签 &lt;me...
半小时速成HTML(三)
沉迷单车的追风少年
02-11 432
半小时速成HTML(一)：https://blog.csdn.net/qq_41895747/article/details/104243943 半小时速成HTML(二)：https://blog.csdn.net/qq_41895747/article/details/104258303 文章目录HTML CSS背景颜色字体颜色和字体大小文本对齐方式表格标签有序列表和无序列表区块框架 HTML...
对比起来学习前端三大框架（持续更新）
热门推荐
Fancyzhe
02-10 1万+
angular: 数据双向绑定，模板功能强大。依赖注入和自定义directive非常灵活。 学习路线长，框架偏重。 优缺点详见：angularJS在实际开发中有哪些优缺点？ vue: 轻量级。每一个组件自带shouldComponentUpdate   react： 虚拟DOM操作，设置state值render页面。   在vue的官网中有提到，跟其他框架的不同，可以去仔细了解...
2019主流的前端框架
qq_37916164的博客
04-08 4642
如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。 要做Web前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念： HTML负责结构，网页想要表达的内容由html书写。 CSS负责样式，网页的美与丑由它来控制。 JS负责交互，用户和网页产生的互动由...
jspdf踩坑 htmltocanvas
最新发布
bs521521的博客
09-20 128
解决方案是换到jspdf.js目录里。
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1503
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML中直接创建一个“onoff”图形开关包括css+script
TrueLink的博客
09-20 604
在HTML中直接创建一个“onoff”图形开关（通常指的是一个类似于物理开关的UI组件，可以切换开或关的状态），并不直接支持，因为HTML主要用于内容的结构化，而不是复杂的用户界面组件。然而，你可以通过结合HTML、CSS和JavaScript（可能还需要使用JavaScript库或框架）来实现这样的效果。以下是一个简单的例子，展示如何使用HTML（用于结构）、CSS（用于样式）和JavaScript（用于交互）来创建一个基本的图形开关。/* 这里粘贴上面提供的CSS代码 */// 例如，监听开关的变化。
Minitab实战：三天课程速成统计分析
"实际做一次-MINITAB三天课程" 在本次三天的MINITAB课程中，学员将深入学习这款强大的统计分析软件，了解其在质量管理领域的广泛应用。Minitab以其直观易用的界面和全面的功能，成为了统计分析和6Sigma实践的理想...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值