前端-HTML

前端最基本的是html，css，js。最原始是html，太丑了所以引入了css，但为了让前端实现准动态，又引入了js，可以产生交互。后面jquery封装了js，再后面有vue前端框架，前后端数据绑定都可以通过他来做。目前最新是HTML5+CSS3

一、html入门

1.1 html定义

Hyper Text Markup Language(超文本标记语言)。其中超文本包括，文字、图片、音频、视频、动画等。

审查元素：右键inspect或审查元素进入开发者模式(快捷键F12或Ctrl + Shift + I)，布局如下

1.2 html标准

W3C：World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构。

网址：

http://www.w3.org/

http://chinaw3c.org/

W3C标准包括

结构化标准语言(HTML、XML) ，本章介绍

表现标准语言(CSS)

行为标准（DOM、ECMAScript），其中ECMAScript就是javaScript

1.3 常见的html的IDE

记事本
Dreamweaver
IDEA（集成了WebStorm）
WebStorm
......

二、标签介绍

2.1 网页基本元素1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>happytitle</title>
</head>
<body>
<h1 style="color: brown">H1标签</h1>

</body>
</html>

2.2.1 注释

<!-- -->

2.2.2 !DOCTYPE html

<!DOCTYPE html>

告诉浏览器，我们要使用什么规范

2.2.3 html 标签

2.2.4 head标签

head标签代表网页头部

2.2.5 body标签

代表网页主体

2.2.6 title标签

代表网站标签页名字

2.2.7 meta标签

描述标签，用来描述我们网站的一些信息。

为什么能搜到他呢，就是meta信息，一般用来做SEO。搜索引擎优化！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="高兴的演示网页">
    <meta name="description" content="用这个来学习html">
    <title>happytitle</title>
</head>
<body>
<h1 style="color: brown">H1标签</h1>

</body>
</html>

2.2 网页基本标签2

2.2.1 h 标题标签

2.3.2 p 段落标签

2.3.3 br 换行标签

2.3.4 hr 水平线标签

2.3.5 字体样式标签

2.3.6 注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

<!--段落标签-->
<p>两只老虎</p>
<p>两只老虎</p>
<p>跑的快</p>
<!--换行标签-->
两只老虎</br>
两只老虎</br>
跑的快</br>
<!--水平线标签-->
<hr/>
<!--粗体标签-->
<b>粗体</b>
<strong>粗体</strong>
<!--斜体标签-->
<em>斜体</em>
<hr/>
<!--转义特殊符号-->
空   格： 空&nbsp&nbsp&nbsp&nbsp&nbsp格
&gt; <br/>
&lt; <br>
&copy; 高兴的版权

</body>
</html>

2.3 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--img学习
图片地址：
相对路径：推荐使用，别人拷贝项目后仍然可以用
绝对路径：一般不推荐使用，别人拷贝后不能使用
-->
<img src="../resouces/image/往返建行大厦及中心循环巴士.png" alt="找不到图片显示文字" title="悬停文字" width="300" height="300">

</body>
</html>

2.4 a 连接标签

2.4.1 普通连接

页面间跳转

2.4.2 锚链接

用于本页（长段落）的跳转

2.4.3 功能性连接（邮件连接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a标签普通连接
href为必填项，要跳转的位置
target为打开连接的位置 _blank _self-->
<a name="happytop">顶部</a>

<a href="http://www.baidu.com">点击这里跳转百度</a>
<hr/>
<a href="3.图像标签.html">点击这里跳转到本地项目网页</a>
<hr/>
<a href="http://www.baidu.com">点击图片跳转到本地项目网页
    <img src="../resouces/image/往返建行大厦及中心循环巴士.png" alt="点击图片跳转">
</a>
<hr/>

<hr/>
<a href="http://www.baidu.com">
    <img src="../resouces/image/往返建行大厦及中心循环巴士.png" alt="点击图片跳转">
</a>
<hr/>

<hr/>
<a href="http://www.baidu.com">
    <img src="../resouces/image/往返建行大厦及中心循环巴士.png" alt="点击图片跳转">
</a>
<hr/>
<hr/>
<a href="http://www.baidu.com">
    <img src="../resouces/image/往返建行大厦及中心循环巴士.png" alt="点击图片跳转">
</a>
<hr/>
<hr/>
<!--锚连接-->
<a name="happybottom">点击这里回到文章顶部</a>


<a href="#happytop">点击这里回到文章顶部</a>

<hr/>
<!--功能性连接-->
<a href="mailto:1030987@qq.com">点击这里联系我</a>
<!--qq a标签-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=103098723&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:103098723:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>

2.6 列表

2.6.1 无序列表

2.6.2 有序列表

2.6.3 dl 自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>运维</li>
    <li>python</li>
</ol>

<hr/>
<!--无序列表-->
<ui>
    <li>java</li>
    <li>运维</li>
    <li>python</li>
</ui>

<!--自定义列表-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>c</dd>
    <dd>c++</dd>

    <dt>位置</dt>

    <dd>成都</dd>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>重庆</dd>

</dl>
</body>
</html>

2.7 表格

2.7.1 定义

为什么使用表格

简单通用

结构化

基本结构

单元格

行

列

跨行

跨列

2.7.2 idea 快速生成多行表格

生成2行6列的表格，其中以th和td交叉形式，常用在页面form中，标题和字段栏目交叉形式的布局
table>tr * 2>(th+td) * 3【此时按下Tab（制表键），输入内容中间和后面都不能留有空格和换行等内容】
生成效果如下：

2.7.3 跨行，跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

2.8 媒体元素

2.8.1 视频

2.8.2 音频

三、行内元素和块元素

3.1 块标签

另起一行，无论内容多少，该元素独占一行，如p标签、hr标签，h标签

3.2 行内标签

不会换行，内容撑开宽度，左右都是行内元素的都可以排在一行。

四、页面结构分析

元素名	描述
header	`标题头部区域的内容（用于页面或页面的一块区域）`
footer	`标记脚本区域的内容（用于整个页面或页面的一块区域）`
section	web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	`导航类辅助内容`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页主体</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<setion>
    <h2>网页主体</h2>
</setion>
<footer>
    <h2>网页footer</h2>
</footer>

</body>
</html>

五、内联框架iframe

5.1 iframe 内联框架

5.2 和a标签target一起使用

通过a标签跳到iframe里面，即通过a标签往iframe里面加东西，可以把iframe当做一个容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內聯框架</title>
</head>
<body>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->
<!--iframe 內聯框架-->
<iframe src="http://www.baidu.com" frameborder="0"></iframe>

<iframe name="happy" src="" frameborder="0"></iframe>
<a href="http://www.baidu.com" target="happy">點擊這裡，往iframe happy里加東西</a>
</body>

六、表单

因为表单元素太重要了，虽然属于基础，但这里单独列为一节

6.1 表单语法

6.2 表单示例

action

method

get方法，通过url请求参数提交,所以可以在地址栏看到参数，不安全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單註冊</title>
</head>
<body>
<h1>表單</h1>
<!--表單-->
<!--表單提交的位置：可以是網站地址也可以是一個請求處理地址-->
<!--method
get方法，通過url請求參數提交,所以可以在地址栏看到参数，不安全
post方法，通過請求報文躰提交，比较安全，传输大文件
-->
<form name="happyform" action="3.图像标签.html" method="get">
<p>名字:<input type="text" name="username"></p>
<p>密碼:<input type="password" name="password"></p>
<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
</body>
</html>

地址栏显示

post方式：

post方法，通过請求报文体提交，比较安全，传输大文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單註冊</title>
</head>
<body>
<h1>表單</h1>
<!--表單-->
<!--表單提交的位置：可以是網站地址也可以是一個請求處理地址-->
<!--method
get方法，通過url請求參數提交,所以可以在地址栏看到参数，不安全
post方法，通過請求報文躰提交，比较安全，传输大文件
-->
<form name="happyform" action="3.图像标签.html" method="post">
<p>名字:<input type="text" name="username"></p>
<p>密碼:<input type="password" name="password"></p>
<p>
    <input type="submit">
    <input type="reset">
</p>

</form>

</body>
</html>

6.2 浏览器查看提交情况

提交前，打开inspect，ctrl+alt+I，点击network

6.3 表单元素格式

注意：input标签，必须输入name，后台才能提取参数。

属性	说明
type	指定元素的类型，有：text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认是text
name	指定表单元素的名称，`后台java用这个提取参数`
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。 - 当type为text或password时，表单元素的大小以字符为单位。 - 对于其他类型。宽度以像素为单位。
maxlength	type为text时或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

6.4 表单元素标签

6.4.1 文本框和单选框、复选框

注意radio和checkbox的区别，type=radio的时候，必须输入属性：name，value和type。特别是name一样才能合成一个组，从而实现单选。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單註冊</title>
</head>
<body>
<h1>表單</h1>
<!--表單-->
<!--表單提交的位置：可以是網站地址也可以是一個請求處理地址-->
<!--method
get方法，通過url請求參數提交,所以可以在地址栏看到参数，不安全
post方法，通過請求報文躰提交，比较安全，传输大文件
-->
<form name="happyform" action="3.图像标签.html" method="get">
    <!--    maxlength 能輸入的最大長度
    文本框 的長度，以字符為單位-->
    <p>名字:<input type="text" name="username" maxlength="10" size="15"></p>
    <p>密碼:<input type="password" name="password"></p>
    <p>
        <!--type = radio-->
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="box" name="sex">男
    </p>
    <p>
        <!--type = checkbox    -->
        性取向：
        <input type="checkbox" value="男" name="hovor">男
        <input type="checkbox" value="女" name="hovor">女
        <input type="checkbox" value="人妖" name="hovor">人妖
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

6.4.2 按钮

普通按钮

图像按钮

提交按钮

清空按钮

共4个按钮，value可以给按钮取名字

</p>
	<!--    type = button-->
	<input type="button" name="btn1" value="点击变长"/>
    <input type="image" src="../resouces/image/煲剧中.png" value="点击变长"/>
<p>
    <input type="submit">
    <input type="reset" value="清空">
</p>

`6.4.3 文件域：上传文件`

<!--文件域：上传文件-->
<p>
	<input type="file" name="upload" value="上传文件">
</p>

查看url提交有upload:

6.4.4 其他input标签（自带验证的input、range等）

<!--自带验证-->
<!--    email验证-->
<p>email:
    <input type="email" name="email"/>
</p>
<!--    url验证-->
<p>url:
    <input type="url" name="email"/>
</p>
<!--    数字验证-->
<p>商品数量:
    <input type="number" name="num" max="20" min="10" step="1"/>
</p>
<!--滑块-->
<p>音量:
    <input name="voice" type="range" min="10" step="2"/>
</p>
<!--search-->
<p>音量:
    <input name="searchname" type="search"/>
</p>
<p>
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</p>

6.4.6 列表框

列表下拉框类似于checkbox和radio

<p>下拉框
    <select name="" id="">
        <option value="china">中国</option>
        <option value="american">美国</option>
        <option value="rich" selected>瑞士ETH</option>
        <option value="india">印度</option>
    </select>
</p>

6.4.5 文本域

<!--    反馈-->
<p>
    <textarea name="textarea" cols="50" rows="20"></textarea>
</p>

七、表单的应用

7.1 一些通用属性

补充属性	说明
value	默认值
readonly	只读
disable	禁用
hidden	隐藏，可以通过隐藏域传输一些默认值
placeholder	提示值，注意有value的时候失效

<p>特殊属性测试1:<input type="text" name="property1" maxlength="10" size="15" value="默认值:请输入名字" readonly></p>
<p>特殊属性测试2:<input type="text" name="property2" maxlength="10" size="15" value="默认值:请输入名字" disabled></p>
<p>特殊属性测试3:<input type="text" name="property3" maxlength="10" size="15" value="234" hidden></p>
<p>特殊属性测试4:<input type="text" name="property4" maxlength="10" size="15" placeholder="请输入"></p>
<p>
    <label for="p5">特殊属性测试5:</label>
    <input id="p5" type="text" name="property5" maxlength="10" size="15" value="234">
</p>


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

7.2 label 增强鼠标可用性

<p>
	<label for="p4">特殊属性测试4:</label>
	<input id="p4" type="text" name="property3" maxlength="10" size="15" value="234">
</p>

八、表单验证（初级的、正则）

8.1 验证分类

初级验证：补充属性和正则

一些补充属性

补充属性	说明
placeholder	提示信息
required	非空验证
pattern	正则验证

高级验证：js

8.2 为什么要验证

减轻服务器的压力

数据的安全性

8.3 正则表达式

可以去网上找：
比如脚本之家可以查询很多正则，如：https://www.jb51.net/tools/regexsc.htm

<p>必须输入
    <label for="p5">特殊属性测试5:</label>
    <input id="p5" type="text" name="property5" maxlength="10" size="15" value="234">
</p>
<p>
    <textarea name="textarea" cols="50" rows="10" required></textarea>

</p>
<!--    正则表达式验证-->
<p>
    验证正则，输入身份证:<input type="text" name="testreg" pattern="\d{15}(\d\d[0-9xX])?">
</p>
<p>
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</p>

posted @ 2022-04-05 19:14 高兴518 阅读(76) 评论(0) 编辑收藏举报

刷新页面返回顶部

happycarpediem

前端-HTML

前端-HTML

一、html入门

1.1 html定义

1.2 html标准

1.3 常见的html的IDE

二、标签介绍

2.1 网页基本元素1

2.2.1 注释

2.2.2 !DOCTYPE html

2.2.3 html 标签

2.2.4 head标签

2.2.5 body标签

2.2.6 title标签

2.2.7 meta标签

2.2 网页基本标签2

2.2.1 h 标题标签

2.3.2 p 段落标签

2.3.3 br 换行标签

2.3.4 hr 水平线标签

2.3.5 字体样式标签

2.3.6 注释和特殊符号

2.3 图像标签

2.4 a 连接标签

2.4.1 普通连接

2.4.2 锚链接

2.4.3 功能性连接（邮件连接）

2.6 列表

2.6.1 无序列表

2.6.2 有序列表

2.6.3 dl 自定义列表

2.7 表格

2.7.1 定义

2.7.2 idea 快速生成多行表格

2.7.3 跨行，跨列

2.8 媒体元素

2.8.1 视频

2.8.2 音频

三、行内元素和块元素

3.1 块标签

3.2 行内标签

四、页面结构分析

五、内联框架iframe

5.1 iframe 内联框架

5.2 和a标签target一起使用

六、表单

6.1 表单语法

6.2 表单示例

action

method

6.2 浏览器查看提交情况

6.3 表单元素格式

6.4 表单元素标签

6.4.1 文本框和单选框、复选框

6.4.2 按钮

普通按钮

图像按钮

提交按钮

清空按钮

6.4.3 文件域：上传文件

6.4.4 其他input标签（自带验证的input、range等）

6.4.6 列表框

6.4.5 文本域

七、表单的应用

7.1 一些通用属性

7.2 label 增强鼠标可用性

八、表单验证（初级的、正则）

8.1 验证分类

初级验证：补充属性和正则

高级验证：js

8.2 为什么要验证

8.3 正则表达式

公告

`6.4.3 文件域：上传文件`