初学HTML笔记记录1之基础标签与链接(pink老师)

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="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title>
</head><body><h1 id="标题标签"> 一、标题标签</h1><h1> 我是一级标题 比正文大 粗</h1><!--自动换行--><h2> 我是二级标题 比一级小点</h2><h6>我是6级标题我好小只</h6><h1> 二、段落标签+文本格式</h1><p>定风波</p><p><strong>苏轼(strong)</strong></p><P> <em>莫听穿林打叶声，何妨吟啸且徐行。(em)</em> 竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。 </P><!--p分段会转行且间距变大-->料峭春风吹酒醒，<br/><del>好冷(del)</del>微冷，山头斜照却相迎。<br/><!--br强制换行-->回首向来萧瑟处，<br/><ins>归去(ins)</ins>，也无风雨也无晴。<h1>三、 div和span盒子标签</h1><div>division 我是大盒子，整行都是我的</div><span>span 我是小盒子1</span><span>我是小盒子2</span><span>我是小盒子3</span><h1>四、图像标签和路径</h1><h3>图片标签的使用：</h3><!--图片标签必须放在img里，属性之间用空格隔开--><img src="img/img1.jpg" /><h4>alt（替换文本）图片加载失败用文字解释：</h4><img src="img/img.jpg" alt="这应该是蓝色的壁纸" /><h4>title （提示文本）鼠标放到图上时，提示的文字：</h4><img src="C:\Users\86158\Desktop\前端第一天\img\img1.jpg" alt="这应该是蓝色的壁纸" title="我是蓝图" /><h4>只改变图的宽度width</h4><img src="img/img1.jpg" alt="这应该是蓝色的壁纸" title="我是蓝图" width="500" />只改变一个时会使图片按原比例比例缩放<h4>改变图的宽度和高度width和height</h4><img src="img/img1.jpg" alt="这应该是蓝色的壁纸" title="我是蓝图" width="500" height="100" /><img src="https://i0.hdslb.com/bfs/archive/d2ae00da253158fb57109d3ab7c6012d86c81b02.png" />//网上复制的绝对路径<h1>五、超链接标签</h1><h3>1.网页外部链接</h3><a href="http://www.qq.com">腾讯</a><!--anchor锚；href属性用于指定链接到的地址--><a href="http://www.qq.com" target="_blank">腾讯</a><!--target指定打开方式，_blank指在新窗口打开，_self指在当前页面打开-->
</body>
<h3>2.网页内部链接</h3>
<a href="陈素素滴公司.html"> 陈素素蒸蒸日上技术有限公司</a>
<!--属于同一路径-->
<h3>3.空链接</h3>
<a href="#"></a>
<h3>4.下载链接:地址链接是exe,zip等压缩包的形式</h3>
<a href="前端11.29.zipx">下载文件</a>
<h3>5.网页元素加链接</h3>
<a href="https://desk.zol.com.cn/" title="点击浏览更多壁纸"><img src="img/img2.jpg"></a>
<h3>6.锚点链接（用于同一页面的内容定位跳转）</h3>
<a href="#标题标签">我想复习一下标题标签</a></html>

内部连接至:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>陈素素蒸蒸日上技术有限公司</title>
</head><body>企业没钱，倒闭了，老板学前端去了
</body></html>

二、笔记部分

1.网页就是html文件 HTML是超文本标记语言
2.web标准包括
结构：用于对网页元素的整理和分类（如html）
表现：用于设置外观样式（css）
行为：网页模型的定义和交互的编写（js）

快捷键
注释：ctrl+/
放大：ctrl++

特殊字符
空格：&nbsp(你不是胖)
小于号：&lt(little)
大于号：&gt(great)

文本格式设定
<strong>加粗</strong>
<em>倾斜</em>
<del> 删除</del>
<ins>下划线</ins>

图片路径（链接同理）
相对路径
1.与HTML在同一级，直接写src="图片名" 如
2.在文件夹内，文件夹与html同一级，src="文件夹名/图片名" ，如src="img/img1.jpg
3.在html的上一级，src="../图片名"
绝对路径
例如电脑中的 C:\Users\86158\Desktop\前端第一天\img\img1.jpg
或者在网上的网址链接。

锚点标签
本点：<a href="#点名称">
目标点：id=”点名称“

小白学习中该文章用于适用于复习,我是先看代码,忘记了再翻翻笔记欢迎您的交流指正

初学HTML笔记记录1之基础标签与链接(pink老师)相关推荐

一起初学java，笔记记录的第五天：数组、排序和查找
一起初学java,笔记记录的第五天:数组.排序和查找适用于初学java者这个首先指出本文中图片和资源来自**韩顺平**老师,感谢老师做的无私奉献的教学! 1. 数组介绍数组可以存放多个同一类型的 ...
JavaWeb笔记01-HTML基础标签介绍
JavaWeb笔记01-HTML基础标签介绍文章目录 JavaWeb笔记01-HTML基础标签介绍 1. html简介 2. 开始和结束标签 3. title标签 4. meta标签 5. 换行标签 ...
WPF笔记(1.1 WPF基础)——Hello，WPF！
WPF笔记(1.1 WPF基础)--Hello,WPF! 原文:WPF笔记(1.1 WPF基础)--Hello,WPF! Example 1-1. Minimal C# WPF application ...
MATLAB学习笔记5：绘图基础与数据可视化（中）
阅读前请注意: 1. 该学习笔记是华中师范大学HelloWorld程序设计协会2021年寒假MATLAB培训的学习记录,是基于培训课堂内容的总结归纳.拓展阅读.博客内容由 @K2SO4钾撰写.编辑, ...
【方向盘】达到Linux第三阶段的常用命令笔记记录---Part Ⅱ
实现自己既定的目标,必须能耐得住寂寞单干本文已被https://yourbatman.cn收录:女娲Knife-Initializr工程可公开访问啦:程序员专用网盘https://wangpan.y ...
J2EE学习笔记三：EJB基础概念和知识收藏
J2EE学习笔记三:EJB基础概念和知识收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...
Linux 学习笔记之超详细基础linux命令 Part 3
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 2----------------- ...
Python 数据分析与展示笔记4 -- Pandas 库基础
Python 数据分析与展示笔记4 – Pandas 库基础 Python 数据分析与展示系列笔记是笔者学习.实践Python 数据分析与展示的相关笔记课程链接: Python 数据分析与展示参考 ...
Python 数据分析与展示笔记3 -- Matplotlib 库基础
Python 数据分析与展示笔记3 – Matplotlib 库基础 Python 数据分析与展示系列笔记是笔者学习.实践Python 数据分析与展示的相关笔记课程链接: Python 数据分析与展 ...

初学HTML笔记记录1之基础标签与链接(pink老师)

初学HTML笔记记录1之基础标签与链接(pink老师)相关推荐

最新文章

热门文章