HTML5基础知识及相关笔记
HTML5基础
1.1HTML文件的基本结构和W3C标准
1.1.1HTML简介
HTML是一种描述网页的语言,一种超文本标记的语言!
1.1.2HTML文件的基本结构
- 头部(head)
头部是网页的标题等基本信息
- 主体(body)
主题包括网页的内容信息
注意标签必须成对出现
1.2网页的基本标签
每个标签都有一对尖括号,此处省略
- 标题标签
h1 h2 h3 h4 h5 h6 (字体样式依次变小)
- 段落和换行标签
p br
- 水平线标签
hr: 表示能产生一条水平线
- 字体样式标签
strong:能对字体进行加粗
em:能对字体进行倾斜处理
- 注释和特殊符号
注释:!--内容--
特殊符号:
- 空格:
- 大于号:>
- 小于号:&Lt
- 引号:"
- 版权符号:©
1.3图像标签
语法:<img src="图片地址" alt="图像代替文字" title="鼠标悬浮的文字" width=“图像宽度” height="图像高度">
1.4链接标签
- 超链接的基本用法
<a href="链接地址" target ="目标窗口的位置" >链接的文本或图像</a>
- 超链接的应用场合
- 页面间链接
- 锚链接
- 功能性链接
1.5行内元素与块元素
- 块元素:无论内容多少。独占一行
- 行内元素:左右的行内元素都可以在一行排列,不会独占一行
列表 表格 框架
2.1列表
- 无序列表
无序列表是一个项目列表使用项目符号标记无序列表。没有等级之分
无序列表由: ul 和 li 组成
- 有序列表
有序列表时由一个个列表组成,列表项由数字或字母组成
有序列表由:ol 和 li 组成
- 定义列表
定义列表是项目和注释的组合
定义列表由:dl dt dd组成
2.2表格
- 为什么使用表格
简单通用
结构稳定
- 表格的基本结构
单元格:表格的最小单元
行:一个或多个单元格横向堆叠而成
列:单元格的纵向排列
- 表格的基本语法
- 表格标签:table
- 行标签(可以有多行):tr
- 列标签(可以有多个单元格):td
- 表格的对齐方式
- 水平方向
- 左对齐:align=“left”
- 右对齐:align=“right”
- 居中对齐:align=“center”
- 垂直方向
- 顶端对齐:valign="top"
- 下端对齐:valign="bottom"
- 居中端对齐:valign="middle"
- 基线端对齐:valign="baseline"
- 水平方向
2.3框架
媒体元素概述
视频语法: < video controls loop="loop">
< source src="video/video.webm">
< source src="video/video.mp4">
< /video>
音频 语法: < audio controls loop="loop">
< source src="audio/audio.ogg">
< source src="audio/audio.mp3">
< /audio>
表单
3.1表单
- 表单的标签和属性
form标签来实现表单 input标签是辅助form的一个标签设定各种输入
form的属性值:
- action:表示提交的地址,如果为空,表示本页
- method
- 服务器发送数据的方法:post/get
- post:表单上的数据作为数据块发送,不适用请求字符型 get:浏览器会创建一个请求,会返回指定的脚本
- 表单元素和格式
- 文本框(text)
例:<input type="text" name="fname">
- 密码框(password)
例:<input type="password" name="fname">
- 单选按钮(redio)
例:<input type="redio" >
- 复选框(checkbox)
例:<input type="checkbox" >
- 列表框(selected option)
例: <seleceted> <option value="内容"></option> </selected>
- 按钮
- submit提交按钮
点击.内容会提交
- reset重置
点击此按钮,实现重置
- bottom普通
- 图片提交按钮
语法:<input type=”image“ src=”images/login.jpg“>
- 文件域
实现文件的选择
语法:<input type="file" name="files">
- 多行文本域
多行输入
语法:< < textarea name="textarea" cols="40" rows="10"> //内容 < /textarea>
- 邮箱
输入邮箱
语法:<input type="email" name="email">
- 数字输入框
选择数字
语法:<input type="number" name="number" min="0" max="100" step="2"(增长率)>
- 滑块
滑动选择
语法:<input type="range" name="range" min="0" max="100" step="2"(增长率)>
- 搜索框
搜索
语法:<input type="search" name="search" >
- 提示框(灰色字体提示用户输入的值)
语法:<input type="search" name="search" placeholder="提示的文字" >
- 非空验证
验证输入的值
语法:<input type="text" name="text" required(总要属性) >
- 正表达式
验证输入的值(相当于检查约束)
语法:<input type="text" name="text" required(总要属性) pattern=" ^1[358]\d{9} " >
3.2表单的高级应用
- 设置表单的隐藏域
将type的值设置成hidden时,这时就可以隐藏文件的隐藏
- 表单的只读和禁用设置
- 只读场景:网站服务器不希望用户修改数据,这些数据在表单元素中显示。(属性设置readonly=“readonly“)
- 只有满足这个条件时,才能使用此功能。(disabled=“disabled”)
3.3语义化的表单
- 关于语义化
语义化:达到结构简单,代码简单。
- 语义化表单
- 域
fieldest:这标签实现域的定义。把元素放到这个标签内时,浏览器就会以特殊的方式显示出来,这些表单就可能有一个边界。
- 域标题
legend:标签就是给域设置的一个标题,
- 通常是这两个标签结合着使用。实现语意话表单
- 表单元素的注释
- 定义:使用一个标签对内容注释了,当用户点击此内容时,浏览器会自动聚焦到相应的表单元素上。
- 语法:<label for=”表单元素的id“>标注的文本</label>
- 注意:需要在输入的input标签中定义属性:id 并赋值
HTML5基础知识及相关笔记的更多相关文章
- 第一天上午——HTML网页基础知识以及相关内容
今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...
- 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素
[源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...
- linux内存基础知识和相关调优方案
内存是计算机中重要的部件之中的一个.它是与CPU进行沟通的桥梁. 计算机中全部程序的执行都是在内存中进行的.因此内存的性能对计算机的影响很大.内存作用是用于临时存放CPU中的运算数据,以及与硬盘等外部 ...
- 《Python编程:从入门到实践》基础知识部分学习笔记整理
简介 此笔记为<Python编程:从入门到实践>中前 11 章的基础知识部分的学习笔记,不包含后面的项目部分. 书籍评价 从系统学习 Python 的角度,不推荐此书,个人更推荐使用< ...
- html5基础知识
html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ...
- sql sever 基础知识及详细笔记
第六章:程序数据集散地:数据库 6.1:当今最常用的数据库 sql server:是微软公司的产品 oracle:是甲骨文公司的产品 DB2:数据核心又称DB2通用服务器 Mysql:是一种开发源代 ...
- python基础知识1---python相关介绍
阅读目录 一 编程与编程语言 二 编程语言分类 三 主流编程语言介绍 四 python介绍 五 安装python解释器 六 第一个python程序 七 变量 八 用户与程序交互 九 基本数据类型 十 ...
- 第1课_Java基础知识【学习笔记】
摘要:韦东山android视频学习笔记 一.android系统的基本框架如图一所示,应用程序是用java编写的,底层驱动是用C代码写的,java与C怎么连接在一起主要是通过本地服务.android系统 ...
- HTML5 基础知识(1)——基本标签
## HTML**概念**:是最基础的网页开发语言(Hyper Text Markup Langage 超文本标记语言) > 1.超文本:超文本是用超链接的方式i,将各种不同空间的文字组织在一起 ...
随机推荐
- C++重写(override)、重载(overload)、重定义(redefine)以及虚函数调用
一.基本概念 对于C++中经常出现的函数名称相同但是参数列表或者返回值不同的函数,主要存在三种情况: 1.函数重写(override) 函数重载主要实现了父类与子类之间的多态性,子类中定义与父类中名称 ...
- NSA武器库知识整理
美国国家安全局(NSA)旗下的"方程式黑客组织"(shadow brokers)使用的部分网络武器被公开,其中包括可以远程攻破全球约70%Windows机器的漏洞利用工具. 其中, ...
- Vuejs 页面的区域化与组件封装
组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元 ...
- 基于NIOS-II的示波器:PART4 系统调试&测试
本文记录了在NIOS II上实现示波器的第四部分. 本文主要包括:修改部分BUG,以及测试 本文所有的硬件以及工程参考来自魏坤示波仪,重新实现驱动并重构工程. version 1.0 界面修改& ...
- 0908期 HTML 样式表属性
1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径); /*设置背景图片(默认)*/ background-attachment:fixed; ...
- 从web图片裁剪出发:了解H5中的Blob
刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...
- 【1414软工助教】团队作业7——Alpha冲刺之事后诸葛亮 得分榜
题目 团队作业7--Alpha冲刺之事后诸葛亮 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析& ...
- 201521123112《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 在做PTA5.3的时候一段看起来比较复杂的代码: List<En ...
- 201521123080《Java程序设计》第2周学习总结
1.本周学习总结 a.学习了如何建立远程仓库和本地仓库并建立连接. b.学习了一些基础语法. 2.书面作业 Q1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)?分析Str ...
- 201521123068《Java程序设计》第1周学习总结
1. 本周学习总结 Java是各个应用平台的基础,学习了解Java SE以奠定基础: 使用Myeclipse 或者Eclipse 进行编程: Java语言具有平台无关性.面对对象(封装.继承.多态). ...