HTML 入门集锦

  • HTML 的核心功能就是“标记”内容,进而给出结构,是为内容添加语义结构的一种手段;
  • HTML 一般以标签 < 开头,以标签 > 结尾;
  • 标签一般成对出现,一个开始标签和一个结束标签就在文档中创建了一个元素;
  • 结束标签一般用一个斜杠表示元素的关闭或结束,如</p>;
  • 有些元素是可以嵌套的,子元素不能超出父元素的范围;

常用元素:

  • <!DOCTYPE html> 这是标准的文档类型声明,必须放在文档的第一行;
  • html 包含文档中的所有 HTML 内容;
  • head 文档的头部,包含所有文档的元数据,如标题和对外部样式表、脚本的引用;
  • title 文章的标题,浏览器会把这个元素的内容显示在窗口标题栏中,并在收藏网页时使用这个标题;
  • body 所有不包含在 head 中的元素都包含在 body 中,这里的内容是网页中看到的;
  • h1、h2、h3、h4、h5、h6 用于标记不同级别的标题,分别表示*标题、二级标题……
  • p 段落;
  • ul、ol、li ul 用于标记无序列表,ol 标记有序列表,li 用于标记列表事项;
  • em 表示强调,一般显示为斜体;
  • strong 表示额外强调,一般显示为粗体;
  • a 链接。一般显示为带下划线的蓝色文本,可另行设置;
  • span 任意文本,一般都包含在 p 这样的大容量元素中;
  • div 任意文本块,用于分组相关元素。
  • table 列表,table 内的表头标签为 thread,表头层标签为 tr,表头内容标签为 th;

     table 内表身标签为 tbody,表身层标签为 tr,表身内容标签为 td;

  • form 填表,可用于填写信息。
  • img 插入图像,可从网页插入,也可从本地插入。

 

<!DOCTYPE html>
<!-- 标准的文档类型声明 -->

<html>
<!-- HTML 开始标签-->

    <head>
    <!-- head 开始标签 -->
        <title>this is a page title</title>
        <!-- title 标签,将显示在浏览器的窗口标题栏中-->
    </head>
    <!-- head 结束标签 -->

<!-- paragraphe -->
<!-- 以下内容将出现在网页上被我们看见 -->
    <body>
    <!-- body 开始标签 -->

        <h1>This is a heading</h1>
        <h2>This is a heading</h2>
        <h3>This is a heading</h3>
        <h4>This is a heading</h4>
        <h5>This is a heading</h5>
        <h6>This is a heading</h6>
        <!-- h1 ~ h6 级标签,不同级的标签有不同的显示效果 -->

        <p><a href="http://baidu.com" target="_blank">This is a page</a></p>
        <!-- p 元素内包含 a 元素,即一个链接,链接为“百度”,在网页上显示为 “This is a page" -->
        <!-- target="_blank" 表示在新开的窗口打开网页-->

        <p>This is a page</p>
        <!-- 新开一行,内容为“This is a page” -->

        <p>Lorem <strong><em>dolor</em> sit</strong>  amet consectetur adipisicing elit. 
            Nobis, accusamus ab at delectus veritatis aperiam fugiat placeat accusantium doloribus incidunt sint libero dolorum,
             architecto qui! Assumenda quod ex earum velit.</p>
        <!-- 自动填充的一段文字,其中 dolor 显示为斜体和加粗 -->

        <!-- 无序列表 -->
        <ul>
            <li>List item 01</li>
            <li>List item 01</li>
            <li>List item 01</li>
            <li>List item 01</li>
            <li>List item 01</li>
        </ul>

        <!-- 有序列表 -->
        <ol>
            <li>List item 01</li>
            <li>List item 01</li>
            <li>List item 01</li>
            <li>List item 01</li>
            <li>List item 01</li>
        </ol>

        <!-- 表格 -->
        <table>
            <thead>
            <!-- 表格头 -->
                <tr>
                <!-- 第一行表格头 -->
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>age</th>
                    <th>email</th>
                    <!-- 分别有四种内容,其名字为 First Name、Last Name、age、email -->
                </tr>
            </thead>

            <tbody>
            <!-- 表格尾 -->
                <tr>
                    <td>Bland</td>
                    <td>Nancy</td>
                    <td>18</td>
                    <td>qwewqe@qwewd.com</td>
                </tr>
                <!-- 第一行的四个值 -->
                <tr>
                    <td>Bland</td>
                    <td>Nancy</td>
                    <td>18</td>
                    <td>qwewqe@qwewd.com</td>
                </tr>
                <!-- 第二行的四个值 -->
                <tr>
                    <td>Bland</td>
                    <td>Nancy</td>
                    <td>18</td>
                    <td>qwewqe@qwewd.com</td>
                </tr>
                <!-- 第三行的四个值 -->
                <tr>
                    <td>Bland</td>
                    <td>Nancy</td>
                    <td>18</td>
                    <td>qwewqe@qwewd.com</td>
                </tr>
                <!-- 第四行的四个值 -->
            </tbody>
        </table>
        
        <!-- 填表 -->
        <form>
            <div>
                <label>First Name</label>
                <!-- 要填的内容是 First Name -->
                <input type="text" name="firstname" placeholder="Enter First Name">
                <!-- 输入并记录填入的值,在框内提示 Enter First Name -->
            </div>
            <input type="submit" name="submit" value="Submit">
            <!-- 设置提交按钮 -->
        </form>




        <img width="1000vw" src="flower.jpg">
        <!-- 导入图片 flower.jpg 宽度为 1000vw (一种自适应宽度表达方式) -->
    </body>
</html>

 

HTML 入门集锦

上一篇:论文阅读:Relation Structure-Aware Heterogeneous Information Network Embedding


下一篇:webpack各种配置文件设置