HTML——基础教程 w3cschool（一）

最新推荐文章于 2021-12-24 14:34:07 发布

woainijinying

最新推荐文章于 2021-12-24 14:34:07 发布

阅读量1.6k

点赞数

分类专栏： HTML5 栀未央Android 文章标签： html w3cschool

本文链接：https://blog.csdn.net/woainijinying/article/details/52774716

版权

本文是HTML5的基础教程，主要介绍了HTML的定义、版本、基本标签结构，包括注释、文档结构、链接CSS文件、元信息设置等。同时，讲解了块级标签和行级标签的区别，如标题、水平线、段落和列表的使用。

摘要由CSDN通过智能技术生成

HTML——基础教程 w3cschool（一）

Html标签

HTML HyperTextMaekupLanguage 超文本标签语言

HTML 网页的“源码”

浏览器：”解释和执行” HTML源码的工具

HTML版本

HTML4.1.0

HTML5： HTML的最新版本，是HTML、XHTML以及HtmlDom的新标准。

Html 标签是最基本的单位和重要组成。

使用< > < > 括起来；

标签都是闭合的。

属性是标签的一部分,用于包含额外信息

可以有多个属性

属性和属性值成对出现

语法

注释

HTML文档结构

<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
            <P>
                  Title
            </P>
</body>
</html>

使用<link>标签连接CSS文件

使用<meta>标签 1描述文档类型和字符编码

2描述搜索关键字和描述

标签的分类

块级标签，显示为块，前后隔一行；

行级标签，按行逐一显示

标题<h1>......<h6>

<hr/>水平线
<p></p>段落

<br>为换行

<img src="http://www.w3school.com.cn/i/eg_smile.gif" alt="路径不对"/>

<span style="font-size: 50px;color: #fa111e">部分字加特技</span></p>
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 空格
<iframe src="http://baidu.com" width="100%"></iframe> 添加网址

<ul type="none" >
    <li style="width:10%;float:left;margin-top: 3px" >首&nbsp;&nbsp;&nbsp;页</li>
    <li style="width:12.5%;float:left;margin-top: 3px">家用电器</li>
    <li style="width:12.5%;float:left;margin-top: 3px">手机数码</li>
    <li style="width:12.5%;float:left;margin-top: 3px">日用百货</li>
    <li style="width:12.5%;float:left;margin-top: 3px">书&nbsp;&nbsp;&nbsp;籍</li>
    <li style="width:12.5%;float:left;margin-top: 3px">帮助中心</li>
    <li style="width:12.5%;float:left;margin-top: 3px">免费开店</li>
    <li style="width:12.5%;float:left;margin-top: 3px">全球咨询</li>
</ul>

用于布局的块级标签——列表

无序列表

有序列表

定义描述列表

</p>
<h1>今天是十月一</h1>
<h2>今天是十月一</h2>
<h3>今天是十月一</h3>
<h4>今天是十月一</h4>
<h5>今天是十月一</h5>
<h6>今天是十月一</h6>
<!--有序列表-->
<h3>有序列表</h3>
<ol>
    <li>填写信息</li>
    <li>收到邮件</li>
    <li>注册成功</li>
    <li>哈哈哈</li>
</ol>
<h3>无序列表</h3>
<ul>
    <li>填写信息</li>
    <li>收到邮件</li>
    <li>注册成功</li>
    <li>哈哈哈</li>
</ul>
<dl>
    <dt><h3>自定义描述标签标题</h3></dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>
<dl>
    <dt><img src="../img/b.jpg" height="100" width="100"/></dt>
    <dd>自定义列表图文混编描述1</dd>
    <dd>描述2</dd>
</dl>

         音频+视频
<!--<audio src="../music/姜文生%20-%20平凡之路+归.mp3"autoplay  controls="controls"></audio>-->
<!--播放音频-->
<!--<audio controls autoplay>-->
    <!--<source  src="../music/姜文生%20-%20平凡之路+归.mp3"  type="audio/mpeg">-->
    <!--<source  src="../music/姜文生%20-%20平凡之路+归.mp3" type="audio/ogg">-->
    <!--<embed height="50" width="100" src="../music/姜文生%20-%20平凡之路+归.mp3" ></embed>-->
<!--</audio>-->
<video width="320" height="240" controls>
    <source src="../mp4/完整版.mp4" type="video/mp4">
    <source src="../mp4/完整版.mp4" type="video/ogg">
    <source src="../mp4/完整版.mp4" type="video/webm">
    <object data="../mp4/完整版.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240">
    </object>
</video>

表格

<table border="1px" style="width: 600px;height: 400px;border: 5px solid red"
cellpadding="20dp"
><tr>
        <th>标题</td>
        <th>回复/阅读</th>
        <th>发表</th>
        <th>最后回复</th>

    </tr>
    <tr >
        <td rowspan="2">公告：我为圣诞狂</td>
        <td>99/100</td>
        <td>火车王</td>
        <td>我为圣诞狂</td