美文网首页
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