HTML基础学习笔记

自然 2017年12月10日16:48:43 评论 244

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>
  8. </body>
  9. </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
网科文媒
快来关注一下,你想要的这里都有喔!
自然

发表评论

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