时间戳

首页 > 技术文章 > HTML学习笔记（狂神说）

HTML学习笔记（狂神说）

th11 2021-06-27 18:02 原文

 

##狂神##

初始HTML

HTML是什么？

 

HTML (Hyper Text Markup Language)超文本标记语言

 

超文本包括：文字，图片，音频，视频，动画等

 

HTML 5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

 

HTML的优势

 

  • 世界知名浏览器厂商对对HTML5的支持

  • 市场的需求

  • 跨平台

 

W3C标准

 

W3C

 

World Wide Web Consortium (万维网联盟)

 

成立与1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

 

http://www.w3.org/

 

http://www.chinaw3c.org/

 

W3C标准内容

 

  • 结构化标准语言（HTML，XML)

  • 表现标准语言(CSS)

  • 行为标准语言（DOM,ECMAScript)

 

常见IDE

 

  • 记事本

  • DreamWeaver

  • IDEA

  • WebStorm

  • ......

 

HTML信息

浏览器配置

setting/Tools/web Browsers

基本结构RJY3pF.md.png

 

 <!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
 ​
 <!DOCTYPE html>
 ​
 <html lang="en">
 ​
 <!--head标签代表网页头部-->
 ​
 <head>
 ​
     <!--meta 描述性标签，它用来描述一些网站信息    -->
 ​
     <!--meta一般用来做SEO -->
 ​
     <meta charset="UTF-8">
 ​
     <meta name="keywords" content="HTML笔记">
 ​
     <meta name="description" content="学习">
 ​
 ​
     <!-- title是网页标题    -->
 ​
     <title>Title</title>
 ​
 </head>
 ​
 <!--body是网页主体-->
 ​
 <body>
 ​
 Hello World!!
 ​
 </body>
 ​
 </html>

网页基本标签

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <!-- 用做网站SEO -->
     <meta name="keywords" content="基本标签">
     <meta name="description" content="笔记">
     <title>基本标签</title>
 </head>
 ​
 <body>
 <!-- 标题标签 -->
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
 <!-- 段落标签 -->
 <p>第一段落</p>
 <p>第二段落</p>
 <!-- 换行标签 -->
 <!-- 换行标签比较紧凑，段落标签有明显段落间距-->
 准备换行，这是行尾<br>新行开头<br>
 <hr>
 <!-- 水平线标签 -->
 分隔符
 <hr>
 <!--  -->
 <!-- 粗体、斜体、粗斜体 -->
 <strong>I Love You</strong>
 <em>I Love You</em>
 <strong><em>I Love You</em></strong>
 <!-- 特殊符号 -->
 <br>特殊符号:<br>
 空格：1&nbsp;2&nbsp;3&nbsp;4&nbsp;5&nbsp;<br>
 手动空格：1 2 3 4 5<br>
 大于号：&gt;<br>
 小于号：&lt;<br>
 版权符号：totoroBlog&copy;2020<br>
 </body>
 ​
 </html>

图片标签RJU9T1.md.png

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>图像标签</title>
 </head>
 ​
 <body>
 <!-- 图像标签 -->
 <!--
     src:资源地址
     相对地址，绝对地址
     ../上级地址
     alt：在图片加载失败的时候，就会用文字代替
     title:鼠标悬停在图片上时，所显示的名字
     width height: 图片的高和宽
 -->
 <img src="../resourses/img/a.jpg" alt="(　o=^•ェ•)o　┏━┓)" title="天红666" width="128" height="128">
 <img src="./src/img/b.jpg" alt="路径有问题了o(*￣▽￣*)o">
 </body>
 ​
 </html>

超链接标签RJwJXD.md.png

QQ链接。。。

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>链接标签</title>
 </head>
 ​
 <body>
 <!--
     链接标签：
     href：跳转页面的地址
     a标签内文字：即显示的文字
         可以把图片放在a标签内，点击图片跳转网页
     title：链接描述
     target:表示在哪打开新网页。_self:当前标签打开 _blank:新的页面中打开
 -->
 <a name="top">这是顶部</a>
 <a href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>
 ​
 <br>
 <a href="https://www.baidu.com"><img src="../resourses/img/c.jpg" alt="

推荐阅读