第一节前端基础之HTML

1.HTML介绍与基础标签

1.1 简介

HTML（hyper text markup language）：超文本标记语言，是用于创建网页的一种标准语言，由W3C制定。

1.2 语法

<!DOCTYPE html><!-- 文档声明 -->
<html lang="en">

<head><!-- 用于引入一些资源文件，如CSS、js，不会直接展示-->
    <meta charset="UTF-8">
    <title>语法（显示位置：标签）</title><!-- 显示在浏览器的标签上 -->
</head>

<body>
浏览器直接展示的部分。
<!-- 标题（6级） -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!--    段落-->
<p>这是一个段落</p>
<!--    超链接-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!--图片（网络路径）-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
<!--图片（本地路径）：绝对路径和相对路径（常用）-->
<img src="imgs/p1.jpg" alt="图片加载失败提示文字" title="鼠标悬浮提示文字">
</body>

</html>

2.列表标签和表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
<!--无序列表-->
<ul type="circle"><!-- 默认为实心圆，可自定义：square(正方形),circle(空心圆) -->
    <li>第一条</li>
    <li>第二条</li>
    <li>第三条</li>
</ul>
<!--有序列表-->
<ol type="I"><!-- 默认为数字（123），可自定义：A、a、I、i -->
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>列表标题</dt>
    <dd>对标题的描述一</dd>
    <dd>对标题的描述二</dd>
</dl>

<!--表单-->
<!-- action属性可以将表单内容提交给目标地址,method方法有get和post两种 -->
<form action="https://a.php" method="get">
<!--    表单元素-->
<!--    文本输入框-->
<!--    name属性表示提交的代号，value属性可设置默认值，placeholder可设置提示语（聚焦后自动消失）-->
    <input type="text" name="user" value="" placeholder="请输入用户名"><br/>
<!--    密码输入框-->
    <input type="password" name="pwd" value="" placeholder="请输入密码"><br/>

<!--    提交按钮（与登录按钮一样，只不过默认文字为“提交”）-->
    <input type="submit" value="注册"><br/>
<!--    登录按钮-->
    <input type="button" value="登录"><br/>
<!--    重置按钮（可以重置本表单中输入的所有内容）-->
    <input type="reset"><br/>

<!--    单选框-->
<!--    设置相同的name属性后，就变成了单选框，最终会将其value值提交给目标地址（不是input标签后面的“男/女”）-->
    <input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女<br/>

<!--    复选框-->
<!--     同样的，最终是将其value值提交给目标地址（不是input标签后面的html/css/js）-->
    <input type="checkbox" name="course" value="html">html
    <input type="checkbox" name="course" value="css">css
    <input type="checkbox" name="course" value="js">js<br/>

<!--    多行文本域-->
    <textarea name="txt" cols="33" rows="11"></textarea>

</form>

</body>

</html>

3.表格标签和布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格与布局</title>
</head>

<body>
<!--表格基本属性-->
<!--table标签默认无边框,cellspacing表示单元格之间的空白,
cellpadding表示单元边沿与其内容之间的空白,width是表格总宽度,bgcolor是背景色,
align是对齐方式(left,center,right),放在table内是整个表格相对网页居中,放在tr内是某行内容居中,-->
<table border="1" cellspacing="0" cellpadding="5" width="400" bgcolor="#a9a9a9" align="center">
<!--    表格标题:caption(自动居中)-->
    <caption>演员表</caption>

<!--    表头:th(自动居中并加粗)-->
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>

    <tr align="center" bgcolor="#f0ffff"><!-- tr表示一行 -->
        <td>1</td><!-- td表示一列 -->
        <td>2</td><!-- td表示一列 -->
        <td>3</td><!-- td表示一列 -->
        <td>4</td><!-- td表示一列 -->
    </tr>
    <tr bgcolor="#f0ffff">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>

<!--    表格的列合并:colspan-->
<!--    数值为n就表示总共跨n个格子,右边的格子如果不注释掉,就会将其向右顶(建议注释掉)-->
    <tr bgcolor="#f5f5dc" >
        <td colspan="4">5</td>
<!--        <td>6</td>-->
<!--        <td>7</td>-->
<!--        <td>8</td>-->
    </tr>
    <tr bgcolor="#f5f5dc">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>

<!--    表格的行合并:rowspan,与列合并同理(但要注意,也是操作td)-->
    <tr>
        <td rowspan="2">4</td>
        <td>3</td>
        <td>2</td>
        <td rowspan="2">1</td>
    </tr>
    <tr>
<!--        <td>4</td>-->
        <td>3</td>
        <td>2</td>
<!--        <td>1</td>-->
    </tr>
</table>


<!--布局标签:div (division的简写)-->

<!--块级元素:独占一行的元素,如div标签/p标签-->
<div>
  布局标签
</div>
<p>学习真<span style="color:red">开心</span></p>

<!--行内元素:如a标签/span标签-->
<a href="https://baidu.com">百度一下</a>
<a href="https://baidu.com">百度一下</a>

</body>

</html>

4.HTML综合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML综合应用-百度登录框</title>
</head>
<body>
<div>
    <div>
        <img src="https://passport.baidu.com/passApi/img/newloginlogo.png">
        <span>用户名密码登录</span>
    </div>
    <form action="#" method="post">
        <p><input type="text" placeholder="手机/邮箱/用户名" name="userName"></p>
        <p><input type="password" placeholder="密码" name="pwd"></p>
        <p><input type="checkbox" value="yes" name="autoLogin" checked>下次自动登录</p>
        <p><input type="submit" value="登录"></p>
        <p><a href="#">忘记密码？</a></p>
    </form>
    <div>
        <a href="#">扫码登录</a> <a href="#">立即注册</a>
    </div>
</div>

</body>
</html>

5.HTML5

HTML5是HTML的全新版本，新增了一些标签，更加的语义化。

5.1 结构化标签

header、nav、article、section、aside、footer

5.2 功能性标签

audio、video

width
height
src：媒体链接
controls：显示控制面板
loop：循环播放
autoplay：自动播放（写了就自动播，不写就不会）
play()：播放函数
pause()：暂停函数
load()：重新加载函数

<img id="on" src="media/imgs/on.png">
<audio id="aud" src="media/All%20Falls%20Down.mp3"></audio>
<div></div>
<video id="vid" controls src="media/xgdemo.mp4"></video>

<script>
    var on = document.getElementById('on');
    var aud = document.getElementById('aud');
    var musicPlay = false; //播放状态（false处于未播放）
    on.onclick = function () {
        if (musicPlay === false){
            aud.play();
            musicPlay = true;
            on.src ="media/imgs/off.png";
        }else {
            aud.pause();
            musicPlay = false;
            on.src ="media/imgs/on.png";
        }
    }
</script>

5.3 表单新增属性

number、rul、email、range、color、tel、date、search

<form>
    <input type="number" placeholder="数字"><br>
    <input type="url" placeholder="url"><br>
    <input type="email" placeholder="email"><br>
    <input type="range"><br>
    <input type="color"><br>
    <input type="tel" placeholder="tel"><br>
    <input type="date"><br>
    <input type="search" placeholder="search"><br>
    <input type="submit">
</form>

※ 温馨提示

常见问题：

1.不会下载文件？答：请查看下载帮助。
2.无法搜到想要的书籍或软件？答：请简化搜索词；若还没有，请进入许愿屋，向我们提交。
3.下载地址为什么隐藏了？答：部分特殊内容需登录才能下载！

我也是有底线的~