HTML概述

HTML ,CSS , JavaScript, JQuery, Vue 的关系

HTML可以写一个简单的前端，但是很丑，所以需要CSS对HTML进行美化
HTML是静态的。JavaScript可是使页面动起来，产生交互效果
JavaScript原生代码写起来复杂。JQuery是封装JavaScript的库，把复杂的JavaScript封装，易于操作JavaScript
Vue是主流的前端框架

学习HTML的重心是表单，不要搞混重心

我们一般在网页右键，选择【检查】，学习HTML

HTML的标准交给W3C来做

HTML结构

HTML基本信息

<!--  段落标签，p按住tab键,  -->

<p>The HTML <p> element defines a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<!-- 换行<br> -->

<!-- 水平线标签 <hr> -->

<hr>

<!-- 字体样式标签 -->

粗体: <strong>i love you</strong>

斜体: <em>i love you</em>

<!-- 特殊符号，也就是转义符号 -->

图像标签

超链接标签以及应用

超链接可以从一个连接跳转到另一个连接，也可以作为锚链接，跳转到页面的特定地方，可以作为页面目录的标签

锚链接

1. 需要一个锚标记 <a href="#top">跳转到name=top的页面</a>

2. 跳转到标记 <a name="top">顶部</a>

<!-- 使用a标签做了一个name标记,标记为top, 我们可以通过标记name中的top跳转页面 -->

<a name="top">顶部</a>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<!--

锚链接

1. 需要一个锚标记      <a href="#top">跳转到name=top的页面</a>

2. 跳转到标记              <a name="top">顶部</a>

-->

<a href="#top">跳转到name=top的页面</a>

行元素与块元素

块元素是一个标签独占一行，比如标题和段落标签、

行元素，多个行元素在一行

列表标签

有序列表

<!--有序列表 order lists 也就是 ol  里面的标签都用list 也就是li-->

这是一个有序列表

<ol>

    <li>苹果</li>

    <li>华为</li>

    <li>小米</li>

</ol>

无序列表

<!--无序列表 Unordered lists  也就是 ul  里面的标签都用list 也就是li-->

这是一个无序列表

<ul>

    <li>鼠标</li>

    <li>键盘</li>

    <li>显示器</li>

</ul>

这是一个自定义列表

<!--自定义列表 Description Lists 也就是 dl -->

这是自定义列表

<dl>

    <!--  Defines a term 定义项目（也就是题目） -->

    <dt>学科</dt>

    <dd>Java</dd>

    <dd>C</dd>

    <dd>C++</dd>

    <dt>品牌</dt>

    <dd>苹果</dd>

    <dd>华为</dd>

    <dd>小米</dd>

</dl>

表格

表格 table

行 table row tr

列 table data td

<!--表格 table

    行 table row tr

    列 table data  td

-->

<table border="1px">

    <tr>

        <td>1-1</td>

        <td>1-2</td>

        <td>1-3</td>

    </tr>

    <tr>

        <td>2-1</td>

        <td>2-2</td>

        <td>2-3</td>

    </tr>

    <tr>

        <td>3-1</td>

        <td>3-2</td>

        <td>3-3</td>

    </tr>

</table>

跨行 colspan

<table border="1px">

    <tr>

        <!--   跨行 colspan   -->

        <td colspan="3">1-1</td>

        <td>1-2</td>

        <td>1-3</td>

    </tr>

    <tr>

        <td>2-1</td>

        <td>2-2</td>

        <td>2-3</td>

    </tr>

    <tr>

        <td>3-1</td>

        <td>3-2</td>

        <td>3-3</td>

    </tr>

</table>

跨列 rowspan

<table border="1px">

    <tr>

        <!--   跨列 rowspan  -->

        <td rowspan="3">1-1</td>

        <td>1-2</td>

        <td>1-3</td>

    </tr>

    <tr>

        <td>2-1</td>

        <td>2-2</td>

        <td>2-3</td>

    </tr>

    <tr>

        <td>3-1</td>

        <td>3-2</td>

        <td>3-3</td>

    </tr>

</table>

视频和音频

音频和视频

进度条 controls

自动播放 autoplay

<!--

音频和视频

进度条 controls

自动播放 autoplay

-->

<audio src="resources/audio/L1朗读.mp3" controls ></audio>

<video src="resources/video/复习警告.flv" controls autoplay></video>

网页结构

比较重要是头部header 脚部footer 侧边栏nav 其他作为了解

这样写结构更加明确，方便css进行标记

<header>

    <h2>网页头部</h2>

</header>

<section>

    <h2>网页主体</h2>

</section>

<footer>

    <h2>网页脚部</h2>

</footer>

内联标签

内联网页就是在一个网页里面显示另一个网页，比如可以嵌入一个百度网页

<body>

内联网页就是在一个网页里面显示另一个网页，比如可以嵌入一个百度网页

<br>

<iframe src="https:baidu.com"></iframe>

</body>

表单

get方式提交：我们可以在url中看到我们提叫的的信息，不安全

post方式提交：比较安全，适合传输大文件

<!-- 表单form -->

<form action="html1-标记.html" method="get">

    <p>用户名：<input type="text" name="username"></p>

    <p>密码：<input type="password" name="password"></p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

</form>

表单的属性

type中 value是默认初始值

type中 maxlength 是最大长度

type中文本框的大小

<form action="html1-标记.html" method="get">

    <p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>

    <p>密码：<input type="password" name="password"></p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

</form>

单选框

单选框，注意单选框name相同才能多选一，默认选中写checked

input type="radio" value: 表示框的值

name: 表示分的组，注意，相同组选一个，不同组可以都选

<!-- 表单form -->

<form action="html1-标记.html" method="get">

    <p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>

    <p>密码：<input type="password" name="password"></p>

    <p>

        <!--  单选框，注意单选框name相同才能多选一

              input type="radio"

              value: 表示框的值

              name: 表示分的组，注意，相同组选一个，不同组可以都选

        -->

        <input type="radio" value="boy" name="sex"/>男

        <input type="radio" value="girl" name="sex">女

    </p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

</form>

多选框

多选框，input type="checkbox" 默认选中写checked

<!-- 表单form -->

<form action="html1-标记.html" method="get">

    <p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>

    <p>密码：<input type="password" name="password"></p>

    <p>

        <!--  单选框，注意单选框name相同才能多选一

              input type="radio"

              value: 表示框的值

              name: 表示分的组，注意，相同组选一个，不同组可以都选

        -->

        <input type="radio" value="boy" name="sex"/>男

        <input type="radio" value="girl" name="sex">女

    </p>

    <p>

        <!--   多选框，input type="checkbox" -->

        爱好：

        <input type="checkbox" value="sleep" name="hobby" />睡觉

        <input type="checkbox" value="code" name="hobby" />敲代码

        <input type="checkbox" value="chat" name="hobby" />聊天

        <input type="checkbox" value="game" name="hobby" />游戏

    </p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

</form>

按钮

<input type="button" name="btn1" value="点击变帅">

<form action="html1-标记.html" method="get">

    <p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>

    <p>密码：<input type="password" name="password"></p>

    <p>

        <!--  单选框，注意单选框name相同才能多选一

              input type="radio"

              value: 表示框的值

              name: 表示分的组，注意，相同组选一个，不同组可以都选

        -->

        <input type="radio" value="boy" name="sex"/>男

        <input type="radio" value="girl" name="sex">女

    </p>

    <p>

        <!--   多选框，input type="checkbox" -->

        爱好：

        <input type="checkbox" value="sleep" name="hobby" />睡觉

        <input type="checkbox" value="code" name="hobby" />敲代码

        <input type="checkbox" value="chat" name="hobby" />聊天

        <input type="checkbox" value="game" name="hobby" />游戏

    </p>

    <p>

        <!--   按键     -->

        <input type="button" name="btn1" value="点击变帅">

    </p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

</form>

图标按键

图片按钮,和submit的效果一样

<!--   图片按钮,和submit的效果一样  -->

<input type="image" src="https://scpic.chinaz.net/Files/pic/icons128/7903/w4.png">

下拉框

下拉框select，中间的每一项是由option组成

<form action="html1-标记.html" method="get">

    <p>

        <!--   下拉框select，中间的每一项是由option组成     -->

        国家

        <select name="列表名称">

            <option value="China">中国</option>

            <option value="America">美国</option>

            <option value="Japan">日本</option>

        </select>

    </p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

</form>

文本域

    <p>

        <!--   文本域，cols能显示有多少列，rows表示显示的行数     -->

        <textarea cols="30" rows="10">

            这里是默认填入的内容

        </textarea>

    </p>

文件域

<p>

        <!--    文件域    -->

        <input type="file" name="files">

        <input type="button" value="上传" name="upload">

    </p>

发现表单的东西都是需要name作为上传的键

邮箱

<p>

        <!--  邮箱验证  -->

        邮箱：

        <input type="email" name="email">

    </p>

    <p>

        <!--    url    -->

        url:

        <input type="url" name="url">

    </p>

    <p>

        <!--    数字    -->

        商品数量：

        <input type="number" name="num" max="100" min="0" step="1">

    </p>

    <p>

        <!--   滑块 input type="range"   -->

        音量：

        <input type="range" name="voice" min="0" max="100" step="2">

    </p>

    <p>

        <!--    搜索框    -->

        搜索：

        <input type="search" name="search">

    </p>

表单的应用

readonly 只读

disable 禁用

hidden 隐藏

表单的验证

为什么浏览器的表单需要验证

减轻服务器的压力
使表单数据安全

placeholder 用于提示

<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>

required 说明元素不能为空，在提交时候弹出不能为空

<p>用户名：<input type="text" name="username" required></p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

pattern正则表达式

用到正则可以取网上查，我自己找了一个github的https://github.com/cdoco/common-regex

<p>

        正则表达式验证邮箱：

        <input type="email" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">

    </p>

    <p>

        <input type="submit" name="提交">

        <input type="reset" name="清空">

    </p>

巴特西

HTML基础速览