HTML详细入门(完整版)
文章目录
- HTML5学习笔记
- 初识html
- 简介
- W3C标准
- 网页的基本标签
- 图像、超链接、网页布局
- 图像
- 超链接
- 网页布局
- 列表、表格、媒体元素
- 列表
- 表格
- 媒体元素
- 页面结构结构分析
- iframe内联框架
- 表单及表单应用
- 表单提交方式
- 文本框和单选框
- 按钮和多选框
- 列表框文本域和文件域
- 搜索框滑块和简单验证
- 表单的应用
- 表单初级验证
HTML5学习笔记
初识html
简介
Hyper Text Markup Language(超文本标记语言) 超文本包括:文字、图片、音频、视频、动画等
W3C标准
World Wide Web Consortium 万维网联盟 成立于1994年,Web技术领域最权威和具有影响力的国际中立性技术标准机构
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
HTML的基本信息
<!--DOCTYPE告诉浏览器,告诉浏览器我们要使用什么样的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签表示页面的头部-->
<head><!--meta描述性标签,他用来描述我们网站的一些信息--><meta charset="UTF-8"><title>Title</title>
</head>
<!--body标签代表网页主题-->
<body></body>
</html>
网页的基本标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--1.标题标签-->
<h1>一集标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--2.段落标签-->
<p>给时光以生命,给岁月以文明。</p>
<p>我爱你,与你有何相干?毁灭你,又与你有何相干?</p>
<p>把海弄干的鱼在海干前上了陆地,从一片黑暗森林奔向另一片黑暗森林。</p><!--3.换行标签-->
<br>
<!--4.水平线标签-->
<hr>
<!--5.字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--6.常见的特殊符号-->
空格:
>: >
< : <
版权 :©</body>
</html>
图像、超链接、网页布局
图像
常见的图像格式:
- jpg
- GIF
- PNG
- BMP
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaTDaYRp-1650796932218)(C:\Users\Leo\AppData\Roaming\Typora\typora-user-images\1650778860499.png)]
<img src="path" alt="text" title="text" width="x" height="y"/>
超链接
<a href="path" target="目标窗口位置">链接文本或者图像</a><!--target的常用值:_self _blank-->
链接的方式:
页面间链接:从一个页面链接到另一个链接
锚链接:
<!--使用name作为标记--> <a name="top">顶部</a> <!--锚链接 1.需要一个锚链接 2.跳转到标记 # --> <a href="#top">回到顶部</a> <a href="otherPage.html#dowm">跳转到其他页面的标记处</a>
功能性链接
<!--功能性链接 邮箱链接: mailto --> <a href="mailto:123@qq.com">点击联系我</a>
网页布局
行内元素和块元素
块元素(p、h1-h6…)
无论内容多少该元素独占一行
行内元素(a、strong、em…)
内容撑开宽度,左右都是行内元素的可以排在一行
列表、表格、媒体元素
列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,以列表的样式显示出来,以便浏览这更快捷地获得相应的信息
列表的分类
- 无序列表
- 有序列表
- 定义列表
<!--有序列表-->
<ol><li></li><li></li>
</ol>
<!--无序列表-->
<ul><li></li><li></li><li></li>
</ul>
<!--自定义列表-->
<dl><!--列表名字--><dt></dt><dd></dd><dd></dd><dd> </dd>
</dl>
表格
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!--表格table
行 tr
列 td
-->
<table border="1px"><tr><!--colspan 跨列--><td colspan="4">1.1</td></tr><tr><!--rowspan 实现跨行--><td rowspan="2">2.1</td><td>2.2</td></tr><tr><td>3.1</td><td>3.2</td></tr>
</table>
媒体元素
视频元素
video
音频元素
audio
<!--媒体元素--><!--视频src:资源路径controls:控制条autoplay: 自动播放--><video src="path" controls autoplay></video><!--音频
--><audio src="path" controls autoplay></audio>
页面结构结构分析
元素名 | 描述 |
---|---|
header | 标记头部区域的内容(用于页面或页面的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的以块区域) |
section | web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关的内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
iframe内联框架
<!--name 框架表示名-->
<iframe src="path" name="" frameborder="0" width="x" height="y"></iframe>
表单及表单应用
<!--表单
action:表单提交的位置,可以是网站,也可以是一个请求的地址
method :post get
-->
<form action="" method=""></form>
<!--文本输入框:type="text"-->
<p>名字: <input type="text" name="username"></p>
<p>密码:<input type="password" name="password"></p>
<p>
<input type="submit" >
<input type="reset">
</body>
表单提交方式
get
可以在url中看到提交的信息,不安全,高效
post
比较安全,传输大文件
文本框和单选框
表单元素格式
属性 | 说明 |
---|---|
type | 指定元素的类型。text password checkbox radio reset file hidden image button 默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否是被选中 |
<!--
value: 单选框的值
name: 表示组--><p>性别:<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p>
按钮和多选框
<!--多选框
type="checkbox"--><p><input type="checkbox" value="reading" name="hobby">看书<input type="checkbox" value="movie" name="hobby">看电影<input type="checkbox" value="coding" name="hobby">写代码</p>
<!--按钮-->
<p>按钮:<input type="button" name="" value="">
</p>
列表框文本域和文件域
<p>下拉框:<select name="列表名称" id=""><op value="" select=""></op><op value=""></op><op value=""></op><op value=""></op></select>
</p>
<!--文本域
-->
<p>文本:<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p><input type="file" names="files"><input type="button" value="上传" name="upload">
</p>
搜索框滑块和简单验证
<!--邮件验证-->
<p>邮箱:<input type="email" name="email">
</p>
<!--url验证-->
<p>url:<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字:<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>滑块:<input type="range" min="0" max="100" name="" step="">
</p>
<!-搜索框-->
<p>搜索:<input type="search" name="">
</p>
<!-增强鼠标的可用性-->
<p><label for="mark">点击文字跳转到文本框</label><input type="text" id="mark">
</p>
表单的应用
隐藏域
hidden属性
只读
readonly属性
禁用
disable属性
表单初级验证
为什么要进行验证
- 减轻服务器的压力
- 保证数据的安全性
常用的方式
- placeholder 提示信息
- reqired 非空判断
- pattern 正则表达式
HTML详细入门(完整版)相关推荐
- 区块链入门-完整版V1.0-Part10
EOS柚子 EOS环境部署 作者-磨链社区-KY 随着EOS主网上线的时间越来越近,对于超级节点竞选的话题也越来越多.很多人认为它是区块链3.0技术,可以推动区块链技术的商用落地.作为开发者,我们可以 ...
- Linux shell脚本基础学习详细介绍(完整版)一
Linux shell脚本基础学习这里我们先来第一讲,介绍shell的语法基础,开头.注释.变量和 环境变量,向大家做一个基础的介绍,虽然不涉及具体东西,但是打好基础是以后学习轻松地前提. 1. Li ...
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版(二)
书城项目 JavaEE三层架构介绍 搭建书城项目环境 IDEA工具Debug的使用 JSP 什么是jsp jsp页面的本质 jsp的page指令 虽然 / 在浏览器解析的时候是端口号,但是jsp本质最 ...
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版(一)
HTML和CSS ctrl + shift + / 在同一行代码中的后半截产生注释 HTML标签的介绍 标签拥有自己的属性,分为 基本属性 和 事件属性 标签的基本属性 :bgcolor=" ...
- java 内存分析之jmap 详细用法完整版(一)
文章目录 一.jmap下载内存信息命令 二.使用eclipse插件MAT来分析heap profile 前言:当我们遇到内存溢出,想要看详细的内存信息,可以使用java自带工具jmap下载完整的内存信 ...
- Linux shell脚本基础学习详细介绍(完整版)2
详细介绍Linux shell脚本基础学习(五) Linux shell脚本基础前面我们在介绍Linux shell脚本的控制流程时,还有一部分内容没讲就是有关here document的内容这里继续 ...
- Linux shell脚本基础学习详细介绍(完整版)
Linux shell脚本基础学习这里我们先来第一讲,介绍shell的语法基础,开头.注释.变量和 环境变量,向大家做一个基础的介绍,虽然不涉及具体东西,但是打好基础是以后学习轻松地前提. 1. Li ...
- Oracle基础入门完整版(课程笔记)
一 简介 1.为何需要数据库?存储大量数据,方便检索和访问. 2.文件组成: 数据文件:扩展名是.DBF,用于存储数据库数据的文件,数据库表和数据文件不存在一对一对应关系 控制文件:扩展名是.CTL, ...
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版(四)
文件的上传和下载 文件上传的介绍 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns= ...
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版(三)
EL表达式 什么是EL表达式 <%@ page contentType="text/html;charset=UTF-8" language="java" ...
最新文章
- 九、Swift对象存储服务(双节点搭建)
- OpenCV-Python教程(9)(10)(11): 使用霍夫变换检测直线 直方图均衡化 轮廓检测
- Linus系统下查看系统版本
- 2017.8.5 One-Dimensional 思考记录
- 如何连接文档服务器,如何连接服务器地址
- GDB调试精粹及使用实例来源-转
- Swift进阶 - 更高效的使用集合
- 科技创新 可持续发展 论坛_可持续发展时间
- python创建空字典什么意思_Python3基础 dict 创建字典 空字典
- 交换机软件测试,交换机性能测试方法
- 联想RS550服务器安装Ubuntu16.04
- matplotlib绘制鼠标的十字光标(内置方式)
- windows打开虚拟键盘命令
- 安装visual studio 2013
- android 杀死程序收不到推送_Android收不到推送解决方案
- 什么是对象?对象的属性和存储又是什么?
- 淘宝运营 钻展、智钻的定义 优势所在
- OS X系统 手势终极设置方法+BetterTouchTool详细设置中文翻译
- 英语翻译软件哪个好用?来试试下面这几款吧
- 关于AM5728评估板
热门文章
- word中如何设置首页无页码,页码从第二页开始?(前两页页码格式与后文不同)
- android监听新安装应用,【转载】Android监听应用程序安装和卸载
- MySQL高级篇-彻底掌握存储过程和函数
- ZBrush——纯小白入门篇(二)
- OSI模型的传输层、会话层、表示层和应用层
- 万达商铺租赁管理系统/商铺租赁信息管理系统
- uc key.php,通过ucenter中的uc_key获取webshell通杀 Discuz X1.5 X2.5 X3
- 盘点2007年国内外金融大事件
- 两个mysql数据同步
- 离开家乡的人,习惯在外的漂泊,回不去了!