前端基础【HTML】

一、HTLM5

Hyper Text Markup Language(超文本标记语言)

1、W3C标准

结构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

2、HTML基本结构

<!-- DOCTYPE:告诉浏览器代码使用的规范 -->

<!DOCTYPE html>

<!-- 总标签html：只读取总标签内的代码 -->
<html lang="en">

<!-- head——网页头部标签 -->
<head>
    <!-- meta标签：描述网站的一些信息，一般用来做SEU -->
    <meta charset="UTF-8">
    <meta name="章可怡" content="章可怡的网站">
    <meta name="描述" content="这个网站啥也不是">
    <title>给章可怡建立的网站</title>
</head>
章可怡是????
<!-- body网页主体标签 -->
<body>

</body>
</html>

3、

块元素：内容独占一行

行内元素：一行以内不换行的元素

二、页面基本结构

<body>
<header>
    <h3>网页的头（头部）</h3>
</header>

<sectiion>
    <h3>网页身体（主体）</h3>
</sectiion>

<footer>
    <h3>网页的脚（底部）</h3>
</footer>

<article>独立的文章内容</article>

<aside>侧边栏</aside>

<nav>导航栏</nav>

</body>

三、网页基本标签

1、标题标签

<!-- 标题标签 -->
<h1>题南望山</h1>
<h2>磊子</h2>

2、段落标签

<!-- 段落标签:会省略两端空格,有效空格永远只有一个 -->
<p>           去年今日此门中,</p>

3、换行标签

<!-- 换行标签-->
去年今日此门中,<br>

4、水平线标签

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

5、字体样式标签

<!-- 字体样式标签 -->
<strong>粗体</strong>
<em>斜体</em>

6、特殊符号标签

<!-- 特殊符号标签 -->
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--
大于符号><br>
小于符号<<br>
版权符号&copy;<br>

7、图像标签

<!--图片标签-->
<img src="../resource/img/章鱼哥的家.jpg" alt="图片加载失败" title="章鱼哥的家" width="180" height="250">
<!--
src:图片地址
alt：图片加载失败返回的字符串
title:鼠标悬停显示图片标题
width:图片宽度
height：图片高度
相对路径：相对于html的路径
绝对路径：从头到尾的路径
上一级目录:../
-->

8、超链接标签

<!--超链接标签-->
<h1>超链接标签</h1>
<a href="https://www.baidu.com/">超链接的名字</a>
<a href="https://www.baidu.com/" target="_blank"><img src="../resource/img/baidu.png" alt="图片加载失败" title="点击进入百度" width="180" height="250"></a>
<!--
/href:跳转网页的路径
target:表示窗口打开的地方
_blank:新网页打开
_self:在该网页打开
-->


<!--锚链接标签-->
<a name = "标记处"></a>
<a href="#标记处">回到标记处</a>
<!--
1、建立标记使用name
2、通过超链接 #加标记名字 跳到标记处
-->


<!--
功能性标签
邮箱链接:mailto
-->
<a href="mailto:1538581962@qq.com">点击联系磊子</a>

9、列表标签

<h1>列表</h1>
<!-- 有序号的列表 -->
<ol>
    <li>java</li>
    <li>C</li>
    <li>数据库</li>
    <li>创新创业</li>
</ol>

<hr>
<!-- 无序号的列表 -->
<ul>
    <li>java</li>
    <li>C</li>
    <li>数据库</li>
    <li>创新创业</li>
</ul>
<hr>
<!-- 自定义列表 -->
<!--
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>C</dd>
    <dd>数据库系统概论</dd>
    <dt>教室</dt>
    <dd>515</dd>
    <dd>520</dd>
    <dd>604</dd>
</dl>

10、表格标签

<!-- 表格标签 -->
<!--
tr:行标签
td:列标签
border:边框线大小
colspan:跨列
rowspqn:跨行
-->
<table border="1px">
   <tr>
       <td colspan="2">1</td>
   </tr>

    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
    </tr>

</table>

11、媒体元素标签

<!-- 多媒体标签 -->
<!-- controls:播放控制器-->
<!-- 视频标签 -->
<video src="../resource/mp4/改进后的上机作业.mp4" controls autoplay width="200" height="300"></video>
<!-- 音频标签 -->
<audio src="../resource/music/Jocelyn Pook,Russian Red - Loving Strangers.mp3" controls autoplay></audio>

12、网页嵌套标签

<!-- 网页嵌套标签iframe -->
<iframe src="https://www.baidu.com" frameborder="2" width="800" height="800"></iframe>
<!--
frameborder:边框线大小
-->
<!-- B站视频 -->
<iframe
        src="//player.bilibili.com/player.html?aid=242569665&bvid=BV1se411x7X9&cid=170351251&page=1"
        scrolling="no" border="0" frameborder="0" framespacing="0"
        allowfullscreen="true"  width="800" height="800">
</iframe>

四、表单

1、初始了解表单：

用建立表单

用input插入相应的组件，在type中定义插入组件的类型

1.1名词解释

action：提交表单的位置，网站或者请求处理网址

method：有post，get提交方式。

name：组件名字，同名则属于同一个组件

get方式提交将导致在url可以看到相应的密码信息，不安全；

post方式比较安全，可以传输大文件。

1.2表单组件格式

属性

说明

type

指定的元素（组件）类型，text、password、checkbox、radio（单选框）、submit、reset、file、hidden、image、button，默认为text

name

指定表单组件的名称（提交表单必填）

value

组件初始值，type为radio时必须指定一个值

size

指定组件的初始宽度，当type为text或password时，表单元素的大小以字符为单位。对于其它类型，宽度以像素为单位

maxlength

type为text或password时，输出的最大字符数

checked

type为radio或checkbox时，指定按钮是否被选中

2、input表单组件

2.1文本框

<!-- 表单form：提交内容发生事件 -->

<form action="表单跳转.html" method="get">

    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

</form>

2.3单选框

<!-- 单选框标签
     input type="radio"
     value:单选框的值
     name:表示组
     -->
<form action="表单跳转.html" method="get">

    <p>性别：
        <input type="radio" value="男" name="性别">男
        <input type="radio" value="女" name="性别">女
    </p>

</form>

2.4多选框

<!-- 单选框标签
      checked：默认选中
  -->
<form action="表单跳转.html" method="get">  

<p>选课：
        <input type="checkbox",value="java" name="age" checked>java
        <input type="checkbox",value="C" name="age">C
        <input type="checkbox",value="python" name="age">python
        <input type="checkbox",value="计算机组成原理" name="age">计算机组成原理
</p>

</form>

2.5按钮

<!-- 按钮
button 普通按钮
image  图片按钮 图片按钮默认有执行表单action功能
submit 提交按钮 value可以给按钮赋值
reset  重置表单内容按钮
     -->
<form action="表单跳转.html" method="get">  

    <p>
        <input type="button" name="dj" value="点击就送">
        <input type="image" src="../resource/img/章鱼哥的家.jpg" value="点击就送">
    </p>

    <p>
    <input type="submit">
    <input type="reset" value="清空">
    </p>

</form>

2.6文件域（上传文件）

<!-- 文件域标签
    -->
<form action="表单跳转.html" method="get">  
    <p>上传文件：
        <input type="file" name="files">
        <input type="button" value="上传文件" name="upload">
    </p>
</form>

2.7输入验证

<form action="表单跳转.html" method="get"> 
<!-- 邮箱输入标签-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!-- 网址输入标签-->
    <p>网址：
        <input type="url" name="url">
    </p>
</form>

2.8数字输入

<!-- 数字输入标签
    max、min:上下限
    step:调整步长
    value:初始值
-->
<form action="表单跳转.html" method="get"> 
    <p>出生日期（输入数字）
        <input type="number" value="2002" max="2021" min="1800" step="1">年
        <input type="number" value="9" max="12" min="1" step="1">月
        <input type="number" value="3" max="31" min="1" step="1">日
    </p>
</form>

2.7滑块

<!-- 滑块标签
max、min:上下限
step:调整步长
value:初始值
-->
<form action="表单跳转.html" method="get"> 
    <p>满意程度 *
        <input type="range" name="satisfy" min="0" max="100" step="1" value="50">
    </p>
</form>

2.8搜索框标签

<!-- 搜索框标签-->

<form action="表单跳转.html" method="get"> 
    <p>就读大学：
        <input type="search" name="search">
    </p>
</form>

3、列表框

3.1下拉框select

<!-- 下拉框标签
        selected：默认选中
    -->
<form action="表单跳转.html" method="get">  

    <p>国籍：
        <select name="列表名称">
            <option value="选项的值">丑国</option>
            <option value="选项的值">阿三国</option>
            <option value="选项的值" selected>中国</option>
        </select>
    </p>

</form>

3.2文本框textarea

<!-- 文本域标签：多行文本
   cols:列数限制
   rows:行数限制
-->

<form action="表单跳转.html" method="get">  

    <p>建议(160字以内)：
        <textarea name="textarea" id="2" cols="30" rows="10"></textarea>
    </p> 

</form>

3.3标签label

<!-- label标签
       for=""：定位到id
       id="":设置定位
    -->
<form action="表单跳转.html" method="get">  

    <p>
        <label for="1">点我输入建议</label>
    </p>

    <p>
        <textarea name="textarea" id="1" cols="30" rows="10"></textarea>
    </p>

</form>

4、表单的应用

1、常用修饰符

hidden：隐藏 ——可通过隐藏设置默认提交默认值

disabled：禁用

readonly：只读

selected：默认选中(select下拉框)

checked：默认选中（checkbox多选框）

2、表单初级验证

2.1提示信息
placeholder="输入用户名"
2.2非空判断
required
2.3正则表达式

脚本之家，常用正则表达式：https://www.jb51.net/article/76901.htm

<!-- 身份证号(15位、18位数字)：^\d{15}|\d{18}$ -->
<p>身份证号
   <input type="text" name="diy" pattern="^\d{15}|\d{18}$">
</p>