关键词：
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="图片地址" >
文本标签
- 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:UsersadminDesktopTLXY-前端课件代码复习.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学习之路
第1章HTML5基础 关于HTML5基础这一部分的内容没有明显边界。各种HTML5教材关于HTML5基础知识的介绍大同小异，这里不做过多赘述。 1. 我们要把HTML5简单用起来，首先要学会新建HTML5文档。每个网页都包含doctype、html、head... 查看详情
html5前端框架
本文由PHP100中文网编译HTML5框架可以快速构建响应式网站，它们帮助程序员减少编码工作，减少冗余的代码。如今有很多免费的HTML5框架可供使用，由于它们有着响应式设计、跨浏览器兼容、相对轻量级等特点，这些框架在开发... 查看详情
前端html5思维导图笔记
看不清的朋友右键保存或者新窗口打开哦！热爱学习前端，喜欢我可以关注我，更多的思维导图笔记 查看详情
html5前端
Web前端介绍angular2html1.HTML(常用标签网页的基本结构)2.CSS(常用样式网页的显示效果)3.JavaScript(用户交互效果动态效果)4.jQuery(JavaScript库简化原生js操作)5.Ajax(异步数据交互在页面不刷新的情况下进行数据交互)6.BootStrap(前段UI框架快... 查看详情
前端笔记?html
1.什么是HTML5 网页的5.0版本。2014年才定制完HTML5的标准，历时8年2.为什么要用HTML5 1>跨平台：利用HTML5编写的UI界面能运行在所有拥有浏览器的平台 2>HTML5的运行平台：浏览器 3>但是HTML5不能完成一些特定... 查看详情
前端学习之html5
一、文本与段落标记<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>文本与段落标记</title></head><body><h1>欢迎来到HTML5</h1><br><hrwidth= 查看详情
html5简单归纳--前端知识
HTML5全屏事件全屏事件：requestFullScreen关闭全屏：cancelFullScreen判断是否全屏：fullScreenElement 注意：现各大主流浏览器中由于内核不同的原因，会出现不兼容的问题，为了让自己的代码能在各大主流浏览器中都能正常运行，所... 查看详情
移动前端头部标签(html5headmeta)
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。<!DOCTYPEhtml><!--使用HTML5doctype，不区分大小写--><htmllang="zh-cmn-Hans">&l... 查看详情
html5与web前端有啥区别
这两个有区别吗？从招聘职位上来说，WEB前端开发工程师和HTML5开发工程师有着细微的差别从技术方面来说，WEB前端和HTML5技术是相同的，同时指代的都是HTML5技术，只不过是两种不同的名称和叫法（WEB前端是2005~2013年比较流行的... 查看详情
前端开发之旅-移动端html5实现文件上传
一、在一个客户的webapp项目中需要用到html5调用手机摄像头，找了很多资料，大都是js调用api 然后怎样怎样，做了几个demo测试发现根本不行，后来恍然大悟，用html5自带的inputfile="" ，纯html5，并且不涉及到js，就... 查看详情
html5前端面试常见问题汇总
基础强化篇聊一聊前端存储。 BFC 前端工程化篇场景：你是第一天来公司上班的，项目代码托管在GitLab，项目地址：[email protected]:org/project.git,现在有一处代码需要你修改。请下完成此项任务中，与git/gitlab相关的... 查看详情
前端面试问题（html5+http+web）
HTML(5)1.简要介绍HTML5的新特性首先HTML5为了更好的实践Web语义化，增加了header、footer、nav、aside、article、section等语义化标签。在表单方面，为了增强表单，为input增加color、email、date、range等类型，在存储方面提供了sessionStorage、lo... 查看详情
html5前端实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现。她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就... 查看详情
html5-前端开发很火且工资很高?
前言晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前端开发越来越火,工资高,并且还涨... 查看详情
前端-html5canvas学习
canvas元素算是HTML5添加的最受欢迎的功能了。它是通过在页面中设定一个区域，然后用脚本来编辑图形。可像下面这样来引入一个canvas图像<canvasid="myCanvas"></canvas><scripttype="text/javascript">varcanvas=document.getElementById(‘myC... 查看详情
html5前端如何实现文字边框阴影
上次我们聊了《Html5前端如何实现文字阴影》,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影。一.边框阴影box-shadow边框阴影参数:参数1x-shadow：设置对象的阴影水平... 查看详情
html5前端杂记
首先是css的一些知识毕竟自己懂得不多，但是一看资料。感觉似曾相识<style>.red-text{color:red;}</style>//这里是css样式的代码<h2class="red-text">html编程入门教程</h2><pclass="red-text">在大家心目中，也许编程是一件非... 查看详情
前端随心记---------html5+css系列8.0
HTML5新增标签（二） HTML5新增的其他元素 mark高亮显示文字，典型应用搜索结果中高亮显示搜素关键字。写法：<mark></mark> source标签标签为媒介元素（比如<video>和<audio>）定义媒介资源。 ... 查看详情