美文网首页
HTML基础----初识

HTML基础----初识

作者: 小白李呆呆 | 来源:发表于2017-09-19 15:42 被阅读0次

    先看一下HTML整体结构

    首先创建一个以.html结尾的文件
    注意:<!-、- --> 代表注释

    <!DOCTYPE html>  <!-- 文档声明,需要顶格书写 -->
    <html>  <!-- 全部内容,都需要放在这对标签里 -->
        <head>  <!-- 网页头部,对网页进行设置 -->
            <meta charset="utf-8">  <!-- 设置网页编码 -->
            <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置缩放,针对移动端 -->、
            <meta http-equiv="X-UA-Compatible" content="ie=edge">  <!-- ie浏览器以最高版本渲染 -->
            <title>初识网页</title>  <!-- 设置网页标题 -->
        </head>
        <body>  <!-- 网页主体,显示在网页上的内容 -->
            这里放内容
        </body>
    </html>
    

    相信看了上面这段代码,应该对HTML基本结构有了大致的了解。
    那接下来我们看一下一些基本的标签

    基本标签

    注意,这里仅仅只展示了一小部分经常使用的标签

    元素标签分为两类:

    • 块级元素:独占一行,默认宽与父级宽相同
    • 行内元素:元素之间排列在一行,不能设置宽高,由内容撑开。

    一些块级元素

    这里只列出了一些常用的

    1. 标题
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    ...
    <h6>这是六级标题</h6>
    

    注:标题从一级标题到六级标题。

    1. 段落
    <p>这是段落</p>
    

    3.块级容器

    <div>块级容器,没有默认样式</div>
    
    1. 表单
    <form>...</form>
    
    1. 列表
    <!-- 无序列表 -->
    <ul>
        <li>a</li>
        ...
        <li>z</li>
    </ul>
    
    <!-- 有序列表 -->
    <ol>
        <li>1</li>
        ...
        <li>n</li>
    </ol>
    
    <!-- 定义列表 -->
    <dl>
        <dt>项</dt>
        <dd>描述</dd>
        ...
    </dl>
    
    1. 表格
    <!-- 基本结构 -->
    <table>
        <tr> 
            <td>列1</td>
            <td>列2</td>
        </tr>
    </table>
    

    一些常用行内元素

    1. 锚点
    <a href="">...</a>
    
    1. 图片
    <img src="" alt="">
    

    注:img虽然是行内元素,但可以设置宽高

    1. 常用内联标签
    <span>...</span>
    

    标签语义化

    在布局中,尽量使用带语义的标签,目的是为了搜索引擎更好的理解网页结构,提高排名(SEO),也为了代码的维护和阅读。
    最后,一定要多敲代码,都敲出来在浏览器看看显示效果。

    相关文章

      网友评论

          本文标题:HTML基础----初识

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