【自学笔记】web前端 - HTML - DAY02（元素+基础属性）

最新推荐文章于 2024-09-20 12:08:28 发布
最新推荐文章于 2024-09-20 12:08:28 发布
阅读量3.5k 收藏 7
点赞数 9
分类专栏： 【自学】web前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46169109/article/details/110298606
版权

这里是Jane的自学笔记之Web前端系列~ （希望周更ᕦ(･ㅂ･)ᕤ）

如果内容有问题，欢迎大家私信留言、批评指出，谢谢~

主要是记录和分享，嘻嘻(〃‘▽’〃)

文章目录



前期回顾

上一篇主要讲了html的基础标签，掌握了标签用法就行，其他标签等需要用到了再学叭~

已学：<head> <title> <h1> - <h6> <p> <img src="xxx.jpg" />

【自学笔记】web前端 - HTML - DAY01（编辑器+基础标签）

接下来就是对上次的界面加一些样式，修改一下图片大小~

元素

基本语法

  1. 元素的内容是开始标签与结束标签之间的内容

  2. 某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭

    举例：<br>就是没有关闭标签的空元素（定义换行）；

    ​ 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

    ​ <br>也可以正常运行，但是不建议~

    <p>Welcome to Jane's home!<br /> Thank you!!! </p>

  3. 大多数 HTML 元素可拥有属性

    属性就对元素进行了更细致的规定，比如<img>中的src就规定了图片的路径。

嵌套

HTML 文档由嵌套的 HTML 元素构成。

下面展示的就是在 <p> 标签里面嵌套的<p> 和<img>标签。

<p>
	<p>hello!</p>
	<img src="img/self_wx.jpg"  />	
</p>

属性

语法

  1. HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
  2. 属性总是以名称/值对的形式出现，比如：name=“value”，始终要加引号。
  3. 属性总是在 HTML 元素的开始标签中规定。

参考手册

举例

  1. 链接

    • <a> 标签定义超链接，可以跳转页面。

    • <a>元素最重要的属性是 href 属性，指示链接的目标。

    • target属性规定在何处打开链接文档，默认是在当前界面。_blank是在新页面。

<a href="https://mp.weixin.qq.com/s/wx9Y8lRzTgJOcrqHL_2cNw"> MOS 宣传片</a>

<a href="https://mp.weixin.qq.com/s/wx9Y8lRzTgJOcrqHL_2cNw" target="_blank"> MOS 宣传片 </a>
  1. 图片尺寸
    • width设置宽度，可以是固定值，也可以是百分比。
    • height设置高度，同上。
<img src="img/self_wx.jpg" width="100px" height="100px" />
  1. 背景颜色
    • bgcolor： backgroundcolor
    • 颜色是从代码助手里面选的，选个合适的差不多了。
<body bgcolor="cornsilk">
  1. 居中对齐
    • align 属性规定元素中的内容的水平对齐方式。
<h1 align="center">

页面优化

初步改进

代码展示：

<html>
	<head>
		<meta charset="utf-8" />
		<title> Jane </title>
	</head>
	
	<body bgcolor="beige">
		<h1 align="center"> Hello,visitor! </h1>
		<p align="center" > Welcome to Jane's home! </p>
		<img src="img/jane.png" width="80%" height="80%" />	
	</body>
</html>

界面：

在这里插入图片描述

关于图像的居中

在img标签中加入align的属性，发现不行。如：

<img src="img/jane.png" width="80%" height="80%" align="center"/>

这是因为HTML5 不支持<img> align 属性，需要使用 CSS 代替。

那么不借助CSS的话，我们可以在img标签外面嵌套一个<div> 块级元素，改变<div> 的属性。

  • <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
  • 可以理解成隔离或者分块~
<div align="center">
	<img src="img/jane.png" width="80%" height="80%" />
</div>

效果展示

在这里插入图片描述


下篇预告

准备学习样式，改变字体大小、颜色等。可以开始css啦！

着手设计一个界面~

HelloJane…
关注
专栏目录
【自学笔记】web前端 - HTML - DAY01（编辑器+基础标签）
Welcome to Jane's blog
11-26 460
这里是Jane的自学笔记之Web前端系列~ （希望周更ᕦ(･ㅂ･)ᕤ） 如果内容有问题，欢迎大家私信留言、批评指出，谢谢~ 主要是记录和分享，嘻嘻(〃‘▽’〃) 文章目录编辑器HBuilder记事本NodepadNotepad++Sublime TextVS Code基础标签标签简介基本格式标签讲解效果演示下篇预告 编辑器 这里是一些我了解到的编辑器简介和使用感受，后面都跟上了官网链接，需者自取~ HBuilder 我使用的编辑器是HBuilder，感觉不错，适合我这样的新手+懒人(￣▽￣)／ 下面是HB
Web前端学习笔记--day1
qq_44515207的博客
02-03 285
Web前端学习笔记–初始 1.开发工具：visual studio code 2.安装插件：live server 二、html基础 1.新建一个html文件：快捷键!+Tab键生成模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4732
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
前端自学day08-css 笔记整理
m0_59470174的博客
03-22 398
课程：（b站）黑马程序员【前端HTML5+CSS3+移动web全套教程】 day08 能够在网页中使用精灵图 能够使用背景大小属性，设置背景图片大小 能够认识CSS书写顺序，提高代码专业性和浏览器渲染性能 能够使用专业方式完成项目结构搭建和基础公共样式 能够应用已学技术知识完成小兔鲜儿项目 一、项目样式补充 目标：能够使用精灵图，能够给元素添加阴影效果，让元素完成过渡效果 精灵图 背景图片大小 文字阴影 盒子阴影 过渡 1.1精灵图结介绍 场景：项目中将一张小图片合成一张大图.
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 2093
Web前端html5+css3前端开发入门学习笔记
前端自学day07-css布局（定位装饰）笔记整理
m0_59470174的博客
03-21 613
定位的常见应用场景 可以解决盒子之间的层叠问题 定位之后的元素层级最高，可以层叠在其他盒子上 可以让盒子始终固定在屏幕中的某个位置 设置偏移值：水平+垂直各选取一个 偏移值设置为两个方向，水平垂直各选一个使用即可 选取原则：就近原则（离那边近用哪个） 设置偏移值：水平+垂直各选取一个 偏移值设置为两个方向，水平垂直各选一个使用即可 选取原则：就近原则（离那边近用哪个） 4.1相对定位 介绍：相对于自己之前的位置进行移动 代码：position：relative； 特点：需要配合方位属性实现移动
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1403
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
自学前端day05-css布局（笔记整理）
m0_59470174的博客
02-21 366
课程自学：（b站）黑马程序员【前端HTML5+CSS3+移动Web全套教程】 css三大特征 PxCook基本使用 盒子模型，内边距外边距的使用
前端自学日记-day1
半途而废的普通人
12-11 191
前端自学日记day1
day07 - 进度条 +打包报告 + 第三方库CDN引入 + 路由懒加载(2)
m0_75011249的博客
05-05 364
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
10款精美的web前端源码的特效
2401_84092727的博客
04-18 594
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取[外链图片转存中…(img-6pSS0vhL-1713426259500)][外链图片转存中…(img-KLgDo7St-1713426259501)]
[网络安全自学篇] 四十八.Cracer第八期——(1)安全术语、Web渗透流程、Windows基础、注册表及黑客常用DOS命令
热门推荐
杨秀璋的专栏
02-21 2万+
这是作者的网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您们喜欢，一起进步。前文分享了微软证书漏洞（CVE-2020-0601），并详细讲解了Windows验证机制、可执行文件签名复现及HTTPS劫持。本文将分享另一个主题——Cracer教程，第一篇文章将详细讲解安全术语、Web渗透流程和Windows基础、注册表及黑客常用DOS命令。基础性文章，希望对您有所帮助。
左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗
最新发布
y1059477028的博客
09-20 247
【代码】左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗。
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵
m0_61118741的博客
09-14 1549
这个示例展示了如何结合民国风格和现代网页设计元素，创造一个既古典又炫酷的网页。通过细致的CSS样式和动画效果，我们实现了古典美学与现代技术的完美融合。这种设计不仅在视觉上吸引人，也在功能上提供了良好的用户体验。希望这个示例对你在网页设计方面有所启发！
在HTML中添加视频
Q18600000000的博客
09-15 408
这个标签允许你在网页上嵌入视频内容，并支持多种视频格式，如MP4、WebM和Ogg等
html的基本语法
Q18600000000的博客
09-14 403
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，它告诉浏览器如何展示内容
html 与 md 文件数据格式转换
小胖_@的博客
09-14 257
【代码】html 与 md 文件数据格式转换。
html实现好看的多种风格手风琴折叠菜单效果合集(附源码)
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-18 966
html实现好看的多种风格手风琴折叠菜单效果合集(附源码)，html模板源码，手风琴效果源码，手风琴模板源码，内置九种风格的手风琴源码，适用于各种场合，内置代码，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
8051单片机自学笔记：汇编-C-RTOS学习指南
"51单片机自学笔记(完整北航版) 380页" 本文将详述《51单片机自学笔记》一书中关于89S51单片机中断系统的重要知识点，该书由范红刚、魏学海、任思璟编著，北京航空航天大学出版社出版。51系列单片机广泛应用于电子...
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值