HTML基础学习笔记

自然
自然
自然
392
文章
461
评论
更多
 2017年12月10日16:48:43 评论 1966字阅读6分33秒

HTML基础学习笔记

什么是 HTML？

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

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML由成对的标签组成
  • HTML标签可以互相嵌套

HTML的基础样式

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>
  • <html></html>是根标签，是语言的主体标记，是整体
  • <head></head>是头标签，是包含描述的部分，是头脑
  • <body></body>是主标签，是展示给用户看的地方，是身体

<head></head>中的内容

<title></title>网页的标题，一般显示在浏览器头部

<meta><meta>内容定义。一般包含属性charset，用于告诉浏览器网站编码字符集，如<meta chatset="utf-8"></meta>(注：属性中属性名与属性值用等号连接，属性值用双引号包裹)

utf-8是编码字符集，即为一种字典，用于高速搜索引擎网站的语言，utf-8是万国编码字符集，是Unicode万国码的是升级版。GB2312为亚裔字符集，是中国的国家标准第2312条，但是非常遗憾，其中不包括繁体字符集，为了兼容这一bug，国家发布了GBK,即为国家标准扩展版。

<meta></meta>中还能包含其他描述的行的内容

 

<meta content="关键词" name="keywords">
<meta content="网页的描述" name="description">

这就接触到了SEO的范围，基础篇不做详细介绍

<body></body>中的内容

<strong>文字加粗</strong>
<!--文字加粗标签-->
<em>文字斜体标签</em>
<!--文字设置斜体标签-->
<del>文字加划线</del>
<!--文字加划线-->
<h1>这算是标题标签</h1>
<!--h1-h6标题标签拥有自动分行作用-->
<p>段落标签</p>
<!--段落标签，文字分段使用-->

上面都是基础的文字标签，下面的两个标签是才是最重要的部分

<div></div>和<span></span>这两个写在html代码中不会显示任何东西。正是因为它们没有什么实际作用，它们的作用非常大，他们的作用在于代码规范化，利于后期的调试修改。

html代码中不存在空格符，我们在html代码中的空格采用html编码实现

空格符     &nbsp；

左尖角号（小于符号） &lt；     (less than的缩写)

右尖角号（大于符号）  &gt;     (great than的缩写)

<br>常用的换行符号，与其他的标签不一样，它单独存在便可以起作用。

 

  1. <ol type="1" reversed=“reversed” start=“1”>
  2.       <li>我是一号</li>
  3.       <li>我是二号</li>
  4.       <li>我是三号</li>
  5. </ol>

<ol></ol>有序列表符号，type=“1”表示从1开始排序，同样支持A/a/i/I/1等几种序列号排列方式（“i”为罗马数字小写，“I”为罗马数字大写格式）

reversed为倒叙排列，start为从指定序列号开始排列

 

  1. <ul type="1" reversed=“reversed” start=“1”>
  2.       <li>我是一号</li>
  3.       <li>我是二号</li>
  4.       <li>我是三号</li>
  5. </ul>

<ul></ul>无序排列标签，是有序排列标签的亲兄弟，它们的属性用法是一样的。<UL></UL>是现在很常用的标签，多用于网站导航部分。

 

  1. <img src="图片地址" alt=“描述内容”></img>

<img></img>为图片引入标签，属性src是source的缩写，表示源

图片地址可以采用常见的http网络地址，亦可以采用本地绝对/相对路径。

属性alt为文字占位符，起容错作用，当引入的图片错误时，展示文字信息。

 

  1. <a href="链接地址"></a>

<a></a>锚标签，我们在网页上点击的链接基本都是a标签

小结

这是自然这几天自己学习html标签的小结，真是让人想不到，丰富多彩的网页全是用这中简单易懂的小标签编写而成。不足的地方望各位大佬多多补充，自然的学习还在继续。。。。

weinxin
自然博客
快来关注一下，一个linux运维爱好者的个人博客！
自然
  • 本文由 发表于 2017年12月10日16:48:43
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: