HTML——基础学习笔记（一）

最新推荐文章于 2020-03-24 10:05:28 发布

zhangyufeng0126

最新推荐文章于 2020-03-24 10:05:28 发布

阅读量596

点赞数 1

分类专栏： HTML HTML 学习专栏文章标签： html 程序员 webview 博客

本文链接：https://blog.csdn.net/zhangyufeng0126/article/details/52750140

版权

HTML 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

HTML 学习专栏

7 篇文章 2 订阅

订阅专栏

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>
    </tr>
    <tr>

        <td>99/100</td>
        <td colspan="2">火车王</td>

    </tr>
</table>

表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="http://baidu.com" width="100%"></iframe>

<fieldset>
    <legend> 标题</legend>
    <form action="" method="post">
        <div style="width: 1000px;height: 500px;background-color: #0c63ff ;overflow: auto">
            <table border="2px" style="width: 1000px;height:800px;border-spacing: 0px">
                <tr>
                    <td>登录名：</td>
                    <td><input type="text" id="text" name="text">（可包含a-z，0-9和下划线）</td>
                    <td><b>阅读贵美网服务协议</b></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" id="text1" name="text">（至少包含6个字符）</td>
                    <td rowspan="8" ><textarea rows="50" cols="30" οnfοcus="this.value=''">欢迎阅读服务条款协议.......</textarea></td>
                </tr>
                <tr>
                    <td>再次输入密码：</td>
                    <td><input type="password" id="text2" name="text"></td>
                </tr>
                <tr>
                    <td>电子邮箱：</td>
                    <td><input type="text" id="text4" name="text">（必须包含@字符）</td>
               </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="radio" id="r1" name="r1" value="男">男
                        <input type="radio" id="r2" name="r1" value="女">女
                    </td>
                </tr>
                <tr>
                    <td>头像：</td>
                    <td><input type="file" name="file"></td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox" name="chb" value="运动">运动
                        <input type="checkbox" name="chb" value="聊天">聊天
                        <input type="checkbox" name="chb" value="玩游戏">玩游戏
                    </td>
                </tr>
                <tr>
                    <td>喜欢城市</td>
                    <td><select>
                        <option>【请选择】</option>
                        <option>烟台2</option>
                        <option>烟台3</option>
                    </select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="同意右侧服务条款，提交注册信息" disabled>
                        <input type="button" value="重填" >
                    </td>
                </tr>

            </table>
            </div>
        </form>
    </fieldset>
</body>
</html>

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            background-color: #fa111e;
            width: 300px;
            height: 500px;
            float: left;
        }
        .d2{
            background-color: #55fa37;
            width: 300px;
            height: 500px;
            float: left;
        }
        .d3{
            background-color: #5d71fa;
            width: 300px;
            height: 500px;
            float: left;
        }
        .d4{
            background-color: #251c3b;
            width: 300px;
            height: 500px;
            clear: left;
            float: left;
        }
        .d5{
            background-color: #9b256b;
            width: 300px;
            height: 500px;
            float: left;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .d6{
              background-color: #8d7ab5;
              width: 300px;
              height: 500px;
              clear: left;
            position: relative;
          }
        .d7{
            background-color: #3db54e;
            width: 130px;
            height: 150px;
            position: absolute;
            top: 30px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6">
    <div class="d7"></div>
</div>
</body>
</html>

弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒模型</title>
    <style>
        #main{
            display: flex;
            width: 90%;
            height: 100px;
            margin: auto;
            border: 2px solid red;
        }
        #main div{
            flex: 1;
        }
    </style>
</head>
<body>

<div id="main">
    <div style="background-color: #9b256b"></div>
    <div style="background-color: #18279b"></div>
    <div style="background-color: #faf915"></div>
    <div style="background-color: #fa111e"></div>
</div>

</body>
</html>

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        body{
            border: 5px solid blue;
            /*padding: 20px;*/

        }
        .div{
            border: 5px solid red;
            background-color: #faf915;
            padding: 20px;
            margin: 20px;
            width: 80px;
            height: 150px;
        }
    </style>
</head>
<body>
<div class="div">
    我是火车王
</div>
</body>
</html>

zhangyufeng0126

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML——基础学习笔记（一）

HTML——基础教程 w3cschool（一）Html标签 HTML HyperTextMaekupLanguage 超文本标签语言HTML 网页的“源码” 浏览器：”解释和执行” HTML源码的工具 HTML版本HTML4.1.0HTML5：HTML的最新版本，是HTML、XHTML以及HtmlDom的新标准。 Html
复制链接

扫一扫