美文网首页
HTML基础

HTML基础

作者: 小m_up | 来源:发表于2016-12-05 21:37 被阅读8次

HTML是什么

HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)。 我们平时看到的页面,如果我们在页面上右键选择“查看源文件”展现出来的就是HTML。

head标签

head标签里主要得几个标签有

meta, link, script, title

meta

meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。

link

<link> 标签定义文档与外部资源的关系.
<link> 标签最常见的用途是链接样式表。

链接一个外部样式表:

<link rel="stylesheet" type="text/css" href="theme.css" />

script

<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。举例:
在 HTML 页面中插入一段 JavaScript:

<script type="text/javascript">
    document.write("Hello World!")
  </script>
title

<title> 元素定义文档的标题。
举例:

<title>网页标题</title>

body标签

body里的标签就太多了,主要分为几类

  • Section
  • Group Content
  • Text Marker
  • Table
  • Form
  • Embed
div标签

为什么使用div?
<div>标签可以将网页分割成不同的、清晰的、独立的局部模块,然后在不同的模块中添加内容。 这样使网页布局结构更加清晰,代码更加独立,代码修改时能尽量少地影响到整体页面, 所以在网页开发中提倡使用<div>标签。
<div>标签的使用

<div id="firstdiv" class = "mydiv"> 
我是内容
</div>

id: 用于标识<div>块(即<div>标签的名字)
class: 修饰<div>块的css样式组

<div>图层定义常见的属性设置:
position:绝对定位和相对定位 (abosolute,relative)
height:<div>模块的高度
width:<div>模块的宽度
left:相对于窗口左边的位置
top:相对于窗口上边的位置

<div class="border" style="position:absolute;width:320px;height:300px;left:20px;top: 30px;"> 
测试名为left的div模块在html页面上展示
 </div>
section标签

为什么使用"section"?
网页中一些描述性模块一般会区分标题、段落、导航、侧边栏等展示给用户,虽然我们有了div布局页面,但为了使我们更加清晰更加准确地根据不同的需求进行页面布局,html5引进了一些具有特殊意义的"section"标签。

<section>
 <h1>PRC</h1>
 <p>The People's Republic of China was born in 1949...</p>
</section>
pre标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。举例:

<pre>
          1
1                  1
</pre>

则页面会显示同样的效果。

span标签

<span> 标签被用来组合文档中的行内元素。
因为span元素不是块级元素,如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。

<p>温馨<span>提示:</span></p>
<p>温馨提示</p>

如果不给<span>加样式,那么这两个的效果基本没有区别。

a标签

<a>标签定义超链接,用于从一张页面链接到另一张页面。
<a>元素最重要的属性是 href 属性,它指示链接的目标.

指向W3School的超链

<a href="http://www.w3school.com.cn">W3School</a>

相关文章

网友评论

      本文标题:HTML基础

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