HTML5前端
Web前端介绍
angular2html 1.HTML (常用标签 网页的基本结构) 2.CSS (常用样式 网页的显示效果) 3.JavaScript (用户交互效果 动态效果) 4.jQuery (JavaScript库 简化原生js操作) 5.Ajax (异步数据交互 在页面不刷新的情况下进行数据交互) 6.BootStrap (前段UI框架 快速搭建静态页面并支持不同设备)
HTML概述
一、什么是HTML
HTML 是用来描述网页的一种语言。
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
二、HTML是干嘛的
可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
三、建立HTML文件
- .html
- .htm
四、HTML注释
```angular2html
```
五、HTML网页的基本结构
```angular2html <!DOCTYPE html> 声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元(meta)数据 元素包含了可见的页面内容
```
通用声明 (了解)
HTML5 angular2html <!DOCTYPE html>
HTML4.01 angular2html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML1.0angular2html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
六、HTML标签结构
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词
- HTML 标签通常是成对出现的
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
angular2html <开始标签>内容</结束标签>
七、HTML元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思. 一个 HTML 元素包含了开始标签与结束标签
八、HTML属性
- HTML 元素可以设置属性
- 属性一般添加在开始标签
- 属性一般以名称/值对的形式出现,比如:name="value"。
注意: - 属性值必须用双引号引起来 - 标签都用小写字母 - 双标签必须要写闭合标签
HTML常用标签
一、HTML常用的块级标签(块级元素)
独占一行
有语义的HTML块级元素
有默认样式
标题(Heading)
通过H1~H6 标签来定义的.
段落
通过标签 p 来定义的.
列表
无序列表 ul,li
是一个项目的列表,列项目使用粗体圆点(典型的小黑圆圈)进行标记
有序列表 ol,li
也是一个项目的列表,列表项目使用数字进行标记。
自定义列表 dl,dt,dd(了解)
注意: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
表格 table,tr,td
table常用属性
- border 边框
- cellpadding 内容距离表框的距离
- cellspacing 单元格和单元格之间的距离
- rowspan 垂直合并(跨行显示)
- colspan 水平合并(跨列显示)
- anglin 内容水平对其方式
- valign 内容垂直对其方式
无意义的块级元素 div
angular2html <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示换行。 一般与 CSS 一同使用 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
二、HTML常用的行级标签(行内元素)
不独占一行
有语义的行内元素
HTML链接 a标签
angular2html <a href="链接地址">链接文本</a>
target属性,定义被链接的文档在何处显示 _blank 新窗口打开
HTML图像
angular2html <img src="图片地址" alt="">
文本标签
- b标签 i标签 strong标签 em标签
无语义的行内元素
- span标签 配合css使用
三、常用的实体字符
angular2html ><©
四、表单标签
表单是一个包含表单元素的区域。通过form来定义表单区域
通过type属性定义不同类型的表单控件 - text 普通文本输入框 - password 密码输入框 - radio 单选按钮 - checked 多选按钮 - select 下拉框 - file 文件上传选框 - textarea 文本域 - submit 提交按钮 - reset 充值按钮 - hidden 隐藏域,要和表单单一其提交的信息
常用属性:angular2html name 属性:表单项名,用于存储内容值 value属性:输入的值 disabled属性:禁用属性 readonly属性:禁用属性 checked属性:选择框指定默认选项 placeholder:提示
注意: ```angular2html form 有两个必须存在的属性 action提交地址 metchod提交方式 post:通过request body传参,参数不可见,参数没有大小限制 get:通url进行传参,参数可见,不安全,大小有限制,
如果表单中含有文件上传 method提交方式必须为post form中必须有enctype属性 enctype="multipart/form-data" ```
链接标签
a标签 href属性,跟的是要跳转的网址
target :_blank 在新窗口打开跳转的页面
<a href="http://www.baidu.com">百度</a>
<a href="./复习.html" target="_blank">跳转到本地的文件(复习.html)</a>
<!--路径问题 在实际开发当中建议使用相对路径 ./当前目录 ../上目录-->
<!--绝对路径 在windows当中绝对路径的根是我们文件所在的盘符
C:\Users\admin\Desktop\TLXY-前端课件代码\复习.html
-->
<!--通过a标签锚点的制作-->
<!--图像标签 img(但标签 不需要闭合)
src: 图片的地址(网络资源或者本地资源)
alt:用于图片加载失败的替代文字 (必须存在)
title:鼠标选题在图片上的提示信息(可写可不写)
width:设置图片的宽度
height:设置图片的高度
注意:一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小
-->
<img src="http://pic1.win4000.com/wallpaper/9/56fcd25dbb4a8.jpg" width="200px" height="200px" alt="这是图片标签" title="这是一张美女高清大图">
<!--<img src="./images/56fcd25dbb4a8.jpg" alt="这是一张美女大图">-->
<br>
<!--文本标签-->
<!--加粗b strong:具有强调意义 斜体i em:斜体,具有强调意义-->
<b>src:</b> 图片的地址(网络资源或者本地资源)<br>
<i>alt:</i>用于图片加载失败的替代文字 (必须存在) <br>
<strong>title</strong>:鼠标选题在图片上的提示信息(可写可不写) <br>
<em>width:</em>设置图片的宽度 <br>
height:设置图片的高度 <br>
注意:一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小 <br>
<!--span 无语义的行级元素 一般span标签也是配合css使用 来设置文本当中一部分内容-->
<span style="color:red">注意:</span>一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小 <br>
<!--html当中的实体字符 >:大于号 , <:小于号 ,© 空格-->
1>2; <br>
1>2; <br>
1<2; <br>
© <br>
注意: 一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小
表单标签
<!--form标签来划定一个表单区域
action:数据的提交地址
method:提交方式 get post
表单提交默认是以get方式进行数据的传输
get:通过url地址传输数据,数据会显示在url地址栏当中
传输数据有大小限制,根据浏览器的不同数据大小不同
相对来说不安全
post:数据不通过url地址传参,想读来说较安全
数据传输没有具体的大小限制
一般表单指定使用post方式提交数据
enctype:如果表单当中有文件上传必须添加这个属性
指定属性值为 "multipart/form-data" 用于文件转码
HTML5前端的更多相关文章
- HTML5前端(移动端网站)性能优化指南
HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交 ...
- 国内HTML5前端开发框架汇总
国内HTML5前端开发框架汇总 Dawei Cheng 程大伟... 于 星期日, 02/12/2012 - 20:53 提交 国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery ...
- HTML5学堂 全新的HTML5/前端技术分享平台
HTML5学堂 全新的HTML5/前端技术分享平台 HTML5学堂是做什么的? HTML5学堂~http://www.h5course.com~由多名热爱H5的讲师们组成的一个组织.致力于构建一个前端 ...
- HTML5 前端框架和开发工具【下篇】
HTML5 前端框架和开发工具[下篇] 快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带 ...
- 尚硅谷《全套Java、Android、HTML5前端视频》
尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...
- 国内最火的五款HTML5前端开发框架
2013-04-11 本文主要为大家推荐五款国内最火的HTML5前端开发框架,它们分别是腾讯团队开发的JX.淘宝团队开发的KISSY.百度团队开发的QWrap和Tangram,以及上海康尚实验室推出的 ...
- 国外很有多优秀的HTML5前端开发框架
国外很有多优秀的HTML5前端开发框架 相信大家都耳熟能详:JQuery Mobile,Twitter Bootstrap, Schena Touch, BackBone等等. 同样,也存在很多国内 ...
- 推荐25款实用的 HTML5 前端框架和开发工具【下篇】
快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. ...
- 15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
- 2018年尚硅谷《全套Java、Android、HTML5前端视频》
全套整合一个盘里:链接:https://pan.baidu.com/s/1nwnrWOp 密码:h4bw 如果分类里没有请下载下边那些小项教程链接 感谢尚硅谷提供的视频教程:http://www.at ...
随机推荐
- Python中的and和or
引子: 出现以上情况的原因是什么呢? print(bool('')) # False print(bool(0)) # False 所有变量的位操作都是通过强制转换成bool实现的,并且表达式的值是从 ...
- halcon发布
1: halcon发布 : 在MFC程序中 添加 #include "include/halcon/cpp/HalconCpp.h"using namespace Halcon;# ...
- linux系统文件
关于linux系统文件命令 (1)Linux的文件系统目录配置要遵循FHS规范,规范定义的两级目录规范如下: /home 每个账号在该目录下都有一个文件夹,进行数据的管理 ...
- discuz过滤词语无效
1.是由于一些特殊的字导致serialize序列化错误.过滤词语在表 common_word中,序列化房子common_syscache的censor中,看看是否有特殊符号.
- avalonJS-源码阅读(二)
上一篇文章讲述的avalon刷页面所用到的几个函数.这篇则是主要讲avalon对刷DOM刷出来的avalon自定义属性如何处理的. 目录[-] avalon页面处理(2) 数据结构 解析avalon标 ...
- 01 Go 1.1 Release Notes
Go 1.1 Release Notes Introduction to Go 1.1 Changes to the language Integer division by zero Surroga ...
- python网络编程--RabbitMQ
一:RabbitMQ介绍 RabbitMQ是AMPQ(高级消息协议队列)的标准实现.也就是说是一种消息队列. 二:RabbitMQ和线程进程queue区别 线程queue:不能跨进程,只能用于多个线程 ...
- 洛谷P3621风铃
传送门啦 分析: 这个题看起来像是个树形dp,嗯,就是看起来像. 所以我们就按树形dp的思路去分析就好了,这个题是一个树形dp的变形题. 和以前建树是一样的,我们用邻接表来进行储存.利用邻接表的特性, ...
- vue-cli脚手架安装
-1.安装淘宝镜像 $ alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.ca ...
- HDU 3374 String Problem(KMP+最大(最小)表示)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题目大意:给出一个字符串,依次左移一个单位形成一堆字符串,求其字典序最小和最大的字符串需要左移多 ...