HTML进阶
HTML学习规划:
- HTML
- XHTML
- CSS
- CSS3
- JavaScript
- JQuery
- HTML5
一 HTML基础
-
IDAE常用快捷键:
(1)注释:Ctrl+/
(2)移动:Alt+↓或Alt+↑
(3)代码提示:Alt+/
(4)快速复制:Ctrl+Alt+↓
(5)删除一行:Ctrl+D -
head标签:定义语言,编码格式,style等全局变量。
-
h1~h6标签:标题
-
p标签:定义段落,开启新行。
-
a标签:定义超链接。
-
img标签:定义图像,注意路径。
-
align属性:对齐方式,居左,居中,居右。默认居左。
-
a标签中name属性定于文档内部的跳转,在一个a中设置name的名,另外一个a的标签的href设置为【#name名】。
扫描二维码关注公众号,回复: 9949819 查看本文章 -
border属性:定义边框。
-
body标签:margin属性使从左顶点开始,去掉小白条。margin: 0px;
-
HTML布局;
(1)使用<div>布局:- float: left;<!–从左到右的排序方式 -->
- clear: both;<!–清除上面设置的浮动 -->
(2)使用<table>布局:类似表格的布局方式。
-
表单与PHP的交互:
(1)<form>标签中的action属性设置提交的服务器,method属性设置提交方式(POST,GET)- GET:在URL中会显示信息。可以作资源定位
- POST:则不会在URL中显示信息。 更安全一点。GET和POST要和PHP文件中的对应一直。
(2)action属性:设置服务器地址,比如:
<form action="http://localhost/Myfirst/myphp.php" method="POST">
。 -
框架标签(frame):(HTML5中已经过时)
-
框架集标签(frameset):(HTML5中已经过时)不能创建在body标签中。
(1)定义任何将窗口分隔为框架,每个frameset定义了一系列行和列,rows/cols的值规定了每行或列占据屏幕的面积。 -
内联框架:iframe。(HTML5仍在使用)
(1)例:<iframe src="Demo1.html" frameborder="0px"></iframe>
,src指定页面,frameborder是取消边框。也可以设置宽和高属性。
(2)target属性,在何处打开链接,其中parent和top是在嵌套页面时的父框架中打开和打开到最顶层。 -
颜色:由十六进制符号来定义。最小值为#00,最大值为#FF。
(1)红色:#FF0000
(2)绿色:#00FF00
(3)蓝色:#0000FF -
XHTML:指的是可扩展超文本标记语言,与HTML4.01的语法几乎一样。
(1)XHTML是更严格更纯净的HTML版本,是以XML应用的方式定义的HTML。
(2)XHTML语法规范:- 标签必须正确嵌套。
- 元素必须始终关闭。
- 元素必须小写。
- 必须有跟元素。
- 属性的值必须在引号中。(HTML5则可以省略引号)
-
HTML5中具有Boolean值的属性:
(1)当具有布尔类型值的属性不指定属性值的时候,默认为true。不写该属性,则为false。
(2)将属性名设置为属性值,则为true。字符串为空也是true。
概述:
HTML5新增的元素:
- 结构元素
section、article、 aside、 header、 hgroup、 footer、 nav、figure- 其他元素
video、audio、 embed、 mark、 progress、 meter、 time、 ruby、 rt、rp、wbr、canvas、command、 details、 datalist、 datagrid、 keygen、 output、source、menu- input元素的类型
email、url、number、 range、 Date Pickers
-
HTML5结构元素简介:
(1)section元素:表示页面中的内容块,比如:章节,页眉,页脚。与h1~h6等元素结合使用,表示文档的结构。- section元素用于对网站页面进行分块。对一段内容分段。
- 通常由内容及其标题组成。
- 但section元素并非普通容器,当一个容器需要被直接定义样式或通过脚本定义行为时,应该使用div。
- section元素可以嵌套在article元素中。
(2)article元素:表示页面中的一块与上下文不相关的独立内容,比如:博客中的一片文章。
- 包裹一段代码,其中可以有头部(header)尾部(footer),就相当于将页面进行分割。代替div元素。
- article元素可以嵌套。 可以表示一个插件,类似内嵌页面。
- article可以看做是一个特殊的section,只不过它更强调独立性。
(3)aside元素:表示article元素之外的,与article元素相关的辅助信息。
- aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。
(4)header元素:表示页面中的一个内容区域块。表示标题。
(5)hgroup元素:用于对整个页面或页面中的一个内容块的标题进行结合。通常会将h1~h6元素进行分组。
(6)footer元素:表示页面中的一个部分,通常是底部。承载作者,日期,版权信息等。
(7)nav元素:页面内的导航链接。
-
nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分
-
并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。
-
nav元素应用场景:
●传统导航条
●侧边栏导航
●页内导航
●翻页操作
(8)figure元素:表示一段独立的内容,一般表示文档主题内容中的一个独立的单元。
(9)address元素:用来在文档中呈现联系信息,比如:名字,邮箱,地址,电话等
(10)<hr>元素:画一条线段。 -
HTML5其他元素简介:
(1)video、audio元素:视频、音频。
(2)canvas元素:定义画布。(重点)仅提供一块画布。 -
HTML5input元素的类型:
(1)email属性:输入必须是email地址。
(2)url属性:表示文本框输入的一个地址。
(3)number属性:只能输入数字。将typ设置为number,就只能输入数字。
(4)range属性:输入的数字的范围值。
(5)Date Pickers属性:日期,时间。 -
表单新增元素和属性:
(1)form属性:包含整个表单。
(2)formaction属性:可以提交到不同的页面。而HTML4只在form中设置一个action,只能提交到一个页面。
(3)formenctype属性:一个如何对表单数据进行编码。该属性有三个值:
- text/plain:表单数据中的空格被转换为加号,但不对特殊字符进行编码
- multipart/form-data:不对字符进行编码,上传文件是必须使用该值。
- application/x-www-form-urlencoded:在发送前编码所有字符,
(4)formtarget属性:为每个提交设置在何处打开加载页面。
(5)autofocus属性:为文本框,选择框或按钮自动获得焦点。
(6)required属性:规定在提交时,如果输入内容为空则不允许提交,同时在浏览器中显示提示文字。
(7)labels属性:~~待更
(8)formmethod属性:设置每个元素的提交方式,比如:POST,GET。
(9)标签的control属性:可以在标签内部放一个表单元素,并且通过该标签的control属性来访问该表单元素。
(10)文本框的placeholder属性:指文本框处于未输入状态时显示的提示。
(11)文本框的list属性:带类似下拉框的输入框,可以选,也可以自己输入。<datalist>标签搭配使用。
(12)文本框的AutoComplete属性:~~待更
(13)文本框的pattern属性:对输入的内容进行检查,不符合给定格式,则不允许提交。正则表达式。
(14)文本框SelectionDirection属性:获取用户的操作
(15)复选框的indeterminate属性:复选框的三种状态,即:未操作、未选中、选中
(16)image提按钮的height和width属性:照片按钮的宽和高。
-
全局属性:
(1)contentEditable属性:- 功能:允许用户编辑元素中的内容,所以该元素必须是可以获得到焦点的元素。布尔值类型。遵循上面说明的。
- 如果未指定是否可编辑,则由该元素的父元素决定。
(2)designMode属性:
(3)hidden属性:所以的元素都可以使用hidden属性。
- 功能:使该元素处于不可见状态。布尔值,true为不可见状态。
(4)spellcheck属性:针对input元素和textarea元素的输入框提供的新属性。
- 功能:对用户输入的文本内容进行拼写和语法检查。
(5)tabindex属性:
- 功能:用户按下Tab键,页面键的访问顺序。默认情况下,只有连接元素和表单元素,用户按Tab键才可获得焦点。
【传送门】