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

最新推荐文章于 2024-06-10 23:30:57 发布

&笨笨

最新推荐文章于 2024-06-10 23:30:57 发布

阅读量586

点赞数 3

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_55797477/article/details/121736696

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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=”点名称“

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

&笨笨

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学HTML笔记记录1之基础标签与链接(pink老师)

2021年11月29日学习记录:一、代码部分<!DOCTYPE html>document type文档类型声明此为HTML5的版本<html lang="en">/*显示语言english*/<head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="..
复制链接

扫一扫