Web前端—

>Web前端概述

html：基本的标签，建筑队，毛坯房
css：装修队，装修
js：动态效果/实现功能
bootstrap：现成的前端框架，主要用于展示

>HTML概述

HTML：纯文本文件，超文本文件，html/htm为后缀；

HTML文件用浏览器来解析，和显示效果；

HTML是一种标签语言，一切内容要写在标签里<>,其中标签名字都已经定义好了；（对比：xml语言的标签全部需要自己定义）

HTML的版本：h4/h5(h5版本多了一些标签，还支持”媒体查询“，即支持不同大小的设备来浏览)

网页文件的首行区别：

h4：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

h5：<!DOCTYPE html>

>写一个HTML就两步：

1.加入一个你想要的功能的标签；

2.查手册调整这个标签的属性，调整显示效果；

>基本语法

<html><head><meta charset="UTF-8"><title></title></head><body><p></p></body>
</html>

大小写不区分；
标签分单双，双标签中间是被这个标签修饰的文本或其他标签.；
标签大多数有属性，属性写在开始标签里，单标签时，属性写在 / 前面；
标签可以嵌套，不能交叉；
关于head标签：通常给浏览器使用，告知浏览器怎么解析本页面文件；
标签定义了一些基本的格式的展示，属性定义了本标签的一些格外展示；

>实体

HTML预定义了一些字符，想使用这些字符的时候，使用实体代替：

>路径

相对路径：从A找B的路径称为相对路径（从A所在的文件夹去找B）

返回上级目录: ../
进入a目录: a/

绝对路径：在某个系统里，唯一一条确定某个资源的路径。

盘符：//（本地文件协议）

http：//IP：端口/项目/文件（HTTP协议）

（通过服务器网络访问的形式，看不到服务器上的绝对路径下的资源，必须用相对路径）

>img标签

<img src="img/捕获.PNG"  alt="图片挂了" title="鼠标悬浮看提示信息" width="200px" height="200px"/>

>a标签(超链接)

超链接是一个网页中最最重要的组成部分.
a:标签属性： href: 链接到的资源的路径 target: 在何处打开 href路径表示的资源 _blank:新窗口.

a:标签做锚点：

1:页面间的链接.
2:锚链接. 返回页面顶部 .书签. 中部.

需要两对儿a标签：1对做定点的"桩子" 使用name/id属性来标识
1对做点击使用 href 使用# 加上桩子名来定位桩子

3:功能性. 打开一个图片/mp3/打开一个js的功能.

<a id="top">顶部</a><br />
<img src="img/捕获.PNG" width="50px" height="2000px" />
<a href="#top">回顶端</a>

>marquee标签（滚动文字或图片）

<marquee direction="right">滚动文字体！</marquee>
<marquee behavior="alternate" scrollamount="100" scrolldelay="100" width="1000px" height="100px" ><img src="img/捕获.PNG" />
</marquee>

>ul/ol和li标签（列表和列表项）

<ol><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol>

<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>
有用的：type=”disc” | ”square” | ”circle”

>audio标签（音频标签）

<audio src=””  autoplay=””  controls=””  loop=””></audio>

属性名：

src:音频地址。

autoplay:是否装载好后自动播放。

controls:是否显示播放的控制条。

loop:是否重复播放。

>video标签（视频标签）

<video src=””  autoplay=””  controls=””  loop=”” width=””  height=””></video>

属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

>table标签（表格）

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、表格等等。

属性	描述
border	隶属于<table>标签，定义表格宽度
cellspacing	隶属于<table>标签，单元格间距，定义单元格之间的距离
cellpadding	隶属于<table>标签，单元格边距，定义单元格内容与边框的距离
bgcolor	应用于<table>、<td>、<th>标签，设置表格的背景色（过时）
background	应用于<table>、<td>、<th>标签，设置表格的背景图片（过时）
align	应用于<table>、<td>、<th>标签，表格是设置表格在外部容器中的对齐方式，单元格是设置内容的对其方式（过时）
colspan	应用于<td>、<th>标签，合并列
rowspan	应用于<tr>标签，合并行

注意：

表格默认没有边框，添加边框可以添加border属性，或者添加frame和rules属性；
表格的作用：用来做数据展示；早期用来做布局，但后来就用作小区域的布局，大布局用层div来做；
表格做布局时，经常用到单元格合并，多格在合并前分别在不同行/列，合并后在统一行/列，称之为行/列合并；
合并操作：在合并的多个格子的第一个格子里写合并属性（rowspan=合并参与总数/colspan=合并参与总数）；
将被合并的单元格注释掉；

>行级标签与块级标签(css中行块之间可以相互转换)

行级元素/标签：

行级元素的宽高不可调，由内容决定；
行级元素的内填充不可调整；
行级元素的外边距不可调整；
行级元素跟其他行级元素挤在一行内；
常见的行级元素有：a/ font/ span/ b/...

块级元素/标签：

块级元素的宽高可调整；
块级元素的内填充可调整；
块级元素的外边距可调整；
块级元素自己独占一行；
常见的块级元素有：h1-6/ p/ table/ div/ form/...

特别的，例如 img/iframe都是行级块元素（跟其他行元素挤在一行，但是宽高可控）

>iframe标签（内嵌页面）

注意：frameset和frame已经过时，且强烈不建议使用了；

<iframe src="URL"></iframe>

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
src	URL	规定在 iframe 中显示的文档的 URL。
width	pixels %	定义 iframe 的宽度。

>form标签（表单标签）

对于后端人员，学习页面最重要的就是表单和超链接。折两部分可以与后台的Java程序进行通信；
表单是form标签，是用来收集用户在页面上的数据的。
表单里有很多组件，不同组件有不同的显示效果。文本框，密码框，下拉菜单.....
一个表单里可以设计很多不同组件，这些组件通常会把收集的数据一起发送给服务器程序；

重要属性：

action：值是一个地址/路径。通常是服务器端程序的路径（可以理解为表单数据提交给谁）

method：表单的提交方式。常用的两种方式 get/post

--get：会把你的请求参数显示在地址栏上，使用？开头 k=v&ki=vi的形式，携带参数；

get的方式，不太安全，携带的参数有大小要求；get是默认提交方式，超链接也是使用get方式提交；

--post：不会把提交的数据显示，会封装在请求体里，这种方式传递的参数没有大小限制；

更加安全，文件上传是使用的post方式；

enctype：整个表单提交的数据的编码格式。如果没有文件上传组件，则不需要改动该属性；

name：name属性（通常给后台程序使用），可以重复，必须写，否则不能提交到服务器，因为要告知服务器你提交的数据是什么数据；

id：id属性（通常用在前端），且唯一；

>表单组件的控制属性

readonly：只读，值跟标签名一样，修饰单行文本/密码框可以提交；

disable：禁用，值跟标签名一样，修饰任意表单组件，禁用不能提交；

checked：默认选择，单选按钮/复选按钮；

selected：默认选择，下拉菜单；

>h4的input标签（input组件）

>h5新增的input标签（了解）

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

> select标签（下拉菜单组件）

<!--select--><form><select><!--选项组--><optgroup label="华北"><!--选项--><option>北京</option><option>天津</option></optgroup><optgroup label="华东"><option>山东</option><option>江苏</option></optgroup></select></form>

>textarea标签（多行文本标签）

<textarea name="note" cols="" rows=""></textarea>

>button标签（按钮标签）

>meta标签：

Web前端——HTML相关推荐

读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
对WEB前端的几段思考（一）——界面设计和性能优化（整理中）
尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员 ...
web前端知识点太多_初学web前端，学习方法容易走偏，这是为什么？
一.了解web前端所谓"知己知彼,百战不殆",在学习web前端之前,还是让我们先了解一下什么是web前端吧! 所有用户终端产品与视觉和交互有关的部分,都属于前端开发的领域.从狭义 ...
web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
web前端培训分享：面向对象中类和对象的定义是什么?
在学习web前端技术的时候,我们接触的最多的便是面向对象这一块,其实很多编程技术都有用到这个现象,下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享:面向对象中类和对象 ...
哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
web前端培训要学多久
近几年web前端在互联网行业的快速发展,很多人都对web前端是非常感兴趣的,学习web前端技术的人越来越多,那么参加web前端培训要学多久呢?相信大家都想知道这个答案,我们来看看下面的详细介绍. ...
web前端的就业前景好不好
web前端的就业前景好不好?一直有人都想知道这个答案,其实放眼互联网未来,web前端的发展前景都是非常好的,那么它的就业前景自热也是不错,具体来看看下面的详细介绍就知道了. web前端的就业前景好不好 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...

Web前端——HTML

Web前端——HTML相关推荐

最新文章

热门文章