002 Forms - Forms - Multimedia - ary

Today's target

· Be able to use div, span tag

· Be able to understand the document declaration (! Doctype) meaning

· Be able to understand and use meta tags

· Be able to understand the meaning of the character set and character encoding

· Be able to understand the role and use of the entity

· Be able to write basic form of table tags and table properties

· Be able to write basic forms commonly used form tag

· Be able to understand the role of a form submit button and a reset button

· Be able to master the use of input, select, textarea form elements, etc.

· Be able to say more type attributes and their meanings input labels

<! DOCTYPE> tag (to know)

Reputation document type html, html specification tells the browser to resolve the current document

1. Meaning

Documents reputation for declaring a document to follow the norms, the code tells the browser to parse this page by this specification

sample graph

Foot care:

<! DOCTYPE> must be placed on the very top of the page

<! DOCTYPE> tag is not only used to declare the document type, and by this specification tells the browser to parse the code of this page

Details: http://www.w3school.com.cn/tags/tag_doctype.asp

2.html5 the doctype declaration

<!DOCTYPE html>

3.XHTML 1.0 of Strict doctype declaration: Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The HTML DTD contains all elements and attributes, but do not include illustrative and deprecated elements (such as font). Do not allow frameset (Framesets).

4.XHTML 1.0 transitional doctype declaration: Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note: A maximum use is fame html5 and transitional fame

Difference 5.XHTML and HTML

XHTML is to meet the W3C's HTML

XHTML = + HTML specification

Learn: W3C ---- World Wide Web Consortium (World Wide Web Consortium), regulate our website is this institution's

6. Change the file specification in the DW

ctrl + u to open the Preferences

sample graph

entity

Import: there is a need to do a html textbooks, for example: p label syntax is

So that the page is not visible, the browser parses the label, and now is not needed, it is necessary to replace the angle brackets into characters browser can not be resolved, and in the browser need to see the angle brackets this special symbol is the entity

Entity: replace the special character code, such as <

Space: 

<：<

>：>

HTML教材：
p标签的语法：&lt;p&gt;&lt;/p&gt;

Renderings

Learn a trick: in DW inside by an ampersand will prompt many entities

Entity schematic

form

Import: We can see the curriculum in each class learned valley above

Table 1 illustrates

Table 2 illustrates

Table 3 illustrates

This page will be used form. Application form in a website commonly used scenes usually financial websites, data for statistical, and other back office systems

1. Related Tags

Drawing instructions, table is a table of the module, there are rows, the light has okay, which have a column, the column is not called in html, called a cell, then there are many lines would comprise a table ------ - "table comprising tag line tr ---" further comprises cell td

form:<table></table>

Row:<tr></tr>

Cell:<td></td>

Each column heading:<th></th>

Table headings:<caption></caption>

Small case:

Case small icon

<!-- 表格的区域,border属性代表边框的意思 -->
<table border="1">
	<!-- 行 -->
	<tr>
    	<!-- 单元格 -->
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>令狐冲</td>
        <td>男</td>
        <td>22</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>任盈盈</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>任我行</td>
        <td>男</td>
        <td>55</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>岳不群</td>
        <td>男</td>
        <td>50</td>
    </tr>
</table>

Borders grammar table

<table border=1>
  
</table>

Note: border the property must add the label on the table, does not take effect applied to the td

2. Alignment

a) horizontal alignment

grammar:align="center/left/right"

schematic diagram

b) vertically aligned

grammar:valign="top/middle/bottom"

schematic diagram

3. The cell spacing and filling

Cell spacing (cellspacing): cells and from the cells, the default is 2 pixels

Cell padding (cellpadding): from the cells and the contents of the default is one pixel

schematic diagram

4. Merge Cells

Icon

Import: The last two cells in the last two lines of picture, you need to merge, this merger is a merger up and down, so the merger is the line. If it is about the merger that the merger of the column

The combined lines (rowspan): merge the different rows, written in the cell above the top

Merged column (colspan): to combine different column, then writing the cell to the left above

The value is a number, you need to merge several cells to write a few numbers on the line, once merged cells, you need to delete unwanted cells

Code

<table cellspacing="0" cellpading="30" border="1" width="300" height="200">
	<caption><h3>学生证</h3></caption>
    <tr>
    	<th align="center" colspan="4">深圳传值黑马程序员</th>
    </tr>
    <tr align="center">
    	<td>姓名</td>
    	<td>班级</td>
    	<td>学号</td>
    	<td rowspan="2">照片</td>
    </tr>
    <tr align="center">
    	<td>曾真光</td>
        <td>php14期</td>
        <td>007</td>
    </tr>
</table>

Note: after merger must take extra cell td deleted

Two publishing labels

The two no semantic tags

div tag: generally used for storing images, text, and other web content Screen ---- ------ used to store everything in a box

span tags: generally used to store text store text --------

They show different ways

<div>离离原上草，</div>
<div>一岁一枯荣。</div>
<span>野火烧不尽，</span>
<span>春风吹又生。</span>

Schematic layout label

Learn a trick: put these two labels to understand different contents of the container, without any semantic

Common property of the label

1.id property

id attribute is the unique identifier tag, a page can have a lot id attribute, but the value of the id attribute of each label must be unique

Learn a trick: often used in writing the dynamic effects ----- javascript

2.class class property ----

Commonly used class attribute values to the tag styling, style tags may be provided as the same class

3.name property

Set the name tag, you can have the same name

Learn a trick: usually in the form

4.style property

Settings tab style

Forms

Forms icon

Form role is to gather information entered by the user

Form: the form fields, form elements

Form field label: <form></form>placing all the form elements

Form elements:

1. Text Box

You can enter the contents of plain text input box ---- Username

<input type="text" maxlength="6">

Icon

Learn a trick: maxlength attribute can limit the maximum input length, in order to allow the server receives data entry, form elements need to add the name attribute

2. Password box

Ciphertext input password input box ----

<input type="password">

Icon

Password box and text box properties and use the same

3. single box

You can only choose one form of sex selection ----

<input type="radio" value="0">

Icon

Note: To radio button radio feature to work, you must add the name attribute, and the value of the property must be the same name , this form element must not enter the assignment: value = "value", using the default selected items checked = "checked "Attributes

Code

<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1" checked>女

schematic diagram

4. box

You can select the form of multiple choice ---- hobby

<input type="checkbox" value="0">

And use the same property with the checkbox

Sample Code

<input type="checkbox" />足球
<input type="checkbox" />排球
<input type="checkbox" checked />篮球

Renderings

5. File Upload

<input type="file">

Icon

6. drop-down menu

It is used to select provinces in the delivery address or place of origin

<select>
	<option>江苏</option>
    <option>浙江</option>
    <option>安徽</option>
</select>

Select the item using the default selected = "selected"

Icon

Learn a trick: drop-down menu can be grouped to show

Code

<select>
		<optgroup label="省份">
			<option value="1">山东省</option>
			<option value="2">河北省</option>
			<option value="3" selected>河南省</option>
		</optgroup>
		<optgroup label="行业">
			<option value="1">IT互联网</option>
			<option value="2">制造业</option>
			<option value="3" selected>零售业</option>
		</optgroup>
		<optgroup label="薪资范围">
			<option value="1">1000~3000元/月</option>
			<option value="2">3000~5000元/月</option>
			<option value="3" selected>5000~8000月</option>
		</optgroup>
	</select>

Icon

7. text field

You can enter a lot of content ---- qq message input box

<textarea></textarea>

Code

<textarea></textarea>

effect

Learn a trick: text fields can be set by the size of the two attributes, use cols width attribute, height attribute rows using

schematic diagram

8. push button

Click will not have any effect

<input type="button" value="普通按钮">

schematic diagram

9. submit button

A button to submit the form

<input type="submit">

schematic diagram

Learn a trick: Click this button to the default form's data will be submitted

10. The reset button

The input state of the reduced form button

<input type="reset">

schematic diagram

Learn a trick: Click the button input state will revert to the original form

Form fields

label:<form></form>

作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址

第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性

注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素

代码

<form>
    用户名：<input type="text" name="username" />
    密码：<input type="password" name="password" />
    <input type="submit" />
</form>

框架

框架示意图

在同一个浏览器上显示多个多个框架。在每一个框架中放了一个页面。

1.使用的标签

<frameset>：框架集，rows属性设置框架分几行显示，cols属性用来设置框架分几列显示，rows和cols尽量不要同时设置（因为不能及时辨别每个位置的页面）

<frame>：框架，src属性用来引入要显示的页面

注意：框架页面中不能有body标签，可以将body标签<noframes></noframes>标签中。noframes标签是当浏览器不支持框架的时候显示其中的内容。

案例1：

案例1图示

案例2：

案例2图示

2.框架嵌套

框架嵌套示意图

3.框架中跳转

框架中跳转示意图

4.内嵌框架

就是在页面中嵌套的框架

<iframe src="http://www.baidu.com" width="500" height="200" marginwidth="0" marginheight="0" frameborder="0"></iframe>

内嵌框架示意图

多学一招：

src：内嵌框架中存放的页面
width和height：内嵌框架的宽度和高度
marginwidth：内嵌框架中的页面距离内嵌框架的宽度
marginheight：内嵌框架中的页面距离内嵌框架的高度
frameborder：内嵌框架边框

内嵌框架属性示意图

html的发展史（了解）

PC personal computer

html5的新特点

1.语法更简单

a) 头部声明

<!doctype html>

b) 简化了字符集声明

<meta charset="utf-8">

2.语法更宽松

a) 可以省略结束符的标签

li、dt、dd、p、optgroup、option、tr、td、th

b) 可以完全省略的标签

html、head、body

3.标签语义化

增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块）

a) <header> 标记定义一个页面或一个区域的头部

b) <nav>标记定义导航链接

c) <article>标记定义一篇文章内容

d) <section>标记定义网页中一块区域

e) <aside>标记定义页面内容部分的侧边栏

f) <footer>标记定义一个页面或一个区域的底部

语义化标签图示

4.表单新增常用属性------要求掌握

required：必填

placeholder：输入内容提示

autofocus：自动获取焦点-----自动帮我们将光标点进去

<form method="post" action="http://www.baidu.com">
<!-- required 必填，必须的 -->
<!-- 自动获取焦点----自动将光标定位到表单中 -->
	<input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />
    <input type="submit" />
</form>

效果图

5.input新增type属性值

a) type="email"，文本框中只能输入email地址

示意图

b) type="date"，日期控件

示意图

c) type="time"

示意图

d) type="month"

示意图

e) type="week"

示意图

f) type="number"，唤醒数字键盘

示意图

g) type="range"，滑块

示意图

h) type="color"

示意图

多媒体标签

1.embed标签

不是h5独有，h4就有，用来播放音频和视屏

<embed src="邓紫棋-喜欢你.mp3"></embed>
<embed src="邓紫棋_喜欢你.webm"></embed>

说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、flac、AIFF、AU、MP3、MP4等等，Netscape及新版的IE 都支持。

效果图

多学一招：embed标签有属性可以控制播放状态

autostart=true/false --用来控制音频或视频文件是否在下载完之后就自动播放（IE可用）

loop=正整数/true/false --用来控制音频或视屏文件在播放结束之后是否循环播放或循环播放的次数

hidden=true/no --用来设置多媒体的控制面板是否隐藏

参考：https://www.cnblogs.com/lgx5/p/5714494.html

2.audio标签

h5专门用来播放音频的，支持的格式有MP3、OGG、WAV

<audio src="邓紫棋-喜欢你.mp3" controls autoplay="autoplay"></audio>

效果图

controls="controls"用来显示控制面板

autoplay="autoplay"用来控制自动播放

loop="loop"用来设置循环播放

多学一招：为了兼容，通常会写多个资源，第一个不能播放就播放第二个，原因是不同的浏览器支持的格式不一样，所以出现了一种兼容写法（前提是准备三种格式的视频文件）

<audio controls autoplay>
	<source src="music/music.mp3">
    <source src="music/music.ogg">
</audio>

浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取

参考：https://www.cnblogs.com/linn/p/3408515.html

3.video标签

h5专门用来播放视屏的，可以写单个，也可以写多个，支持格式有MP4、WebM、OGG

<video controls autoplay loop>
    <source src="邓紫棋_喜欢你.mkv">
    <source src="邓紫棋_喜欢你.webm">
</video>

参考：https://blog.csdn.net/keji_123/article/details/77717849

效果图

计算机的进制

计算机内部的电子元器件只有两种状态，就是通电和断点，用1和0来表示，所以计算机内部只能传输1和0，也就是所谓的二进制。

我们原来学习的是十进制，逢十进一，十进制中有十个数字。我们以此类推，二进制就是逢二进一，二进制就两个数字，0和1。

八进制、十六进制也是同样的道理。

在计算机中，我们需要用到的进制有，二进制，八进制，十进制，十六进制。

进制	包含数字
二进制	0,1
八进制	0,1,2,3,4,5,6,7
十进制	0,1,2,3,4,5,6,7,8,9
十六进制	0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

转成10进制：以进制为底，幂从右往左依次为0次方，1次方，2次方…，乘以当前当前数字在10进制中的结果，所有乘积相加

例：

1.16进制的FF转为10进制：

示意图

2.2进制的11011转为10进制

示意图

3.10进制的11转2进制-----反向取余数

示意图

网页中的颜色

1.英文单词

color:red

2.rgb三原色

color:rgb(255,0,0)

3.16进制颜色值

其实就是将三原色转换为16进制表示

255----》FF

color:#FF0000;

示意图

meta标签

1.编码

示意图

这种情况就是乱码，是因为我们输入的中文，往计算机中保存的时候，最终都要转成2进制的数据形式，也就是说有一个编码的过程，在保存文件的时候默认使用的是ANSI编码格式，浏览器显示文件中内容的时候，还需要将2进制的数据转换成文字形式显示出来，也就是说还有解码的过程，浏览器被指定为utf-8格式来解码，也就是说编码和解码不一致所造成的乱码

解决乱码示意图

保存编码图示

我们加上meta标签反而会乱码的原因，是因为meta标签可以指定浏览器解析文件的编码格式，不加meta标签反而会正常，是因为我们不指定解码格式，浏览器会自动检测编码格式，再以对应的解码方式进行解码。

字符集的核心点就是如果设置了以什么字符集进行读取，那么在保存的时候也需要设置成对应的字符集

<meta charset="utf-8">  <!--告知浏览器使用utf-8的编码格式来解析页面-->

知识小百科：

字符集

ansi：不同的国家和地区制定了不同的标准，由此产生了 GB2312、GBK、Big5、Shift_JIS 等各自的编码标准。这些使用 1 至 4 个字节来代表一个字符的各种汉字延伸编码方式，称为 ANSI 编码。在简体中文Windows操作系统中，ANSI 编码代表 GBK 编码；在日文Windows操作系统中，ANSI 编码代表 Shift_JIS 编码。不同 ANSI 编码之间互不兼容，当信息在国际间交流时，无法将属于两种语言的文字，存储在同一段 ANSI 编码的文本中。

unicode：Unicode（统一码、万国码、单一码）是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

字符编码

UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码，用在网页上可以统一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。

GB2312是一个简体中文字符集，由6763个常用汉字和682个全角的非汉字字符组成。其中汉字根据使用的频率分为两级。一级汉字3755个，二级汉字3008个。

GBK即汉字内码扩展规范，K为扩展的汉语拼音中“扩”字的声母。英文全称Chinese Internal Code Specification。GBK编码标准兼容GB2312，共收录汉字21003个、符号883个，并提供1894个造字码位，简、繁体字融于一库。

Big5 又称为大五码或五大码**，是使用繁体中文（正体中文）社区中最常用的电脑汉字字符集标准，共收录13,060个汉字。虽普及于台湾、香港与澳门等繁体中文通行区

2.给搜索引擎用

示意图

多学一招：搜索引擎上的描述，可能是<meta>标签中的description部分，也可能是页面中的一段话

其他（了解）

1.文字滚动

<html>
<head>
	<title>我的第一个页面</title>
</head>
<body>
	<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
		雷电黄色预警！<br />
		大雨黄色预警！<br />
	</marquee>
</body>
</html>

direction：方向

up:上 down：下 left：左 right：右

scrollamount:滚动速度-----------------scroll：滚动 amount：数值

width：宽度 height：高度

onmouseover：当鼠标移上去

onmouseout：当鼠标离开

stop()：停止

start()：开始

behavior：

scroll 循环滚动

alternate 来回滚动

slide 滚动一次停止

2.object标签

<object type="application/x-shockwave-flash" data="line.swf" width="500" height="500"></object>

效果图

DW设计器的使用

1.热点

热点就是带有超链接的区域

点解3中模式中的设计模式，选择图片

示意图

2.插入图片

方法1：

示意图

方法2：

示意图

3.插入换行

回车：换段

shift+回车：换行

4.添加超链接

示意图

5.插入表格

示意图

6.合并单元格

示意图

sub标签和sup标签