html学习笔记1

使用vscode作为编译器。
！快捷输入
html代码写在body内部

1 标题

<h1></h1>-<h6></h6>共六个标题，大小不同

2 字体格式

<b>加粗二号</b>
<em>斜线</em>  <i>斜线二号</i>
<del>删除线</del>  <s>删除线二号</s>
<ins>下划线</ins>  <u>下划线二号</u>

3 图像标签的使用

<img src="" alt="" title="" height="" width="">

src参数为图像地址（地址分绝对路径和相对路径）
alt参数为当图像加载不出来时，显示的内容
title参数为图片的标题，鼠标放在图片上时显示的内容
height，width为高度和宽度

4 段落

<p></p>

5 注释

按ctrl+/快速注释

6 特殊字符

需要时查找html特殊字符表

7 超链接标签

<a href="跳转目标" target="目标窗口弹出方式">文本或者图像</a>

   target默认_self,也可选择_blank,前者是当前页面打开后者是新开窗口打开**链接分类**<h4>1.外部链接</h4><a href="https://www.w3school.com.cn/html/html_comments.asp" target="_self">w3school跳转链接,当前页面</a><br/><a href="https://www.w3school.com.cn/html/html_comments.asp" target="_blank">w3school跳转链接，新开页面</a><h4>2.内部链接,网站内部页面之间相互链接</h4><a href="Untitled-1.html">内部链接</a><h4>3.空链接,用于放未作完的页面，类似pass</h4><a href="#">界面</a><h4>4.下载链接,若href里面地址是一个文件(.exe)或者压缩包(.zip)，会下载它</h4><a href="img.zip">下载压缩包</a><h4>5.网页元素链接，如文本，图像，表格，视频，音频等都可以作为超链接</h4><a href="https://www.w3school.com.cn/html/html_comments.asp"><img src="蛙.png"></a><h4>6.锚点链接,快速定位到当前网页中的锚点位置</h4>在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#two" id="one">第二集</a><br/><img src="img.jfif"><img src="img.jfif"><img src="img.jfif"><img src="img.jfif"><img src="img.jfif"><br/>找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id = "two">第二集介绍</h3><a href="#one">返回之前位置</a>

8 案例

下面附上圣诞节实例：

<!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><h1>圣诞节的那些事</h1><a href="#one">1.圣诞节是怎样由来的</a><br/><a href="#two">2.圣诞老人的由来</a><br/><a href="#three">3.圣诞树的由来</a><br/><h4 id="one">圣诞节是怎样由来的</h4><p>基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。</p> <img src="data:images/shengdangif.gif" alt="gif"><br/><h4 id="two">圣诞老人的由来</h4><p> <a href="https://baike.baidu.com/item/%E5%9C%A3%E8%AF%9E%E8%80%81%E4%BA%BA/570?fr=aladdin" target="_blank" >圣诞老人</a>（Santa Claus）是西方神话传说中的人物，在传说中西方圣诞节前夜时悄悄赠送礼物给小孩子，是耶稣基督诞辰瞻礼即西方圣诞节的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象，圣诞老人的起源或与一种被称为毒蝇伞的红白相间蘑菇有关。</p> <p> 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。</p><p>虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿黑色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。更多内容可以<a href="https://www.baidu.com/index.htm" target="_blank">百度一下</a>。</p><img src="data:images/laoren.jpg" height="300" alt="圣诞老人"><h4 id="three">圣诞树的由来</h4><p>圣诞树，是指用灯烛和装饰品把枞树或洋松装点起来的常青树。作为是圣诞节重要的组成元素之一，近代圣诞树起源于德国，后来逐步在世界范围内流行起来，成为圣诞节庆祝中最有名的传统之一。</p><p>据说圣诞树最早出现在古罗马12月中旬的所谓农神节。现在通常人们在圣诞前后把一棵常绿植物如松树弄进屋里或者在户外，并用圣诞灯和彩色的装饰物装饰。并把一个天使或星星放在树的顶上。</p><p>2019年11月，大阪USJ推出冬季圣诞树，连续九年刷新吉尼斯世界纪录</p><img src="data:images/tree.jpeg" height="300" alt="圣诞树">
</body>
</html>

效果图如下

html第一天-标题、字体、图像、段落、注释、超链接相关推荐

【Web】HTML（No.03）HTML标签（一）标题标签、段落标签、水平线标签、换行标签、div/span标签、图像标签、链接标签、base标签、特殊字符标签、注释标签、文本格式化标签
HTML标签分类在HTML页面中,带有"< >"符号的元素被称为HTML标签,如上面提到的 HTML.head.body都是HTML骨架结构标签.所谓标签就是放在&q ...
php excel水印图片大小,PHPExcel：如何在第一页标题中插入图像并将其放大以适合其内容？...
我有一个用 PHPExcel制作的Excel文件,它有一个左对齐标识和右对齐日期和标题的标题.用户文字.对于第一页,我想要一个类似的标题(相同的标识和相同的日期和用户文本),但有一些添加的信息(文件的 ...
Latex排版 Chapter2格式调整（长度单位、字体、段落、页面、目录）
Chapter2格式调整格式调整字体使用字体编码字体族名字体系列字体大小段落对齐居中对齐单侧对齐页面大小布局目录页格式格式调整 \section{格式调整} \subsecti ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
Python计算机视觉编程第一章基本的图像操作和处理
第一章基本的图像操作和处理 1.1 PIL:Python图像处理类库 1.1.1转换图像格式 1.1.2创建缩略图 1.1.3复制和粘贴图像区域 1.1.4调整尺寸和旋转 1.2Matplotlib ...
html实例001--锚点链接、格式化字体、段落、链接、文件下载等示例
html实例001–锚点链接.格式化字体.段落.链接.文件下载等示例 <!DOCTYPE html> <html lang="zh-CN"><head ...
Python计算机视觉编程第一章——基本的图像操作和处理
目录 1.1 PIL:Python图像处理类库 1.1.1 转换图像格式 1.1.2 创建缩略图 1.1.3 复制和粘贴图像区域 1.1.4 调整尺寸和旋转 1.2 Matplotlib 1.2.1 ...
easyexcel 在设置标题_七. EasyExcel标题加批注和标题字体填充红色
一, 概述在日常开发中, 经常会碰到导入导出的场景, 有导入就肯定有导入模板, 本文将介绍利用EasyExcel给标题添加批注和挑剔字体填充颜色二. 代码 2.1 编写样式处理类: TitleHa ...
EasyExcel标题加批注和标题字体填充红色
七. EasyExcel标题加批注和标题字体填充红色一, 概述在日常开发中, 经常会碰到导入导出的场景, 有导入就肯定有导入模板, 本文将介绍利用EasyExcel给标题添加批注和挑剔字体填充颜色 ...
web快速入门之基础篇-html：2、基本标签之标题标签、段落标签、换行标签
目录一.前言二.简单实例介绍实例代码运行效果三.要点说明 1.h1到h6 标题标签 2.p 段落标签 3.br 换行标签[单标记] 一.前言上一篇文章我整理以前上学的笔记是初见 html ...

html第一天-标题、字体、图像、段落、注释、超链接

html学习笔记1

1 标题

2 字体格式

3 图像标签的使用

4 段落

5 注释

6 特殊字符

7 超链接标签

8 案例

html第一天-标题、字体、图像、段落、注释、超链接相关推荐

最新文章

热门文章