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="图片地址" >

文本标签

  • b标签 i标签 strong标签 em标签

无语义的行内元素

  • span标签 配合css使用

三、常用的实体字符

angular2html &gt;&lt;&copy;

四、表单标签

表单是一个包含表单元素的区域。通过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当中的实体字符 &gt;:大于号 , &lt;:小于号 ,&copy; &nbsp;空格-->
1>2; <br>
1&gt;2; <br>
1&lt;2; <br>
&copy; <br>
注意:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小

表单标签

<!--form标签来划定一个表单区域
action:数据的提交地址
method:提交方式 get post
表单提交默认是以get方式进行数据的传输
get:通过url地址传输数据,数据会显示在url地址栏当中
传输数据有大小限制,根据浏览器的不同数据大小不同
相对来说不安全
post:数据不通过url地址传参,想读来说较安全
数据传输没有具体的大小限制
一般表单指定使用post方式提交数据
enctype:如果表单当中有文件上传必须添加这个属性
指定属性值为 "multipart/form-data" 用于文件转码

原文地址：https://www.cnblogs.com/qingchunshiguang/p/9689740.html

时间： 2024-10-07 10:35:32

HTML5前端的相关文章

HTML5前端开发工程师工资为什么那么高？

现代社会的就业压力可以说是非常的大,大学毕业生一抓一大把,要是没有一技之长很难在这个社会中立足,所以为了能够跟上时代的脚步,就必须掌握一个特长,就目前的发展来说,企业对于HTML5前端开发人才需求量可以说是非常的大.那么HTML5前端开发工程师工资为什么那么高呢? 越来越多的企业开始注重到用户体验,小到企业网站.个人主页,大到政府部门,都是通过网站向外界展示形象.传播信息,网站离不开HTML5前端开发人员,所以学习HTML5前端开发在当前社会里非常受用,工资也就越来越高. HTML5前端开发工程

HTML5前端（移动端网站）性能优化指南

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技

五款国内最火的HTML5前端开发框架【中国寒龙整理发布】

本文主要为大家推荐五款国内最火的HTML5前端开发框架,它们分别是腾讯团队开发的JX.淘宝团队开发的KISSY.百度团队开发的QWrap和Tangram,以及上海康尚实验室推出的Como. 1. JX(腾讯) JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服役于 WebQQ 等大规模的 WebApp. JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode ,于2012年切换到Github. JX 框架同时适

在千锋参加html5前端开发培训的心得体会娓娓道来

四个多月在千锋参加html5前端开发培训的时间说起来也不短了,突然间毕业了,要找工作了,我还是有股莫名的伤感和孤独,也很舍不得这些一起通过html5前端开发培训走过来的亦师亦友的伙伴.作为来深圳千锋参加html5前端开发培训相交的第一批朋友,我还是很珍惜的.我只能感叹时光飞逝,稍纵不复返. 在html5前端开发培训期间,非常感谢千锋html5前端开发培训老师的真心付出,带着我们慢慢成长起来,尤其感谢韩老师和邓老师,因为有他们,生活才特别可爱,我也完成了蜕变.另外,值得一提的是游戏部分mars老师

移动手机平台的HTML5前端优化指南

对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB 5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点 6.

HTML5前端开发是做什么的？HTML5前端开发前景浅析

前端是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.Java 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端网页,处理视觉和交互问题. 前端的三大基础毫无疑问就是HTML.CSS和JS.我称之为前端的骨.肉和魂. 先说"骨"--HTML.HTML,翻译过来就是超文本标记语言,而不是江湖上的HOW TO ML.方向不能搞错了,我们整的东西可是老少咸宜的.HTML学习最重要的标签的学习,div.h1-h6.p.ul

什么是HTML5前端开发？HTML5前端要学哪些技术？

什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程序开发.维护的专业人员,其中程序员可以分为设计和编码两个部分. HTML5前端的发展前景可观,可以从事的工作也很多,比如:web前端开发工程师.HTML5开发工程师.web APP开发工程师.Java开发工程师等. 那么想要学好HTML5前端开发,那么需要掌握的专业技术有哪些? 第1阶段:前端页面重构:PC端网站布局.HTML5+CSS3基础项目.Web

15个最好的HTML5前端响应式框架(2014)

文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法,参见: LESS vs SASS?选择哪种CSS样式编程语言? 最好的HTML5框架一般也是最流行的,使用这些框架可以极大地减少你的工作量,节约你的时间. HTML5有非常有用和令人意想不到的功能,但也有少数浏览器并不支持HTML5,因此我们需要基于HTML5的前端响应式框架做跨浏览器的支持.这些HTML5的框架有很多,大多支

国外很有多优秀的HTML5前端开发框架

相信大家都耳熟能详:JQuery Mobile,Twitter Bootstrap, Schena Touch,  BackBone等等. 同样,也存在很多国内比较优秀的前端开发框架,其中中国互联网三巨头贡献了近一半:腾讯,阿里巴巴,百度. 框架不是万能的,选择和项目匹配的框架可以显著提高开发效率,但是也有可能带来代码的臃肿,本着”思想,选择合适的框架是最重要的.其中每个框架各有特点,还需要读者自己把关.如:腾讯的JX比较适合构建和组织大规模.工业级的Web App,腾讯内部的WebQQ.Q+等

html5前端框架

本文由PHP100中文网编译 HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap Bootstrap来自Twitter,是目前最受欢迎的前端框架,它简洁灵活,使得Web开发更加方便快捷.它有着优雅