前端(一)-Html
1、网页基本信息
| <!DOCTYPE html> | 浏览器使用的规范 |
|---|---|
| <head> | 网页头 |
| <body> | 主体部分 |
| <meta> | 元数据 |
meta的name属性（了解）
| Keyword（关键字） | 为搜索引擎提供的关键字列表 |
|---|---|
| Description（简介） | description用来告诉搜索引擎你的网站主要内容 |
| author（作者） | 标注网页的作者 |
| copyright（版权） | 标注版权 |
| generator | 说明网站采用什么编辑器制作。 |
2、网页基本标签
| <h1></h1> ...<h6></h6> | 标题标签，序号越小字体越大 |
|---|---|
| <P></p> | 段落标签 |
| <br/> | 换行标签 |
| <hr/> | 水平线 |
| <strong></strong> | 字体加粗 |
| <em></em> | 斜体 |
3、特殊符号
| | 空格 |
|---|---|
| > | 大于号 > |
| < | 小于号 < |
| ' | 单引号' |
| " | 双引号“ |
| © | @版权符号 |
| & | 和& |
4、块元素与行内元素
- 块元素：独占一行，比如:段落标签(p),标题标签(h1~h6),自带换行;
- 行内元素，可以在一行写多个的标签，靠内容撑开宽度;(a,strong,em...)
注意：块元素可以嵌套多个行内元素标签，但行内元素不能嵌套块元素，会改变行内元素的布局，且标签之间不可以交叉；
5、图像标签
<img src="img/girl01.png" alt="动漫女孩" title="小女孩" width="200px" height="300">
| scr | 图片的资源路径 |
|---|---|
| alt | 图片显示不时显示此文字 |
| title | 标悬停图片显示文字 |
| width | 宽度 |
| hight | 高度 |
6、链接标签
超链接标签，a，是对标签，也是行内元素 ，可以链接到任意可以访问的资源，标签可以使用文本或者图片;
<a href="https://www.baidu.com" target="_blank">百度</a> <br/>
| href | 资源路径 |
|---|---|
| target | 在页面打开资源还是新页面 |
target
| target="_self" | 本页面打开资源 |
|---|---|
| target="_blank" | 新页面打开资源 |
6.1 页面链接
<a href="https://www.baidu.com"">
6.2 锚链接 (例如回到顶部功能)
本页面的锚链接跳转 (回到顶部)
<!--
目标位置：<a href="#" name="目标位置的名字">
<a href="#目标位置的名字">
-->
<a href="#" name="head_a">顶部</a>
...
<a href="#head_a">回到顶部</a>
不同页面的锚链接跳转（跳转到指定页面的指定位置）
<!--
目标位置：<a href="#" name="目标位置的名字">
demo10.html
-->
<a href="#" name="footer"></a>
<!--
<a href="目标页面#目标位置"></a>
demo09.html
-->
<a href="demo10.html#footer">跳转到demo10的底部</a>
6.3 功能链接
<a href="mailto:2663092414@qq.com">功能链接 联系我们</a>
6.4 内联框架
iframe 单页面内联
<!--
src：引用页面地址
name：框架标识名
-->
<iframe src="path" name="mainFrame" ></iframe>
iframe属性（实现页面间的相互跳转）
<!--
在被打开的框架上加name属性
-->
<iframe name="mainFrame"></iframe>
在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="https://www.baidu.com/" target="mainFrame">加载</a>
7、列表
7.1 无序列表
<h2>无序列表</h2>
<ul>
<li>行宫</li>
<li>登黄鹤楼</li>
<li>相思</li>
<li>静夜诗</li>
</ul>
- 行宫
- 登黄鹤楼
- 相思
- 静夜诗
7.2 有序列表
<h2>有序列表</h2>
<ol>
<li>行宫</li>
<li>登黄鹤楼</li>
<li>相思</li>
<li>静夜诗</li>
</ol>
- 行宫
- 登黄鹤楼
- 相思
- 静夜诗
7.3 自定义列表
<h2>自定义列表</h2>
<dl>
<dt>王维</dt>
<dd>相思</dd>
<dd>杂诗</dd>
<dt>李白</dt>
<dd>静夜诗</dd>
</dl>
- 王维
- 相思
- 杂诗
- 李白
- 静夜诗
8、表格
8.1 基本标签
| <table> </table> | 表标签 |
|---|---|
| <tr> </tr> | 行标签 |
| <th></th> | 表头标签 |
| <td></td> | 列标签 |
8.2 表格一些属性
| align="center" | 居中 |
|---|---|
| border="1px" | 边框粗细 |
| cellspacing="0" | 表格间隙 |
| width="90%" | 长度 |
8.3 跨行跨列
| rowspan="x" | 跨行 |
|---|---|
| clospan="x" | 跨列 |
案例
<!--
CSS中等价于cellspacing="0" 的属性
border-collapse: collapse;
border-spacing:0;
-->
<table border="1px" align="center" width="90%" cellspacing="0">
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>操作</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>18</td>
<td rowspan="2">KH96</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
<tr align="center">
<td>002</td>
<td>李四</td>
<td>20</td>
<!-- <td>KH96</td> -->
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
<tr align="center">
<td colspan="5">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一个</a>
<a href="#">尾页</a>
</td>
</tr>
</table>
9、媒体元素
9.1 音频
<!--
src：指定要播放的视频文件的路径
controls：提供播放、暂停和音量的控件
autoplay：自动播放属性
loop：视频的循环播放
-->
<video src="视频路径" controls autoplay></video>
9.2 视频
<!--
src：指定要播放的音频文件的路径
trols：提供播放、暂停和音量的控件
-->
<audio src="音频路径" controls autoplay></video>
10、表单
10.1 method
规定如何发送表单数据常用值：get post 在实际网页开发中通常采用post方式提交表单数据;
| get | 不安全，在搜索栏提交，有大小限制 |
|---|---|
| post | 安全，在请求体中提交，没有大小限制 |
10.2 action
表示向何处发送表单数据;
10.3 表单元素
10.3.1 text 文本框
<!--type="text"
name：文本框名称(必填)
value：文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>
10.3.2 password 密码框
向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。
<!--type="password"
name：密码框名称(必填)
size：密码框长度
-->
<input type="password" name="pass" size="20"/>
10.3.3 单选按钮
同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥；
<!--
type="radio"
name：单选框名称(必填)，一组的名称需要相同
checked：单选按钮选中状态
value：单选框的值
-->
<input name="gen" type="radio" value="男" id="nan"/><label for="nan">男</label>
<input name="gen" type="radio" value="女" id="nv"/><label for="nv">女</label>
<!-- label点击文字的时候也可以选中 -->
10.3.4 checkbox复选框
同一组复选框，根据需要可设置name属性值相同；
<!--
type="checkbox"
name：复选框名称(必填)，一组的名称需要相同
checked：复选按钮选中状态
value：复选框的值
-->
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
10.3.5 select下拉列表
希望在页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则第一个选项 默认被选中；
<!--select:下拉列表框-->
<!--option：选项-->
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
10.3.6 按钮
<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="data:images/login.gif" />
10.3.7 textarea多行文本框
<!--
textarea：多行文本域
cols：显示的列数
rows：显示的行数
-->
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>
10.3.8 file文件域
在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据 分为多部分提交。
<!--- enctype：表单编码属性 -->
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
10.3.9 email邮箱
会自动验证Email地址格式是否正确;
邮箱:<input type="email" name="email"/>
10.3.10 url网址
会自动验证URL地址格式是否正确；
请输入你的网址:<input type="url" name="userUrl"/>
10.3.11 number数字
min：最小值
max：最大值
step：步长
value:默认值
请输入数字:<input type="number" name="num" value="18" min="0" max="100" step="10"/>
10.3.12 range滑块
type值为range即为滑块。
请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/>
10.3.13 search搜索框
type值为search即为搜索框。
请输入搜索的关键词:<input type="search" name="sousuo"/>
10.3.14 color颜色
喜欢的颜色：<input type="color" name="userColor">
10.3.15 日期时间
10.3.15.1 dd/MM/yyy
<input type="date" />
10.3.15.2 yyyy年第xx周
<input type="week" />
10.3.15.3 yyyy年MM月
<input type="month" />
10.3.15.4 mm:ss
<input type="time" />
10.3.15.5 dd/MM/yyyy HH:mm:ss
<input type="datetime-local" />
10.4 表单的高级应用
10.4.1 hidden隐藏域
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
<input type="hidden" value="666" name="userid">
10.4.2 只读、禁用
<!--
讲解只读和禁用的语法，强调不能单写readonly或disabled，必须写readonly
＝”readonly”和disabled=“disabled”，介绍只读和禁用的使用场合
-->
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >
10.4.3 表单元素的标注,增强鼠标的可用性
增强鼠标的可用性，自动将焦点转移到与该标注相关的表单元素上
<!--它的for属性对应的id与表单元素id一致-->
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
10.5 表单初级验证的方法
10.5.1 placeholder
提示语默认显示，当文本框中输入内容时提示语消失;
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
10.5.2 required
规定文本框填写内容不能为空，否则不允许用户提交表单;
<input type="text" name="username" required/>
10.5.3 pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单;
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
11、页面结构元素
11.1结构标签
| header | 页面或页面中某一区块的页眉，通常是一些引导和导航信息 |
|---|---|
| nav | 可以作为页面导航的连接组 |
| section | 页面中的一个内容区块，通常由内容及其标题组成 |
| article | 代表一个独立的，完整的相关内容块，可独立于页面其他内容使用 |
| aside | 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到页面的内容 |
| footer | 页面或页面中某一个区块的脚注 |
11.2举例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2 align="center">网页布局-使用h5新标签</h2>
<!-- div就是一个盒子，主要用于页面布局，是块元素 -->
<div class="box">
<header class="header">头部header</header>
<main class="main">
<nav class="nav">导航nav</nav>
<section class="content">
<aside class="aside">侧边栏aside</aside>
<article class="article">正文article</article>
</section>
</main>
<footer class="footer">尾部footer</footer>
</div>
</body>
</html>
运行结果
前端(一)-Html的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
随机推荐
- IntelliJ IDEA 设置背景图片 随机快捷更换背景图片(附高清4K背景图N张)
前言 开发过程枯燥乏味,何不为自己工作中添加点乐子呢,除了主题模板,我们可以设置IntelliJ IDEA 的背景图片,换个背景图,换个心情. IntelliJ IDEA 设置背景图片 注意: 必要的 ...
- RL 基础 | 如何使用 OpenAI Gym 接口，搭建自定义 RL 环境（详细版）
参考: 官方链接:Gym documentation | Make your own custom environment 腾讯云 | OpenAI Gym 中级教程--环境定制与创建 知乎 | 如何 ...
- jenkins拉取github代码报错问题解决
问题起因: 踩坑踩坑 用jenkins拉取github项目的代码时,配置完成点击构建时,报错信息为:Couldn't find any revision to build. Verify the re ...
- 【一步步开发AI运动小程序】五、帧图像人体识别
随着人工智能技术的不断发展,阿里体育等IT大厂,推出的"乐动力"."天天跳绳"AI运动APP,让云上运动会.线上运动会.健身打卡.AI体育指导等概念空前火热.那 ...
- CommonsCollections7（基于ysoserial）
环境准备 JDK1.8(8u421)我以本地的JDK8版本为准.commons-collections(3.x 4.x均可这里使用3.2版本) cc3.2: <dependency> &l ...
- Java开发
总结java开发中知识点和问题点 基础: 常用加解密算法: [md5] import java.security.MessageDigest; public static final String e ...
- golang之增加版本信息功能
在实际开发中,当开发完一个 apiserver 特性后,会编译 apiserver 二进制文件并发布到生产环境,很多时候为了定位问题和出于安全目的(不能发错版本),我们需要知道当前 apiserver ...
- Kafka可视化工具之Kafka Tool
官网: https://www.kafkatool.com/download.html Kafka Tool是一个用于管理和使用Apache Kafka集群的GUI应用程序. Kafka Tool提供 ...
- Spring Data JPA自动生成表时列顺序混乱的解决办法（最新版）
最近把Spring Boot的版本升级到了3.3.5,突然发现一个问题:当使用Spring Data JPA自动生成表的时候,所产生的列顺序与Entity类中的变量顺序不一致了.比如,有一个下面这样的 ...
- 从零打造基础HTTP服务器：揭秘背后的技术魔法-MiniTomcat
<从零打造基础HTTP服务器:揭秘背后的技术魔法-MiniTomcat> 嘿,各位技术发烧友们!今天咱们要一起踏上一段超级刺激的技术之旅,去揭开从零实现一个基础HTTP服务器的神秘面纱.这 ...