美文网首页我爱编程
HTML入门介绍(上)

HTML入门介绍(上)

作者: 朱益达 | 来源:发表于2016-08-04 14:45 被阅读67次

16/07/14

HTML的介绍

  • HTML指的是超文本标记语言(Hyper Text Markup Language)
  • HTML不是一种编程语言,而是一种标记语言(markup language)
  • 标记语言是一套标记标签(markup tag)
  • HTML使用标记标签来描述网页

HTML文档

  • HTML文档包含HTML标签和纯文本,HTML文档也被称为网页
  • 浏览器的作用就是读取HTML文档,并以网页的形式显示出他们

HTML常用标签

  • 示例

    <html>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>
    

例子解释

  • <html> 与</html> 之间的文本描述网页
  • <body> 与</body> 之间的文本是可见的页面内容
  • <h1> 与</h1> 之间的文本被显示为标题
  • <p> 与</p> 之间的文本被显示为段落
最常用的HTML标签
  1. HTML标题:<h1> - <h6>(请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替)

  2. HTML段落:<p>标签

  3. HTML链接:<a>标签(在href属性中指定链接的地址)
    ![](https://www.baidu.com/img/bd_logo1.png)

  4. HTML水平线:


    标签用于在HTML页面中创建水平线
  5. HTML注释:``

  6. HTML折行:
    标签(在希望不产生一个新段落的情况下进行换行)

<p>This is<br />a para<br />graph with line breaks</p>

4.HTML图片:<img>标签

HTML元素
  • HTML元素指的是从开始标签到结束标签的所有代码
  • HTML元素的内容是开始标签与结束标签之间的内容
  <html>
  <body>
  <p>My first paragraph.</p>
  </body>
  </html>

例如在以上代码中,HTML元素内容是另一个HTML元素(body元素),而body元素内容为另一个HTML元素(p元素),p元素内容为 my first paragraph.

HTML属性
  • 属性总是以名称/值对的形式出现,比如:name = “value”

  • 属性总是在HTML元素的开始标签中规定

    <a href="http://www.w3school.com.cn">This is a link</a>
    
HTML样式
1.外部样式

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。(需要在内部创建一个.css后缀的文件,里面写入要给元素设置的样式eg:body{backgorund-color:yellow})

<head>
<link rel="stylesheet" href="mystyle.css">
</head>
2.内部样式

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

 <head>
 <style>
 body {background-color: red}
 p {margin-left: 20px}
 </style>
 </head>
3.行内样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。

 <p style="color: red; margin-left: 20px">
 This is a paragraph
 </p>
4.CSS遵循的规律
  • 就近原则(按照最近css设置的样式为准)
  • 叠加原则(如果以前没有添加过的样式,按照新添加的样式为准)

相关文章

  • HTML入门介绍(上)

    16/07/14 HTML的介绍 HTML指的是超文本标记语言(Hyper Text Markup Languag...

  • 3-CSS Introduction

    上一篇 HTML Introduction,介绍了简单的HTML入门基础。本章节是简单介绍了解 CSS 。 在此之...

  • HTML入门介绍

    什么是HTML? HTML是用来描述网页的一种语言。 - HTML指的是超文本标记语言(Hyper Text Ma...

  • HTML入门介绍(下)

    CSS选择器 选择器 作用:通过选择器找到对应的标签设置样式; 1.类选择器 对应的使用 2.id选择器 对应的使...

  • HTML Syntax(HTML 语法)

    简单介绍HTML,学习入门自用=-= 以下笔记摘抄全部来自优达学城,感谢优达让我入门。 HTML 结构第1部分 通...

  • 端开发入门 :CSS

    上一篇文章中,我们对HTML做了简单的入门介绍。 正确地使用HTML标签来表述结构是编写一个网页的基础,它非常重要...

  • Vue 入门指南

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue...

  • React-Native从介绍到入门

    React-Native入门 一、介绍 种类实现技术编程语言公司CordovaJavaScript使用HTML,C...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 史上最全面的web前端学习资料

    HTML+CSS入门: HTML30分钟入门:http://deerchao.net/tutorials/html...

网友评论

    本文标题:HTML入门介绍(上)

    本文链接:https://www.haomeiwen.com/subject/wiicsttx.html