Html5笔记

简述

VUE和REACT是目前主流的前端框架

区别:

  • Vue适合模板搭建应用、简单易用、构建的应用体积小速度快。
  • React适合构建复杂应用程序及更大的生态圈。

    html5学习基础

  • hmtl
  • xhtml
  • css
  • css3
  • javascript
  • jquery
  • html5

    开发软件

  • IntelliJ IDEA

    基础

    声明

  • <!DCOTYPE>声明
    作用:因为html在一代代的发展中有很多的版本,通过声明来规定其html文档的版本以让浏览器能够正确解析html文档。
    Html5声明:<!DCOTYPE html>,其他类型声明…
  • 标题
  • 段落
    <p>...</p>p标签的前后会自动换新行,p标签内部段落不能原样输出,换行会被转义为空格,可用<br>标签实现标签内部换行。

html元素举例

  • 全标签与空标签(如<br/>)
  • html标签可以拥有属性为元素提供更多的信息
  • 属性以键值对形式出现
  • 常用标签属性
    a标签的href、target属性(_blank、_self……)
    img标签的width、height(px像素)、alt(当图片无法显示时会显示文本)属性
    h标签的align属性
    body标签的bgcolor属性
    通用属性
    class规定元素类名
    id规定元素id
    style规定元素样式

    html5文本格式化

    加粗文本

    斜体文本

    电脑自动输出

    这是 下标 上标

    链接

    属性:href和name。name是指文档内部链接,即可以给指定标签A增加name属性=x,然后在需要点击跳转到A标签位置的B标签里使用href=”#x”即可。
    分为文字链接和图片链接,在img里嵌套a标签即可。

    表格

    <table>定义表格,属性border=1为显示边框,数值越大边框越粗。
    <tr>定义行
    <td>定义列
    <tr>中嵌入<th>定义表头,表头文字显粗
    带标题的表格
  • 在table标签前加<p>标签
  • 在table内首行加<caption>标签,标题自动中央对齐
  • 表格内嵌列表
    指定表格单元格边距,table的cellpadding属性如=10,
    指定表格单元格间距,table的cellspacing属性如=10,
    背景颜色 table的bgcolor属性
    添加图片 table的background属性

    html列表

  • 有序列表ol,内部嵌入列表项li
    在有序列表里,属性默认为1.2.3.4 给列表标签增加type=A(A.B.C…)、a、I、i,属性start=10规定列表项从10开始
  • 无效列表ul,内部嵌入列表项li
  • 属性 属于列表标签的属性,在列表项表现出来 type=实心圆disc,空心圆circle,实心方块square
  • 嵌套列表
    在列表里的列表项里嵌入列表即可
  • 自定义列表
    dl定义列表 dt定义列表项 dd定义列表项描述:在列表项标签的后面使用,显示为列表项回车缩进列表项描述

    html块

  • 块元素特点:每次都以一个新行开始,如p标签
  • 内联元素特点:不会以新行开始,如a标签
  • div元素:属于块元素,是组合html元素的容器
  • span元素:属于内联元素,可作为文本的容器
  • 通常联用
    1
    2
    3
    <div>
    <p>text..<span>着重文本</span>text...</p>
    </div>

html布局

布局方式

  • 一、div元素布局

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
    <div id="container">
    <div id="heading">头部<div/>
    <div id="content_menu ">内容菜单<div/>
    <div id="content_body">内容主体<div/>
    <div id="footing">底部<div/>
    </div>
    </body>
  • 二、table元素布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table>
    <tr>
    <td>头部</td>
    </tr>
    <tr>
    <td>左菜单</td>
    <td>右菜单</td>
    </tr>
    <tr>
    <td>尾部</td>
    </tr>
    </table>

html表单

常用表单标签

html5框架

html框架frame
frameset标签已经过时,frame标签不可以放在body里,但可以放在frameset标签里
frame属性 src=”xxx.html”
frameset属性 cols=”10%,20%,70%” 有几个frame标签就可以设定几个,横向排放是rows=…
内联框架:主流
<iframe src="...">
属性 frameborder=”0” 去除边框 width、height、
在a标签中,target属性中 属性值=_self、_parent、_top表示在frame嵌套时,即C承载B,B承载A,…_parent会在其父框架里显示页面。

html背景

body的background属性设定背景图片,bgcolor设定背景颜色

html实体

html预留字符串必须被替换为实体。如<、>、&、

XHTML的规范化

XHTML:可扩展超文本标记语言,得到所有主流浏览器的支持,更严格更纯净的html版本
为什么使用:为了代码的完整性和良好性
文档声明:DTD:规定使用通用标记语言的网页语法
三种XHTML文档类型:STRICT(严格类型)、TRANSITION(过渡类型)、FRAMESET(框架类型)

html全局属性

contentEditable属性,可继承,true可编辑,false不可编辑
designMode属性,on页面可编辑,off页面不可编辑
hidden属性,true可见,false不可见
spellcheck属性,拼写检查,如给input指定type属性,然后再指定spellcheck属性=true,那么当input里有拼写错误时,会有红色波浪线提示
tabindex属性, 给元素指定tabindex属性=”1.2.3….”代表用户按下几次tab键对应到指定元素活动焦点。

新增的主题元素结构

article元素:可作为文章页面或者插件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<article>
<header>
<h1>
</h1>
<nav>
<ul>
<li><a href="#"></a></li>
</ul>
</nav>
</header>
<section>
<h1>
<p>...</p>
</h1>
</section>
<footer>
</footer>
</article>

作插件(类似iframe)使用:

1
2
3
4
5
<article>
<object>
<embed src="#" width="" height=""></embed>
</object>
</article>

section元素

对网页内容进行分块,通常由内容及标题两部分组成,标题一定要,要区分section和div?
section和article的区别
不要将section作为设置页面样式的容器,那时div元素的作用。
section强调分块,acticle强调整体,一个article里包含很多section,每个section包含h和p标签
一个section包含很多article,体味不同含义,不要为没有标题包含h标签的元素使用section

作用:导航,翻页

1
2
3
4
5
6
7
8
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>

aside元素

表示当前页面或者文章的附属信息部分,引用、侧边栏、广告栏、区别于主体部分的区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 包含在article内部作为文章的附属信息
<article>
<h1>
<p>...</p>
<aside>
<h1></h1>
<p></p>
</aside>
</article>
- 侧边栏导航等
<aside>
<nav>
<h2></h2>
<ul>
<li>
</li>
</ul>
</nav>

time元素与微格式

`

time的pubdate属性:true or false 或者不指定

用于article中的time元素中代表文章发布日期

header、footer、hgroup、address

header:引导和导航作用
区分两种写法:

1
2
3
4
5
6
7
<div class="header">
</div
<div class="content">
</div
<div class="footer">
</div
现在的写法<header></header><footer></footer>

完整的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
<h1>
</h1>
<a href=""></a>
<nav>
<ul>
<li>
</li>
<li>
</li>
</ul>
</nav>
</header>

footer元素

通常包含如注脚信息、作者、相关阅读链接及版权信息等
区别一下:

1
2
3
4
5
6
7
8
以前我们这样写
<div class="footer">
<ul>
<li><a href="#"></a><li>
<li><a href="#"></a><li>
<li><a href="#"></a><li>
</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
现在我们这样写
<footer>
<ul>
<li><a href="#"></a><li>
<li><a href="#"></a><li>
<li><a href="#"></a><li>
</ul>
<footer>
或者在article、section里用
<article>
<footer>
<ul>
<li><a href="#"></a><li>
<li><a href="#"></a><li>
<li><a href="#"></a><li>
</ul>
<footer>
</article>

hgroup

将标题机器子标题进行分组,通常会将h1-h6元素进行分组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
例如
<article>
<header>
<hgrpup>当存在多级标题且为同一组别的标题可以通过此标签将其合为一组
<h1></h1>
<h2></h2>
</hgroup>
<p><time datatime="2015-10-10">2015-10-10</time></p>
</header>
<div>
</div>
<footer>
</footer>
</article>

address元素和网页编排规则

address元素用来在文档中呈现联系信息,包括文档作者、电子邮箱、真正地址、电话号码等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<address>
<a href="#"></a>
</address>
例如
<footer>
<div>
<address>
<a href="#"></a>
</address>
<time datatime="2014-10-10">2014-10-10</time>
</div>
</footer>
又例如
<body>
<header>
<h1></h1>
<nav>
</nav>
</header>
<footer>
</footer>
</body>

html5网页编排结构
  • 显式编排内容区域块,网页分若干个section等区域,每个区域内加h标签
  • 隐式编排内容区域块,指不明确使用section等元素,而是根据网页需求来写各级的h
  • 标题分级,不同级别不同区域块
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <body>
    <header>
    <h1></h1>
    <nav>
    <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">帮助</a></li>
    </ul>
    </nav>
    </header>
    <article>
    <hgroup>
    <h1>文章主标题</h1>
    <h2><文章副标题/h2>
    </hgroup>
    <p>文章正文</p>
    <section>用包含div来指定section内容的样式
    <div>
    <article>
    <h1>评论主题</h1>
    <p>评论正文</p>
    </article>
    </div>
    </section>
    </article>
    <footer>
    <small>版权所有...</small>
    </footer>
    </body>

表单

form属性
formaction、method、enctype、autofocus、required、lables、

在thml5中,表单从属元素可以不写在表单内部,可以写在页面的任何地方。然后为该元素指定一个form属性,属性值为表单的id即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
原始:
<body>
<form id="testform">
<input type="text"></input>
<textarea form="testform"></textarea>
</form>
</body>
html5:
<body>
<form id="testform">
<input type="text"></input>
</form>
<textarea form="testform"></textarea>好处:在利用js向页面添加元素时候很方便,不用一定放在form内
</body>

在html4中,一个表单的所有元素只能通过表单的action属性被同一提交到另一页面,而在html5中可以为所有的提交按钮增加不同的formaction属性,使单击不同的按钮可以将表单提交到不同的页面。