前端----HTML

1、Web

1.1、JavaWeb概述

JavaWeb是使用Java语言开发的基于互联网的项目。

1.2、软件架构

C/S架构：Client/Server 客户端/服务器端

    在用户本机有一个客户端程序，在远程有一个服务器端的程序；像日常使用的QQ，微信；优点：用户体验好；缺点：需要开发、安装、部署、维护，很麻烦。

B/S架构：Browser/Server 浏览器/服务器端

    只需要一个浏览器，用户通过不同的网址（URL）即可访问；优点：开发、安装、部署、维护简单缺点：如果应用过大，会对用户的体验造成不良的影响；对用户的硬件要求高。

1.3、web标准

● web标准是由W3C组织和其他标准化组织制定的一系列标准化的集合，W3C是国际万维网联盟，创建于1994年，是web技术领域最具权威合和影响力的国际中立性技术标准机构。

● web标准的构成

标准	说明
结构	结构用于对网页元素进行整理分类，现阶段主要用HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为	行为是指网页模型的定义以及交互的编写，现阶段主要学的还是Javascript

2、HTML

2.1、概念：是最基础的网页开发语言

    Hyper Text Makerup Language 超文本标记语言超文本：超文本是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本。 标记语言：是由标签构成的语言。<标签名称>标记语言不是编程语言。

2.2、HTML的语法规范

    HTML 标签是由尖括号包围的关键字，例如<html>；HTML 标签通常是成对出现的，例如：<html>和</html>，我们称之为双标签，标签中的第一个标签是开始标签，第二个是结尾标签。有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签；

标签之间的关系：包含关系和并列关系

1、包含关系

2、并列关系

2.3、HTML的基本结构

我们在IDEA中生成的HTML文件有几个新的标签：

文档类型声明标签：<!DOCTYPE> 文档类型声明，作用就是告诉浏览器这个网页使用的什么规范，默认是HTML。这个标签必须写到代码最前面。

网站语言类型标签：< html = " en "> ：表示网站类型为英文网站。

网站文字编码标签：< meta charset = “UTF-8”> ：必须写，文字编码格式为：UTF-8格式。

2.4、HTML的基本标签

1. 标题标签

<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>

效果：

2. 段落标签和换行标签

段落：

<p>段落标签1</p>-0<p>段落标签2</p>
<p>段落标签3</p>
<p>段落标签4</p>
<p>段落标签5</p>
<p>段落标签6</p>

换行< br/>


<!-- 换行标签<br/> 换行的话两段之间的缝隙比段落标签的小-->1.还是老问题，基础知识掌握不牢，每次在写某个div属性时，<br/>
有很多属性就是知道自己学过，具体是哪个还想不出来，<br/>当然这时就会用到 " 度娘 " 了（~~度娘也没让我失望过，
哈哈，怎么感觉自己还有点幸灾乐祸呢,真想骂自己 ~~ ）<br/>2.” 书到用时方恨少 “，这句话说的真没错，现在随便打开个页面里面用到js的可能性就很大，<br/>
而我这个菜鸟刚开始让学js的时候还没咋好好学，<br/>以致于现在看到那一个个东西都不知道是啥，
还得问学姐、学长们那个特效是啥， 再去问 “ 度娘 ” ，开始学习

效果：

3.文本样式标签------设置粗体、斜体、下划线、水平线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本格式化</title>
</head>
<body><!-- strong 加粗标签--><strong>这是加粗的文字</strong><br/><!--em 斜体标签--><em>这是斜体文字</em><br/><!--ins 文字下划线标签--><ins>这是下划线文字标签</ins><br/><!--&nbsp; 空格符号 --><p>hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML</p><!-- hr 水平线标签-->
<hr>
</body>
</html>

效果：

4. 特殊符号标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>特殊符号</title>
</head>
<body><!--大于小于号-->&gt;&nbsp;&lt;<br/><!--版权符号-->&copy;
</body>
</html>

5. 图像标签

属性	属性值	说明
src	图片的路径	必须属性
alt	文本	替换文本，当图像不能显示时的文字
title	文本	提示文本，鼠标放到图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<img src="../statics/images/tu.jpg" title="这是图片" alt="图像标签" width="600" height="400" border="10">
</body>
</html>

6. 文件的路径

相对路径	符号	说明
同一级路径	无	图像文件和HTML文件位于同一级如 < img src = “hello.jpg” />
下一级路径	/	图像文件位于HTML文件的下一级如< img src = “images/hello.jpg” />
上一级路径	. ./	图像文件位于HTML文件的上一级如 < img src = “. ./hello.jpg” />

绝对路径	https://127. 0. 0. 1: 443 /images/hello. jpg

7. 超链接标签（重点）

在HTML标签中，< a >标签用定义超链接，作用是从一个页面链接到另一个页面

（1）超链接的语法格式：

   <a href="跳转的目标位置" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于链接指定目标的URL地址，必须属性
target	用于指定链接页面的打开方式，_self为默认值，表示在自己的窗口打开，_blank：表示在新的页面打开

（2）锚链接：用于在页面间指定的位置跳转（快速定位目录）；也可以在不同的页面间跳转

    步骤：1、在链接文本的 href 属性中，设置属性值为 #名字 的形式，如：<a href = "#name">大结局</a>2、找到目标位置，在里面添加一个id属性 = 上面设置的名字，如：< h3 id = "name"> 大结局介绍</h3>

8. 功能性标签

邮件链接

    <a href = "mailto:123@qq.com"> 联系我们 </a>

9.块元素和行内元素

块元素：无论多少内容，都是独占一行的。

     <p> 内容 </p><h1> 内容 </h1><h2> 内容 </h2>...<h6> 内容 </h6>

行内元素：内容撑开宽度，左右都是行内元素可以排在一行

2.4、列表、表格和媒体元素

1.列表

列表最大的特点就是布局整齐、有序

（1）无序列表（重点）

无序列表的基本语法格式：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>...
</ul>注意：ul标签里面只能放li标签，但li标签里面可以放别的标签。

例如：

（2）有序列表

有序列表的基本语法格式：

<h3>歌手排行榜</h3>
<ol><li>周杰伦</li><li>李荣浩</li><li>林俊杰</li><li>隔壁老王</li>
</ol>

效果：

（3）自定义列表（重点）

样例：

自定义列表的语法格式：

<dl><dt>联系我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>QQ公众号</dd>
</dl>

列表的总结：

标签名	定义	说明
< ul >< /ul >	无序列表	里面只能包含 li , 没有顺序，使用较多。li 标签里面可以包含任何标签。
< ol >< /ol >	有序列表	里面只能包含 li , 有顺序，使用相对较少。li 标签里面可以包含任何标签。
< dl >< /dl >	自定义列表	里面只能包含 dt、dd , 没有顺序，使用较多。dt、dd 标签里面可以包含任何标签。

2.表格

（1）表格的主要作用：用来显示数据，因为它可以让数据显得非常的规整，可阅读性非常好，使得繁杂的数据表现得很有条理。
例如：

（2）表格的基本语法

<table><!--tr表格的行--><tr><!--td表格的列--><td></td>...</tr>
</table>

（3）表格的相关属性

属性名	属性值	说明
align	left、center、right	规定表格相对于周围元素的对齐方式，就是在浏览器页面中的位置
border	1或 " "	规定表格单元是否有边框，默认没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认是1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素或百分比	就是表格的宽度
height	像素或百分比	就是表格的高度

（4）表格的结构标签

使用场景：因为表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用**< thead >标签** 装表格的头部区域、< tbody >标签装表格的主体区域，这样才能更好地分清表格结构。

（5）合并单元格

    合并单元格的方式：1、跨行合并：rowspan="合并单元格的个数" ；2、跨列合并：colspan="合并单元格的个数" 。目标单元格：1、跨行：要合并的最上侧单元格为目标单元格，写合并代码；2、跨列：要合并的最左侧单元格为目标单元格，写合并代码。   合并单元格的步骤：1、先确定是跨行还是跨列；2、找到目标的单元格，写上要合并单元格的数量，如<td colspan="2"> </td>3、删除多余的单元格

演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<table align="center" border="5" cellpadding="20" cellspacing="0" height="300" width="500"><thead><!--tr表格的行--><tr><!--th表头单元格 加粗居中--><th>英雄</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><!--td表格的列--><td>卡莎</td><td>女</td><td>17</td></tr><tr><!--td表格的列--><td>薇恩</td><td>女</td><td>19</td></tr><tr><!--td表格的列--><td>德莱文</td><td>男</td><td>16</td></tr><tr><!--td表格的列--><td>赏金猎人</td><td>女</td><td>15</td></tr><tr><!--td表格的列--><td rowspan="2">场均击杀</td><td colspan="2" align="center">12</td></tr><tr><!--td表格的列--><td>kill</td><td>Operate</td></tr></tbody>
</table>
</body>
</html>

效果：

3. 音频和视频标签

音频

     <!--音频--><audio src="../statics/audio/世间美好与你环环相扣-冯提莫.mp3" autoplay controls></audio>

视频

<video autoplay controls><source src="../statics/vedio/MV.mp4">
</video>

4. 网页结构分析

网页结构可以分为网页的头部、网页的主体和网页的尾部，他们都是HTML5的标签，没有任何的作用，只是让代码的结构看起来更好看。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页结构</title>
</head>
<body>
<header>头部
</header>
<nav>导航栏
</nav>
<aside>侧边栏
</aside>
<article>文章区域
</article>
<section>独立区域
</section>
<footer>尾部
</footer>
</body>
</html>

5. iframe内联框架

src是引用的页面的地址 name是框架的标识名

    <iframe src="https://www.baidu.com" name="baidu" width="1000px" height="800px" frameborder="5"></iframe>

2.5、表单标签（重要）

1.表单的使用场景

（1）常见的登录注册页面

（2）搜索框

2.表单的组成

    在 HTML 中，一个完整的表单通常由表单域、表单控件（也称之为表单元素）和提示信息 3 部分。

3. 表单域

表单域是由标签< form >< /form >包含起来的区域。

属性	属性值	说明
action	URL地址	表单信息提交的地址
method	get / post	设置表单数据的提交方式，get 携带参数可在url中可见，不安全；post 参数不可见、安全
name	名称	用于设置表单的名称，以区分同一个页面的多个表单域

4. 基础表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础表单</title>
</head>
<body>
<form action="1.表格.html" name="表单1" method="post">账户<input type="text" name="username"><br/>密码<input type="password" name="password"><br/><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

效果：

5. 表单元素

< input > 标签：用于收集用户的信息

     在<input>标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式，可以是文本框、复选框、文本控件、单选按钮、按钮等语法格式：<input type = "属性值"/><input/>标签为单标签，type属性设置不同的属性来指定不同的控件类型

type属性值及其描述：

属性值	描述
text	单行输入的文本框，用户可以在其中输入文本，默认宽度为20 字符
password	密码字段、该字段中的字符被掩码
hidden	隐藏
button	可点击的按钮
radio	单选按钮
checkbox	复选框
submit	提交按钮
reset	重置按钮
button	普通按钮
file	输入字段和"浏览按钮"，供文件上传
email	邮箱验证
url	网址基本验证
number	数字，可以设置最大最小值
range	可调节的滑块
search	带关闭按钮的搜索框

（1）文本框（重要）

<form action="2.列表.html" method="get">用户名<input type="text" name="username" value=""maxlength="15">
</form>

（2）密码框

<form action="2.列表.html" method="get">用户名<input type="text" name="username" value=""maxlength="15">密码<input type="password" name="password" value="" maxlength="15">
</form>

（3）单选按钮

<form action="2.列表.html" method="get">用户名<input type="text" name="username" value=""maxlength="15"><br/>密码<input type="password" name="password" value="" maxlength="15"><br/><!--name相同，则自动分组，必须分组value 表单提交的值checked 默认选中disabled 禁用--><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女" >女
</form>

（4）复选框

 <!--复选框checkboxname 必填项value 表单提交的值checked 默认选中disabled 禁用--><p2>爱好</p2><br/><input type="checkbox" name="hobby" value="eat" checked> 品尝美食<input type="checkbox" name="hobby" value="sport" disabled> 运动<input type="checkbox" name="hobby" value="music"> 听音乐 <br/>

（5）下拉列表框
注意： 下拉列表框并不是属于 input 标签里面的属性，而是select-option

 <!--下拉列表框select 下拉框的标签name 组件名字size 显示的数量，默认是1option 下拉框的选项value 必写项option 标签中间写下拉框的值selceted 默认选中--><p3>运动项目</p3><select size="1"><option value="足球">足球</option><option value="篮球" selected>篮球</option><option value="排球">排球</option><option value="乒乓球">乒乓球</option></select>

（6）按钮

<!--按钮--><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="点我"><br/>

（7）文本域

<!--文本域textarea--><textarea name="textarea" cols="30" rows="10"></textarea><br/>

（8）邮箱验证

 <!--邮箱验证-->邮箱<input type="email" name="email"><br/>

（9）网址基本验证

<!--网址基本验证url-->网址<input type="url" name="url"><br/>

（10）可调节滑块

 <!--可调节滑块-->可调节滑块<input type="range" name="range" min="0" max="100" step="3"><br/>

（11）搜索框

 <!--搜索框-->搜索<input type="search" name="search">

整体效果：

6. 表单的应用

（1）隐藏域

     <input type="hidden" name="count" value="1000">

（2）只读和禁用

         <!--只可读--><input type="text" value="text" readonly><!--禁用--><input type="text" value="text" disabled>

（3）标注

       <!--标注通过for="name" 链接到表单中指定的id--><label for="name">用户</label><input type="text" name="username" id="name">

7. 初级表单的验证

（1）默认提示

        <!--placeholder要求格式必须是url格式--><input type="url" name="username" placeholder="要求url格式">

（2）必填字段

        <!--required必填字段--><input type="password" name="password" required>

（3）正则表达式验证

         <!--pattern正则表达式验证-->手机号<input type="text" name="phonenum" required pattern="^1[3578]\d{9}">

HTML的基础知识就这么多。

前端----HTML相关推荐

etcd 笔记（02）— etcd 安装（apt 或 yum 安装、二进制包安装、Docker 安装 etcd、etcd 前端工具etcdkeeper）
1. 使用 apt 或 yum 安装 etcd 命令如下: sudo apt-get install etcd 或者 sudo yum install etcd 这样安装的缺点是:安装的 etcd 版 ...
【牛腩新闻发布系统】开始前端03
前言: 后台代码写好后,开始按照设计实现前端,之前有做过关于网页的东西,不过是用Dreamweaver做的静态,不能实现和数据库的交互,如果只是单纯学界面设计的话,用Dreamweaver容易上手,在 ...
LLVM Clang前端编译与调试
LLVM Clang前端编译与调试 iOS 关于编译 o 一.Objective-C 编译过程 o 为什么需要重新编译? o 编译步骤 o 二.编译步骤的详细说明 o 1.预处理 o 2.编译 o 词 ...
Clang：LLVM 的 C 语言家族前端
Clang:LLVM 的 C 语言家族前端 Clang 项目为LLVM 项目的 C 语言家族(C.C++.Objective C/C++.OpenCL.CUDA 和 RenderScript)中,提供 ...
TensorFlow Frontend前端
TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: • 1.12 and below Tested ...
Clang：LLVM的C语言家族前端
Clang:LLVM的C语言家族前端 Clang项目为LLVM 项目的C语言家族(C,C ++,Objective C / C ++,OpenCL,CUDA和RenderScript)中的语言提供了语 ...
前端的单页面模式和多页面模式
一.前言前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
JavaScript—— 前端编程语言
JavaScript 前端编程语言 http://caibaojian.com/javascript/ 转载于:https://www.cnblogs.com/highpointengineer/ ...
day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体标签: ...
转前端工程师凭什么这么值钱？
[CSDN编者按]前端工程师的薪资之高是业界公认的事实,但是很多人会质疑前端工程师,认为他们并不能称为软件工程师,也"配不上"高昂的报酬.本文的作者分享了自己从一个前端菜鸟成长为一 ...