黑马视频学习笔记HTML上

1.html简介

1.网页的基本组成

网站是网页集合；网页通常是html格式的文件
网页是构成网站的基本元素；网页由图片.视频.链接。视频声音等元素组成

2.html是超文本标记语言，由标签组成

国内常用浏览器内核Webkit（苹果浏览器内核）/Blink（谷歌等浏览器内核）

3.Web标准

web标准的构成：

结构（html）：对网页元素进行整理和分类；

表现（css）：设置网页元素的版式，颜色，大小的外观样式；

行为（javascript）：网页模型的定义和交互的编写。

4.html标签

1.html语法规范

双标签
<html><html/>
单标签
<br />

2.双标签关系分为包含和并列。

<html>文档的标签
<head>文档的头部
<titel><titel>文档的标题 （包含在head中）
<head/>
<body><body/>文档的主题 （与head并列）
<html/>

3. 第一个页面练习

<html><head><title> 第一个页面</title></head><body>代码敲烂，工资过万</body>
</html>

4.基本标签结构图

5.VSCode常用快捷键

1.新建文件（Ctrl+N）

2.保存文件（Ctrl+S），注意保存为html.文件

3.生成页面骨架结构（输入！按下Tab键）

6.生成骨架结构新增标签

1.<!DOCTYPE html>文档类型声明标签

2.lang语言种类（定义当前文档显示的语言）（其中en为英文；zh-Cn为中文）

<!DOCTYPE html>
<html lang="en">
<mate charset="UTF-8">(UTF-8万国码)

7.html常用标签

7.1 标题标签<h1>-<h6>

<h1>一级标题<h1/>

7.2 段落标签<p>和分行标签<br />

<p>分段<P/>
分行<br />

7.3 体育新闻案列

素材

水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0

数据统计：水花兄弟合砍61分

库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。

汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。

兄弟对决升级：小库里给哥哥造成压力

库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。

但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。

作者: pink老师

2019-8-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>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1><h3>数据统计：水花兄弟合砍61分</h3><p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p><p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p><h4>兄弟对决升级：小库里给哥哥造成压力</h4><p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p><p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。
</p>
<p>作者: pink老师<br />2019-8-8</p>
</body>
</html>

7.4 文本格式化标签

语义	标签
加粗	<strong><strong/>或<b><b/>
倾斜	<em><em/>或<i><i/>
删除线	<del><del/>或<s><s/>
下划线	<ins><ins/>或<u><u/>

<strong>加粗的文字</strong><br /><em>倾斜的文字</em><br /><del>删除线的文字</del><br /><ins>下划线的文字</ins />

7.5 <div>和<span>标签

一行只能放一个<div>

<span>一小</span> <span>二小</span><br /><span>三小</span><div>大标题</div>

7.6 图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图片不能显示的文字
title	文本	标注文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<img src="06-综合案例/图片集合/圣诞1.jpg" height="300" title="圣诞节快乐" alt="圣诞节欢乐" border="5">

7.7 图形标签和路径

根目录：打开目标文件夹的第一层

相对路径：以引用文件位置为参考基础，而建立的目录路径

相对路径分类	符号
同一级路径
下一级路径	/
上一级路径	../

绝对路径：

<img src="../笔记/基本结构标签图.png" alt="好心累"/> 上一级相对路径

7.8 超链接标签

<a href=“跳转目标” target=“目标窗口的打开方式”>文本或图像</a>

7.8.1锚点链接

点击链接，可以快速定位到页面的某个位置

 <a href="#live">个人作品</a><h4 id="live">作品</h4>

7.9 html中的注释和特殊字符

7.9.1注释标签（Ctrl+/）

7.9.2特殊字符

8.综合案例（圣诞节的那些事）

   <h1>圣诞节的那些事</h1>1. 圣诞是怎样由来的<br /><a href="#dom1">2. 圣诞老人的由来</a><br /><a href="#dom2">3. 圣诞树的由来</a><h4>圣诞是怎样由来的</h4><p>基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。</p><img src="https://bkimg.cdn.bcebos.com/pic/730e0cf3d7ca7bcb15aae96ab6096b63f724a8a5?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto" height="300"/><h4 id="dom1">圣诞老人的由来</h4><p>圣诞老人（Santa Claus）是西方神话传说中的人物，在传说中西方圣诞节前夜时悄悄赠送礼物给小孩子，是耶稣基督诞辰瞻礼即西方圣诞节的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象，圣诞老人的起源或与一种被称为毒蝇伞的红白相间蘑菇有关。</p><p>传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。</p><p>虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿黑色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p><img src="http://5b0988e595225.cdn.sohucs.com/images/20171224/0a82df5044c2457491cdee8d85a59340.jpeg" width="400"/><h4 id="dom2">圣诞树的由来</h4><p>圣诞节一位农民在一个风雪交加的圣诞夜里接待了一个饥寒交迫的小孩，让他吃了一顿丰盛的圣诞晚餐，这个孩子告别时折了一根杉树枝插在地上并祝福说：年年此日，礼物满枝，留此美丽的杉村，报答你的好意，小孩走后，农民发现那树枝竟变成了一棵小树。</p><img src="https://iknow-pic.cdn.bcebos.com/c8ea15ce36d3d53981a92ed93587e950352ab017?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1/quality,q_85" width="400"/><p>他才明白自己接待的原来是一位上帝的使者，这个故事就成为圣诞树的来源。</p><p>常用圣诞树树种：松柏类。松柏伯类是对裸子植物门松柏纲中的松科、杉科、柏科和南洋杉科的统称。其中，柏科的树木大多不呈现三角塔状，极少被作为圣诞树使用；同时南洋杉科树木原产于南半球，通常只在南半球作为圣诞树来用，其他地区极少用来作为圣诞树；在松科和杉科中，由于松科所拥有的物种数可是杉科的十余倍，因此松科的植物常被作为圣诞树。</p><p>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a></p>

黑马视频学习笔记HTML上相关推荐

黑马视频学习笔记- 一些杂项记载
1.在视频中,反复强调的一点就是一定要养成写注释的习惯,不管是面试,工作都要写注释,注意点为:注释->格式->功能 2.动态数据和静态数据相互转换的例子: 动->静:下载静-> ...
黑马视频学习笔记-字符串
1.字符串可以理解为是一个字符数组,但是有一些区别,他们的区别在于,字符串在末尾的地方,会有一个\0字符,来标记字符串的结束.这个字符非常重要,如果没有这个字符,会导致用指针访问字符串的时候,内存越界 ...
黑马视频学习笔记-for循环
1.格式 for(语句1;条件;语句2) {循环体; } 语句1:初始化语句语句2:增量语句,当执行完一次循环后,就执行增量语句 2.语句1在for循环中,只会执行一次 3.每执行一次循环体后,语句 ...
黑马视频学习笔记-OC-继承
1.首先看一下,继承的好处: 1)抽取重复代码 2)建立类之间的关系 3)子类可以拥有父类的所有成员变量和方法注意点:基本上所有的类的根类是NSObject 2.重写:子类重新实现父类中的某个方法, ...
黑马视频学习笔记-FOUNDATION-Array集合
这一节,我们说说NSArray和NSMutableArray这两个集合 1.NSArray是不可变数组,而NSMutableArray是可变数组 2.OC中有一个快捷创建Array集合的方法,@[@& ...
尚硅谷+黑马程序员MongoDB视频学习笔记（一）
本学习笔记是来源于学习B站上的尚硅谷和黑马的MongoDB教学视频而做的知识总结. 一.数据库(Database) 数据库是按照数据结构来组织.存在和管理数据的仓库.说白了,数据库就是存在数据的仓库. ...
【168天】黑马程序员27天视频学习笔记【Day07】
[168天]黑马程序员27天视频学习笔记[Day07] 叨逼叨两句决定了,我会记住这一天! 07-01:构造方法Constructor概述和格式构造方法概述和作用给对象的数据(属性)进行初始化. ...
影像组学视频学习笔记(43)-标准差、标准误及95%置信区间CI、Li‘s have a solution and plan.
作者:北欧森林链接:https://www.jianshu.com/p/f09d0f97592f 来源:简书,已获授权转载本笔记来源于B站Up主: 有Li 的影像组学系列教学视频本节(43)主要 ...
影像组学视频学习笔记(42)-影像组学特征提取问题解决过程复现、Li‘s have a solution and plan.
作者:北欧森林链接:https://www.jianshu.com/p/c3e6de2f79b3 来源:简书,已获转载授权本笔记来源于B站Up主: 有Li 的影像组学系列教学视频本节(42)主要 ...

黑马视频学习笔记HTML上

1.html简介

1.网页的基本组成

2.html是超文本标记语言，由标签组成

3.Web标准

4.html标签

5.VSCode常用快捷键

6.生成骨架结构新增标签

7.html常用标签

黑马视频学习笔记HTML上相关推荐

最新文章

热门文章