Blogger Information
Blog 1
fans 0
comment 0
visits 599
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML结构和基本标签和CSS类选择器使用案例—2019年1月15日18时50分
Mz-博客
Original
600 people have browsed it

一、HTML页面由哪些重要部分组成:
<!DOCTYPE>  文档类型说明  <html> 使用语言说明  <head>浏览器读取头部  <body>当前html内容存放位置

<!-- DOCTYPE 声明文档类型:html-->
<!DOCTYPE html>
<!-- lang 当前HTML文档使用语言说明 -->
<html lang="en">
<!-- head 浏览器读取头部说明 -->
<head>
<!-- utf-8 全球通用字符集编码 -->
<meta charset="UTF-8">
<title>html结构介绍</title>
</head>
<!-- body 当前html内容存放位置 -->
<body>
    介绍html结构实例
</body>
</html>

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html结构介绍</title>
</head>
<body>
    介绍html结构实例
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、HTML常用标签介绍:

<h1>.....<h6>标题  <div>块级元素  <ul>无序列表  <ol>无序列表  <dl>无序列表  <li>列表项  <p>段落  <img>图片  <video>视频  <hr>分隔线

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML常用标签介绍</title>
</head>
<body>
    <!-- h1...h6 标题 -->
    <h1>HTML常用标签介绍</h1>
    <!-- p 段落文字 -->
    <p>很多实用和经常用到的HTML常用标签介绍以及简单的应用</p>
    <!-- div 块元素 -->
    <div>
        <!-- ul 无序列表 -->
        <ul>
            <li>这是无序排列第1行</li>
            <li>这是无序排列第2行</li>
            <li>这是无序排列第3行</li>
            <li>这是无序排列第4行</li>
        </ul>
    </div>
    <!-- hr 水平分隔线 -->
    <hr>
    <!-- div 块元素 -->
    <div>
        <!-- ol 有序列表 -->
        <ol>
            <li>这是无序排列第1行</li>
            <li>这是无序排列第2行</li>
            <li>这是无序排列第3行</li>
            <li>这是无序排列第4行</li>
        </ol>
    </div>
    <!-- hr 水平分隔线 -->
    <hr>
    <!-- div 块元素 -->
    <div>
        <!-- dl 定义列表 -->
        <ol>
            <li>这是无序排列第1行</li>
            <li>这是无序排列第2行</li>
            <li>这是无序排列第3行</li>
            <li>这是无序排列第4行</li>
        </ol>
    </div>
    <!-- hr 水平分隔线 -->
    <hr>
    <h3>这是一张图片</h3>
    <!-- img 图片标签 src是引用图片地图  alt是图片文字说明,无图显示时显示文字 -->
    <img src="images/mz.jpg" alt="没有图片哦">
    <h3>一段小视频</h3>
    <!-- video 视频标签 src引用视频地址 controls显示播放控件  width宽度设置 -->
    <video src="images/mz.mp4" controls="controls" width="400"></video>
</body>
</html>


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML常用标签介绍</title>
</head>
<body>
    <!-- h1...h6 标题 -->
    <h1>HTML常用标签介绍</h1>
    <!-- p 段落文字 -->
    <p>很多实用和经常用到的HTML常用标签介绍以及简单的应用</p>
    <!-- div 块元素 -->
    <div>
        <!-- ul 无序列表 -->
        <ul>
            <li>这是无序排列第1行</li>
            <li>这是无序排列第2行</li>
            <li>这是无序排列第3行</li>
            <li>这是无序排列第4行</li>
        </ul>
    </div>
    <!-- hr 水平分隔线 -->
    <hr>
    <!-- div 块元素 -->
    <div>
        <!-- ol 有序列表 -->
        <ol>
            <li>这是无序排列第1行</li>
            <li>这是无序排列第2行</li>
            <li>这是无序排列第3行</li>
            <li>这是无序排列第4行</li>
        </ol>
    </div>
    <!-- hr 水平分隔线 -->
    <hr>
    <!-- div 块元素 -->
    <div>
        <!-- dl 定义列表 -->
        <ol>
            <li>这是无序排列第1行</li>
            <li>这是无序排列第2行</li>
            <li>这是无序排列第3行</li>
            <li>这是无序排列第4行</li>
        </ol>
    </div>
    <!-- hr 水平分隔线 -->
    <hr>
    <h3>这是一张图片</h3>
    <!-- img 图片标签 src是引用图片地图  alt是图片文字说明,无图显示时显示文字 -->
    <img src="images/mz.jpg" alt="没有图片哦">
    <h3>一段小视频</h3>
    <!-- video 视频标签 src引用视频地址 controls显示播放控件  width宽度设置 -->
    <video src="images/mz.mp4" controls="controls" width="400"></video>
    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三、盒子和CSS选择器使用:



Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments