第五模块 前端开发(1) HTML

1. html入门

<!-- 声明文档的类型 标记该文档为HTML5的文件 -->
<!DOCTYPE html>

<!-- 页面的根节点 -->

<!-- html中的标签都是闭合标签  闭合标签包含 双闭合和单闭合
双闭合:<html></html>
单闭合:<meta />
 -->
<html>
    <head>
        <!-- 声明头部的元信息  对我们文档 规定编码格式 -->
        <meta charset="utf-8" />
        <!-- 包含头部的信息  是一个容器 包含 style title meta script link等 -->
    </head>
    <body>
        <!-- 包含浏览器显示的内容标签 div p a img input等等 -->

        这是我们的文档结构

    </body>
</html>

2. head标签相关内容

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端) -->
    
    <!-- 文档的标题 -->
    <title>drfung</title>

     <!-- 常用两个属性
        http-equiv:它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
      -->
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- 5秒之后 重定向 到指定的网站 -->
    <!-- <meta http-equiv="refresh" content="5;URL=https://www.baidu.com"/> -->

    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 为了我们的SEO优化  工作的时候下面这两句 要写-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="drfung">
    
    <!-- 定义我们的网站图标 -->
    <link rel="icon" href="./fav.ico">
    
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" type="text/css" href="./index.css">

    <!-- 定义内部样式表 -->
    <style type="text/css">
        
    </style>
    
    <!-- 定义内容脚本文件 -->
    <script type="text/javascript">
        
    </script>

    <script src="./index.js"></script>

</head>
<body>
    
</body>
</html>

3. 常用标签

  1. 常用标签一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签一</title>
</head>
<body>
    <div class="p1">
        <p style="height: 2000px" id="p1">顶部</p>
    </div>
    <div>
        <!--body相关标签-->
        <!--heading: 标题h1~h6,没有h7-->
        <!--块级元素: 1.独占一行; 2 可以设置宽高-->
        <h1>世界杯时间</h1><h2>世界杯时间</h2>
        <h3>世界杯时间</h3>
        <h4>世界杯时间</h4>
        <h5>世界杯时间</h5>
        <h6>世界杯时间</h6>
        <h7>世界杯时间</h7>
    </div>

    <div class="p1">
        <p><strong>大英帝星</strong>凯恩<br>2018年<span>人工智能</span></p>
        <hr>
        <p>拉玛西亚学院立志帮助有志向的年轻人通过努力学习 ,<s>金融分析</s>,人工智能等互联网最前沿技术</p>
    </div>

    <div class="anchor">
        <!--a标签属于行内标签: 在同一行内显示 设置宽高 不起作用-->
        <!--_self: 默认值,在当前标签打开资源-->
        <!--_blank: 在新的标签打开资源-->
        <a href="https://hub.docker.com" target="_blank" title="docker">Docker Hub</a>
        <a href="./a.zip">本地文件</a>
        <a href="mailto:recoba01@163.com" style="width:300px;height: 40px;">联系我们</a>
        <!--返回页面顶部内容-->
        <a href="#">跳转到顶部</a>
        <!--跳转到指定id-->
        <a href="#p1">跳转到顶部段落标签</a>

        <!--javascript:是在执行a标签动作时,执行一段javascript代码;而javascript:;表示什么都不做;-->
        <a href="javascript:alert();">alert</a>
        <a href="javascript:;">nothing</a>
    </div>

    <div class="lists">
        <!--无序列表-->
        <ul type="none">
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
        <!--有序列表-->
        <ol style="list-style: none">
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </div>

    <div class="image">
        <!--可以设置行高 可以在一行内显示 叫行内块标签-->
        <img src="./homesmall.png" alt="python pics" style="width: 200px;height: 200px;">
        <img src="./homesmall2.png" alt="linux pic" style="width: 200px;height: 200px;">
    </div>

    <div>
        <!--小练习: 显示两张图片,独占一行,鼠标移上去为小手状态-->
        <p><a href="https://sina.com.cn"><img src="./homesmall.png" alt="python pics"></a></p>
        <p><a href="https://sina.com.cn"><img src="./homesmall2.png" alt="linux pics"></a></p>
    </div>

</body>
</html>
  1. 常用标签- table
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="0">
    <thead>
    <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="3">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>
    <tr>
        <td colspan="6">课程表</td>
    </tr>
    </tbody>
</table>
</body>
</html>
  1. 常用标签-表单提交
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件</title>
</head>
<body>
<!--form表单是一个块级标签-->
<form action="https://www.baidu.com">
    <!--label标签是行内标签 input是行内元素-->
    <p>
        <label for="user">用户名:</label>
        <input type="text" name="username" id="user" placeholder="请输入用户名:">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="text" name="password" id="password" placeholder="请输入密码:">
    </p>

    <!--单选框 checked会被默认选中 产生互斥效果name要相同-->
    <p>
        用户性别:
        <input type="radio" name="sex" value="男" checked="">男
        <input type="radio" name="sex" value="女">女
    </p>

    <!--复选框-->
    <p>
        用户爱好:
        <input type="checkbox" name="fav" value="eat" checked="check">eat
        <input type="checkbox" name="fav" value="drink">drink
        <input type="checkbox" name="fav" value="play">play
        <input type="checkbox" name="fav" value="happy">happy
    </p>

    <!--上传文件-->
    <p>
        <input type="file" name="textFile">
    </p>
    <!--文本域-->
    <p>
        自我介绍:
        <textarea name="txt" id="" cols="30" rows="10" placeholder="welcome young men!"></textarea>
    </p>

    <!--下拉列表-->
    <select name="sel" size="2" multiple="">
        <option value="sz" selected>深圳</option>
        <option value="bj">北京</option>
        <option value="sh">沙河</option>
    </select>

    <p>
        <!--显示普通的按钮-->
        <input type="button" name="btn" value="提交" disabled="disabled">
        <!--重置按钮-->
        <input type="reset" name="">
        <!--提交form表单使用 type=submit按钮-->
        <input type="submit" name="btn" value="submit">
    </p>
</form>

<button type="button">按钮</button>
</body>
</html>

4. 标签分类

  • 块级元素: div p h1~h6 ol ul table from li
    • 独占一行
    • 可以设置宽高,如果设置了宽度和高度,就是当前的宽高,如果宽度和高度都没有设置,宽度就是父盒子的宽度,高度根据内容填充
  • 行内元素: 在一行内显示,不能设置宽度和高度,宽度和高度根据内容填充.
  • 行内块:
    • 在一行内显示
    • 可设置高

标签嵌套规则:
块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素, 只能包含其它的内联元素
有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是h1~h6 p

推荐阅读更多精彩内容