初学html基础笔记整理01

已于 2022-08-18 00:26:57 修改
阅读量626 收藏
点赞数
文章标签： java
于 2022-03-20 21:43:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67649868/article/details/123613427
版权

文章目录

一 , 认识网页

1，定义

        ~~~~~~~        网页是构成网站的基本元素，是承载各种网站应用的平台。网页是一个包含html标签的纯文本文件，要通过网页浏览器来阅读

2，网页的组成

        ~~~~~~~        标题 域名 主体内容

二，HTML

1，定义

        ~~~~~~~        html 是用来描述网页的一种语言
        ~~~~~~~        html 是一种超文本标记语言 。html 是一种标记语言，不是编程语言

总结：

      ~~~~~       （1）html 是由前端开发人员写的，通过浏览器转换成普通人眼中美丽的画面
      ~~~~~       （2）网页的扩展名是 .html 或 .htm
      ~~~~~       （3）html 是一种超文本标记语言

2， HTML 的基本语法

        ~~~~~~~        2.1 常规标记，也叫双标记 <标记> </标记> <标记 属性=“属性值”> </标记> 标记也叫标签或元素
        ~~~~~~~        例如：< title > < /title > < head > < /head >
        ~~~~~~~        2.2 空标记，也叫单标记 <标记> <标记 属性=“属性值” />
        ~~~~~~~        例如：< br/ >

二，常用标签

1，标题标签

                     ~~~~~~~~~~~~~~~~~~~~                     < h1 >< h1 >-------< h6 >< /h6 >

案例分析
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>         
		<h1>今天是个好日子</h1>
		<h2>今天是个好日子</h2>
		<h3>今天是个好日子</h3>
		<h4>今天是个好日子</h4>
		<h5>今天是个好日子</h5>
		<h6>今天是个好日子</h6>
	</body>
</html>

2，排序标签

2.1，有序标签

      ~~~~~      < ol >
             ~~~~~~~~~~~~             < li > < /li >
      ~~~~~      < /ol >

2.2，无序标签

      ~~~~~      < ul >
             ~~~~~~~~~~~~             < li > < /li >
      ~~~~~      < /ul >

案例分析
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排序标签</title>
	</head>
	<body>
		<!-- 有序标签 -->
		<ol type="1">
			<li>中国</li>
			<li>美国</li>
			<li>英国</li>
			<li>泰国</li>
		</ol>
		<ol type="A">
			<li>中国</li>
			<li>美国</li>
			<li>英国</li>
			<li>泰国</li>
		</ol>
		<ol type="I">
			<li>中国</li>
			<li>美国</li>
			<li>英国</li>
			<li>泰国</li>
		</ol>
		<ol type="a">
			<li>中国</li>
			<li>美国</li>
			<li>英国</li>
			<li>泰国</li>
		</ol>
		<ol type="i">
			<li>中国</li>
			<li>美国</li>
			<li>英国</li>
			<li>泰国</li>
		</ol>
		<!-- 无序标签 -->
		
		<ul type="circle">
			<li>贵州</li>
			<li>广东</li>
			<li>郑州</li>
			<li>广西</li>
		</ul>
		<ul type="disc">
			<li>贵州</li>
			<li>广东</li>
			<li>郑州</li>
			<li>广西</li>
		</ul>
		<ul type="square">
			<li>贵州</li>
			<li>广东</li>
			<li>郑州</li>
			<li>广西</li>
		</ul>
	</body>
</html>

3，图片标签

        ~~~~~~~        < ing src=” ” /> src 对应的是图片的名称，最好以 jpg png 为后缀名
      ~~~~~      属性：
             ~~~~~~~~~~~~             src：图片路径
             ~~~~~~~~~~~~             border： 边框
             ~~~~~~~~~~~~             px 为像素
             ~~~~~~~~~~~~             width：宽度 推荐用百分比
             ~~~~~~~~~~~~             height：高度 推荐用百分比

案例分析
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标签</title>
	</head>
	<body>
		<h3>拼搏</h3>
		<img src="1.jpg" border="1px" width="30%" height="40%" />
	</body>
</html>

4，超链接标签

        ~~~~~~~        < a href=”跳转路径” target=”跳转方式”> </ a>
        ~~~~~~~        属性：
                ~~~~~~~~~~~~~~~                href: 跳转路径
                ~~~~~~~~~~~~~~~                arget: 跳转方式 默认-search 在本窗口打开 推              ~~~~~~~~~~~~             荐使用-blank 新窗口打开
        ~~~~~~~        扩展：
                ~~~~~~~~~~~~~~~                返回顶部的标签格式：
           ~~~~~~~~~~           < a name=” b” > —代码— < a href=”#b”>< /a >

案例分析
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<a href="https://uland.taobao.com" target="_blank">点我进淘宝</a><br />
		
		<a name="ding">顶部</a>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<h4>今天天气很好</h4>
		<a href="#ding">点我返回顶部</a>
	</body>
</html>

5，input 标签

       ~~~~~~       <input type=” ” />
     ~~~~     属性：
             ~~~~~~~~~~~~             password : 密码输入框
             ~~~~~~~~~~~~             txet : 文本输入框
             ~~~~~~~~~~~~             number : 数字输入框
             ~~~~~~~~~~~~             date : 日历输入框
             ~~~~~~~~~~~~             week : 日历输入框
             ~~~~~~~~~~~~             radio : 单选输入框
             ~~~~~~~~~~~~             checkbox : 多选输入框
     ~~~~     5.1，普通按钮：没有提交数据的功能，只能点点
             ~~~~~~~~~~~~             < input type=”button” value=” ” />
             ~~~~~~~~~~~~             < button > < /button >
     ~~~~     5.2，提交按钮
             ~~~~~~~~~~~~             < input type=”submit” />
             ~~~~~~~~~~~~             < button type=”submit”> < /button >
     ~~~~     5.3，重置按钮
    ~~~    < input type=”reset” /> < button type=”reset”> < /button >

案例分析
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入框标签</title>
	</head>
	<body>
		<!-- 输入个人信息 -->
		<div>
			<font size="3" color="black">用户名：</font>
			<input type="text" />
		</div>
		<div>
			<font size="3" color="black">密码：</font>
			<input type="password" />
		</div>
		<div>
			<font size="3" color="black">确认密码：</font>
			<input type="password" />
		</div>
		<div>
			<font size="3" color="black">电话：</font>
			<input type="number" />
		</div>
		<div>
			<font size="3" color="black">出生日期：</font>
			<input type="date" />
		</div>
		<div>
			<font size="3" color="black">性别：</font>
			<input type="radio" name="sex" />男
			<input type="radio" name="sex" />女
		</div>
		<div>
			<font size="3" color="black">性别：</font>
			<input type="checkbox" />篮球
			<input type="checkbox" />足球
			<input type="checkbox" />乒乓球
		</div>
		<div>
			<font size="3" color="black">头像：</font>
			<img src="1.jpg" border="1px" width="30px" height="40px" />
		</div>
		<div>
			<input type="submit" />
		</div>
		<div>
			<button><font size="3" color="black">注册</font></button>
		</div>
	</body>
</html>
双木星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初学html、css的重点整理（笔记）
qq_53764714的博客
01-29 1101
笔记中包含html，css的重点知识，包括表格（table），背景，选择器，元素显示模式，盒子模型，浮动等重点内容，笔记结构清晰，便于阅读。
JavaWeb入门基础笔记整理
08-02
了解如何下载、安装、配置Tomcat，以及如何部署和运行JavaWeb应用程序是初学者的基本功。 3. **网站开发**：在JavaWeb开发中，你需要知道如何创建静态HTML页面，以及如何通过HTTP协议进行客户端和服务器端的交互。...
初学HTML笔记记录1之基础标签与链接(pink老师)
weixin_55797477的博客
12-05 587
2021年11月29日学习记录: 一、代码部分 <!DOCTYPE html>document type文档类型声明此为HTML5的版本 <html lang="en">/*显示语言english*/ <head> <meta charset="UTF-8"> <!--字符集规定了字符编码为UTF-8 (万国码)--> <meta http-equiv="X-UA-Compatible" content="..
随笔03 笔记整理
2401_84301352的博客
04-30 1746
这篇博文主要是博主更新的。
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
前端学习零基础——HTML框架初学入门笔记（2）
Dominic的博客
07-25 95
HTML标签整理
Vue2基础学习笔记01
成长过程
07-01 1121
- 若你需要脚手架内容，请点击下面的链接（现在还没上传脚手架）这个基础太多了，我分文章来写如果是入门的话，可以先看这篇文章，从脚手架开始，我写在另外一篇文章。本文适合入门vue的小白，可以跟着学一下，讲述了vue的基本操作，若有不明白的，请留言或者私信。............
初学 JavaScript–基础知识笔记（一）
Wxy1122.的博客
07-28 7885
初学javascript–基础知识笔记（一）
渗透测试基础篇一基础入门整理笔记
学习、分享、交流
04-13 3125
黑客是对任何计算机操作系统的神秘工作方式都非常感兴趣的人。黑客通常是程序员。他们收集操作系统和编程语言的高级知识，发现系统内部的漏洞以及产生这些漏洞的原因。
html markdown写笔记,谈谈为知笔记的Markdown功能
weixin_42312941的博客
06-29 1267
这文章属于专题的一部分，详见：Markdown知识贴下面谈谈为知笔记(简称“为知”，下同)中的Markdown功能，包括为知Markdown支持的语法，Markdown功能的实现，目前已知的问题和对为知Markdown的展望等方面。为知Markdown支持语法根据为知的Markdown说明和简单测试，为知目前支持的语法有区块元素标题(Setext式和Atx式)段落区块代码(缩进式和围栏式)技术绘图...
2024年网络安全最新随笔03 笔记整理
2401_84247617的博客
05-03 780
这个系列的博文重点在于，尽管内容较为基础，但博主在整理过程中投入了大量时间，尤其latex的公式实在是太太难排版了~🫥博文中的图片主要来源于知乎和考研网站。这些图片不仅有助于理解抽象的数学概念，还可以作为知识点扩展的链接，帮助读者深入了解相关内容~😉此外，博主建议，如果个人打算写总结，最好在刷题的中后期进行。过早地写总结可能会影响刷题的效果，导致在考试中遇到困难~这个系列的博文重点在于写习题~这个系列的博文重点在于写习题~今年没有特定的更新计划，因为这个系列写作花费的时间很长。
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML和CSS笔记整理.docx
05-11
这份笔记全面覆盖了HTML和CSS的基础知识，适合初学者系统学习。通过自学这些内容，读者可以创建静态网页，并逐步掌握前端开发的基本技能。随着深入学习，还可以结合JavaScript和其他前端框架，构建更复杂的交互式...
Python学习个人笔记整理
04-24
【Python学习个人笔记整理】 本笔记集合是基于廖雪峰老师的Python学习课程编写的，旨在为学习者提供一个系统的、全面的Python学习资料。通过这些笔记，你可以深入了解Python语言的基础和高级特性，以及如何利用...
html笔记.rar
04-02
这本“html笔记”压缩包文件显然是针对HTML基础知识的整理，旨在帮助学习者掌握HTML的核心概念和使用技巧。 HTML由一系列元素组成，每个元素都由标签定义。这些标签告诉浏览器如何呈现网页内容。例如，“<html>”是...
配置Java开发环境
最新发布
Broken_x的博客
07-10 1057
Java开发环境配置
关于static定义初始化块和静态变量以及初始化块的执行顺序问题
你我约定有三的博客
07-08 267
第二步：在类加载的时候，按照从上到下执行static修饰的代码，此时执行static Test2 test1 = new Test2()，也就是创建出一个名为test1的对象。第六步：此时除了main方法，所有由static修饰的代码全部执行完毕(static修饰的代码只执行一次)，类初始化完成，开始执行main方法，main方法中只有一条语句(中的代码,此时输出aa以及a的值(由于第一步没赋初值，并且给了默认值为0 所以输出0)//首先输出a的值为10 然后输出bb，最后将a的值定义为11。
已解决 javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！
小明的Java问道之路
07-08 1735
已解决 javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！
java Object 转 Integer
servepeople的博客
07-09 1171
在 Java 中，可以通过多种方法将一个Object转换为Integer。
HTML_CSS学习笔记.docx
07-15
本文是根据IMOOC的学习笔记整理而成的HTML和CSS学习笔记，主要包括HTML介绍、HTML5语义化标签、HTML5效果标签等内容。 首先，HTML介绍部分介绍了HTML与CSS的关系、标签、HTML5文档结构、head标签、body标签、以及...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值