前端基础第一天——HTML

目录

什么是HTML?

HTML 标签

1.html常用标签：

1.1标题标签

​ 1.2段落标签

1.3换行标签

 1.4文本格式化标签

 1.5盒子标签

1.6图像标签

 1.7目录文件夹和根目录

1.8图像标签和路径

1.9 超链接标签

1.9注释标签和特殊字符 

---

根据黑马pink老师所讲的前端做的笔记，为了完成javascript期末大作业，女娲补天

什么是HTML?

HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言: HyperText Markup Language
• HTML 不是一种编程语言，而是一种标记语言
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 和
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签

1.html常用标签：

1.1标题标签

-

        HTML 标题（Heading）是通过

-

标签来定义的。

        为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即

-

。

​
  

 


   
  
                                    
  
    

    
​      
标题一共六级选,
      
文字加粗一行显。
      
由大到小依次减，
      
从重到轻随之变。
      
语法规范书写后，
      
具体效果刷新见。
    

 实现效果：

 1.2段落标签

       HTML 段落是通过标签

来定义的。

       在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。

  

 


   
  
                                    
  
    

    
​      
       
我是一个段落标签
       
我是第二段

    

实现效果：

 段落标签特点：
        1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
        2. 段落和段落之间保有空隙。

1.3换行标签

         HTML 换行是通过标签
来定义的。
是一个单标签。

        在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
。

  

 


   
  
                                    
  
    

    
​      
          
 c++第四章
当你发现对于一些东西基本类型已经不够用时，也就需要一些比C++的简单基本类型更复杂的东西，才能满足这些数据的要求,C++就提供了这样的东西——复合类型。复合类型是基于基本整型和浮点类型创建的，影响最为深远的复合类型是类，
              它是将学习的OOP的堡垒。C++还支持几种更普通的复合类型。它们都来自C语言。如：数组可以存储多个同类型的值。
              一种特殊的数组可以存储字符串（一系列字符）。结构可以存储多个不同类型的值。而指针则是一种将数据所处位置告诉计算机的变量。（指针就是存储地址的变量）。
        

    

 实现效果：

 1.4文本格式化标签

         在网页中，有时需要为文字设置粗体、斜体、下划线或删除线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性。

  

 


   
  
                                    
  
    

    
​      
        我是加粗的文字 

        我是加粗的文字  

        我是倾斜的文字  

        我是倾斜的文字   

        我是删除线  

        我是删除线   

        我是下划线  

        我是下划线   


    


​

 实现效果：

 1.5盒子标签

和

       

和 是没有语义的，它们就是一个盒子，用来装内容的。

        1.

标签用来布局，但是现在一行只能放一个

。 大盒子

        2. 标签用来布局，一行上可以多个 。小盒子

  

 


   
  
                                    
  
    

    
​      
       
我是一个div标签我独占一行
123
       
我是一个div标签我独占一行
123
       百度
       新浪
       搜狐
    


​

 实现效果：

1.6图像标签

       在 HTML 标签中， 标签用于定义 HTML 页面中的图像。

       src 是标签的必须属性，它用于指定图像文件的路径和文件名。（必须写）

       具体实现

图像标签的其他属性：

  

 


   
  
                                    
  
    

    
​      
        
 图像标签的使用:
        
        
 alt 替换文本 图像显示不出来的时候用文字替换:
        
        
 title 提示文本 鼠标放到图像上,提示的文字:
        

        
 width 给图像设定宽度:
        
        
 height 给图像设定高度:
        
        
 border 给图像设定边框:
           
    


​

 实现效果：     

 图像标签注意点：

1.图像标签可以拥有多个属性，必须写在标签名的后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

 1.7目录文件夹和根目录

一般我们写一个网页会有很多工程文件，所以我们需要创建一个新的文件夹来整合这些工程文件。

目录文件夹：就是普通文件夹，里面只不过存放了一些做页面所需要的相关素材

如图：

 根目录：打开目录文件夹的第一层就是根目录。

如图：

1.8图像标签和路径

路径分为相对路径和绝对路径。

相对路径：是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。

绝对路径： 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

例如：

从盘符开始的路径“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

1.9 超链接标签

在 HTML 标签中， 标签用于从一个页面链接到另一个页面

链接的语法格式

文本或图像

      URL(Uniform Resource Locator,统一资源定位符)地址,俗称网页地址,简称网址,是Internet上用来描述信息资源地址(Address)的字符串,如同在网络上的门牌。

链接分类：

1.外部链接:

例如：

< a href="http:// www.baidu.com "> 百度

 2.内部链接:

网站内部页面之间的相互链接. 直接链接内部页面名称即可，

例如：

< a href="index.html"> 首页 

3.空链接:

如果当时没有确定链接目标时。

例如：

< a href="#"> 首页  

4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

  

 


   
  
                                    
  
    

    
​      
       
1.外部链接
        腾讯
         target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
       百度一下，你就知道
       
2.内部链接: 网站内部页面之间的相互链接
       公司简介
       
3.空链接:#
       公司地址
       
4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式
       下载文件
       
5.网页元素的链接
        
    


​

 实现效果：

6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。

• 在链接文本的href属性中，设置属性为 #名字的形式。
• 找到目标位置标签，里面添加一个 id 属性 = 名字就可以实现锚点链接的功能。

  

 


   
  
                                    
  
    

    
        
周杰伦
 
      1.早年经历

      2.演艺经历

      3.个人生活

      4.照片


周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。

2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。

2002年举行“The One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物 。

2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得金马奖、金像奖最佳新人奖。

2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 。

2007年自编自导的文艺片《不能说的秘密》获得金马奖年度台湾杰出电影奖 。

2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。

2009年入选美国CNN评出的“25位亚洲最具影响力人物” ，同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖。

2010年入选美国《Fast Company》评出的“全球百大创意人物” 。

2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第四次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》。

2012年登福布斯中国名人榜榜首 。

2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 。2021年在央视春晚演唱歌曲《Mojito》 。

演艺事业外，他还涉足商业、设计等领域。

2007年成立杰威尔有限公司 。

2011年担任华硕笔电设计师，并入股香港文化传信集团  。

周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。

2008年捐款援建希望小学。

2014年担任中国禁毒宣传形象大使 。
早年经历
周杰伦出生于台湾省新北市，祖籍福建省泉州市永春县。4岁的时候，母亲叶惠美把他送到淡江山叶幼儿音乐班学习钢琴  。
初中二年级时，父母因性格不合离婚，周杰伦归母亲叶惠美抚养。中考时，没有考上普通高中，同年，因为擅长钢琴而被淡江中学第一届音乐班录取。
高中毕业以后，两次报考台北大学音乐系均没有被录取，于是开始在一家餐馆打工。
演艺经历
2000年，在杨峻荣的推荐下，周杰伦开始演唱自己创作的歌曲；11月7日，发行首张个人专辑《Jay》，并包办全部歌曲的作曲、和声编写以及监制工作；
    该专辑融合了R&B、嘻哈等多种音乐风格 ，其中主打歌曲《星晴》获得第24届十大中文金曲优秀国语歌曲金奖]，而周杰伦也凭借该专辑在华语乐坛受到关注，
    并于次年举办的第12届台湾金曲奖颁奖典礼上凭借该专辑获得最佳流行音乐演唱专辑奖，入围最佳制作人奖，凭借专辑中的歌曲《可爱女人》获得第12届台湾金曲奖最佳作曲人奖提名。
 
个人生活
  
 
家庭情况
    
周杰伦的父亲周耀中是淡江中学的生物老师 [191]  ，母亲叶惠美是淡江中学的美术老师。周杰伦跟母亲之间的关系就像弟弟跟姐姐。他也多次写歌给母亲，
    比如《听妈妈的话》，甚至还把母亲的名字叶惠美作为专辑的名称。由于父母离异，因此周杰伦很少提及父亲周耀中，后来在母亲和外婆叶詹阿妹的劝导下，他重新接纳了父亲。
 
照片
   
 

    


​

实现效果：

1.9注释标签和特殊字符 

1. 注释标签:  。VSCode 中快捷键：command+ /。

2. 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。