HTM5新手学习的一对普通总括,相互互换和互相学习。

2、倾斜/加粗
em:浏览器会突显倾斜
strong:浏览器会彰显加粗
i:倾斜
b:加粗

</html>

4、link标签
①功能:用于为网页链接各样文件(例如:链接网页图标(title前的小logo))
②常用属性:
rel:用于声明被连续文件与当前文件的涉嫌。

–>

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="UTF-8">
5         <title></title>
6     </head>
7     <body>
8     </body>
9 </html>

<td>性别:</td>

action:表单需要交给的服务器地址
method:表单提交数据选用的措施,get/post

<li>列表第二项</li>

四、表格<table>

</td>

6.Bgcolor:背景色

* 1.写法:选择器1>选择器2>……>选择器N{}

⑦版权符号 空格
eg:© 7.空格  
⑧u:下划线
eg:

 

⑧无序列表ul (unorder list)

 

1 <small><small>我被small缩小了</small></small><br />
2 <big>我被big放大了</big>

<table width=”600px”>

<link rel="icon" type="image/x-icon" href="图标路径"/>

</td>

⑨定义描述列表
<dl>

line-height: 17px;

<a href="#top">跳转到锚点</a>

</td>

②别样页面锚链接
a.需要跳转的页面设置锚链接
b.在超链接的href属性,文件名.html#name

</td>

3.Cellpadding:单元格内边距,单元格普通话字与单元格边框之间的距离。

<p>

⑥预格式标签:<pre></pre>(一般来承载代码,格式!)
浏览器(默认呈现样式)解析时:
①来得为等宽字体
②代码中的换行,空格等元素可在浏览器中直接呈现。

 

(11)分区标签div
常配合CSS使用,为网页中的最常用的分区标签,常用来网页布局使用
eg:

<td><input type=”radio” name=”sex” value=”男”/
checked=”checked”>男

三、常见的行级标签

</table>

<cite>2.这是cite标签</cite>

(可包含1-0,2-2,02 等)

<bdo dir="ltr">4.1234567</bdo>

<td>2-3</td>

>>>常用属性值:
Content-Type
(文档类型)HTML4.01事先的文档内容编码注明
refresh
网页定时刷新
set-Cookie
设置浏览器cookie缓存

<title></title>

一、HTML文档结构

<select name=”sex” style=”color:darkgray;”>

小希很萌!!!<br />

文档讲明,在HTML文档必不可少。且务必放在文档第一行。

1 <h1>一级标题</h1>
2 <h2>一级标题</h2>
3 <h3>一级标题</h3>
4 <h4>一级标题</h4>
5 <h5>一级标题</h5>
6 <h6>一级标题</h6>    

 

 

</select>

b.相对路线(精通)

<tr>

***本章关键词:HTML头部格式;常见的块级标签;常见的行级标签;表格;表单。

what are you from?

rel=”next”即将跳转页面,是眼前文档的后一篇作品

>>> 例如:font:italic bold 75%/1.8 ‘Microsoft Yahei’,
sans-serif;

rel=”prev”即将跳转页面,是当下文档的前一篇作品

width: 200px;

 

</form>

 

图片 1

一、HTML头部格式

<td>

③code:只是表示总计机代码。可是浏览器只会来得等宽字体,不会保留代码格式,需配合pre标签使用
eg:

<div class=”div3″>

5.Align:表格的对齐形式:left/居左;center/居中;right/居右
*注意:当表格使用align属性时,相当于使表格浮动,可能会促成表格后边的要素受表格浮动影响,导致布局散乱。

text-indent: 35px;

二、常见的块级标签

<dd>描述项</dd>

rel=”prefetch”预加载,当前文档加载成功后,利用空暇网速,预加载即将跳转的页面
[职能链接]
mailto://271399000@qq.com
tencent://message/?uin=271399000

<th>第三行</th>

⑤引用<blockquote></blockquote>
阐明标签中的文字,为引用的内容,浏览器显示为段落缩紧
cite属性,注解引用的源于,一般为引用的网址URL
eg:

<input type=”reset” value=”重 置” />
        

四、表格的跨行与跨列
1.跨列:colspan,某单元格跨N列,则该单元格右侧的N-1个td就不需要了
2.跨行:rowspan,某单元格跨N列,则该单元格下边的N-1个td就不需要了

<meta name=”description” content=”这是自家在杰里教育开支的首先个网页”
/>

 

 

五、表单<form>

二、书写规范

⑩图纸组合标签figure
①<figure>标签有三个子标签;
②浏览器显示为

<img src=”img/logo.png” />

三、<tr><td><th>标签属性
>>>当表格属性,与行列属性争辨时,会以行列属性为准
>>>属性设置优先级:td>tr>table

<td>1001</td>

表格<table></table>
报表的行<tr></tr>
报表的列<td></td>
th默认加粗,且在单元格居中体现

贵美商城服务协议

5.nowrap:nowrap=”nowrap”设置单元格文字行末不换行

 

以至于字号小到最大号截至
big(放大字体):同small可以多层嵌套,直到字号最大结束

<table width=”500″ border=”1″ cellspacing=’10’ align=”left”
bgcolor=”aqua”>

①em和i都能倾斜,strong和b都能加粗,但是strong和em多了一层强调的语义。可以扶持收索引擎神速抓取网站根本,而且HTML5渴求开发者尽可能实现代码的语义化。
②em和strong都表示强调,而strong得强调品位要大于em,em和strong标签均可多成嵌套,表示强调品位的与日俱增
eg:

<td><input type=”submit”/></td>

<dt>标题</dt>

<td>2-2</td>

2.Bgcolor:背景色

<li>列表第三项</li>

2.Cellspacing:单元格与单元格之间的闲暇,当cellspacing=”0″时,
单元格之间的空隙等于0,但边框线并没有统一(边框线依然两条线的小幅)
合并边框的写法:style=”border-collapse:collapse;”使用边框合并后,无需设置cellspacing

<meta charset=”UTF-8″>

 

 

1 <ol>
2     <li>列表第一项</li>
3     <li>列表第二项</li>
4     <li>列表第三项</li>
5     <li>列表第四项</li>
6 </ol>

<td>

get和post区别:

①get传参使用URL传递,所有的参数在地方栏可见,不安全;get传参数据量有限;
②post传参使用http请求传递,相比较安全;post可以传递大量多少
③get请求的传输速率要比post快

>>>URL传参格局:链接URL地址?name1=value1&name2=value2

(地址中的“?”代表传递参数的最先)

2、input的常用属性:
①type:设置input的输入类型
②name:给input输入框起名,一般意况下,name属性必不可少,因为传递数据时,使用name=value(输入内容)的样式传递。
③value:input输入框的默认值
④placeholder:输入框的唤醒内容.当input有默认的value或者输入值时,placeholder消失。

3.input-type属性的常用属性值:
①text:文本输入框
②password:密码输入框,输入内容默认呈现小黑点
③radio:单选框
>>>使用radio/checkbox时,value属性必填,提交时,提交的为value中的默认值
>>>radio/checkbox凭借name属性,确定是不是属于同一组,name相同为同组,只好选一个
>>>使用checked=”checked”属性,设置默认选中项
④file:文件上传
>>>使用accept=”类型”,设置只好上传的文件类型,image/*任意格式图片
⑤sumbit:提交按钮,将有着表单数据,提交至后台服务器
⑥reset:重置表单数据,将表单数据复苏到默认状态
⑦image:图形提交按钮

4.属性名等于属性值的情事:
①checked=”checked”设置radio或checkBox时默认选中项
②multiple=”multiple”
设置select控件,为多选控件
③selected=”selected”设置select控件,默认选项的option选项
④readonly=”readonly”设置为textarea只读,不同意编辑。
⑤disabled=”disabled”禁止控件。
>>>当input被disabled时,该input的name和value将不可能向后台传递。
⑥hidden=”hidden”隐藏控件,等效于<input
type=”hidden”/>

5.下拉拔取控件
select
① 写法:

1 <select>
2     <option></option> //可以有N多个
3 </select>


name属性,应该写在<select>上,所有选项只有一个name
③ multiple=”multiple”
设置select控件为多选,可在界面使用Ctrl+鼠标,举办多选。一般不用。
④ option常用属性:
  value=””:当option没有value属性时,将来台传递的是<option></option>标签中的文字;
       当option有value属性时,以后台传递的是value属性的值。

  title=””:鼠标指上后呈现的文字。

  selected=”selected”:默认选中。
⑤ <optgroup
label=”山西省”></optgroup>
:用于将option标签举办分组,label属性表示分组名。

6、文本域
textarea

写法:<textarea></textarea>
② 设置宽高style=”width: 200px; height:
150px;” 自身有cols=”” rows=””五个特性,但不常用
③ readonly=”readonly”
设置为只读格局,不容许编辑。
④ style=”resize: none;”
设置为宽高不允许修改。
⑤ style=”overflow: ;”
设置当文字超出区域时,咋样处理。
>>>
也可以因而overflow-x/overflow-y分别设置水平垂直方向的彰显情势。
>>>
常用属性值:
hidden:超出区域的文字,隐藏不可能出示
scroll:无论文字多少,均会来得滚动
auto:自动,依照文字多少活动决定是否出示滚动条(默认样式)

7、表格的边框与标题

1 <form>
2     <fieldset>表格的边框
3         <legend>联系方式</legend>表格的标题
4           ……N多个表单元素(input/select/texrarea) 
5     </fieldset>
6 </form>            

注:一个边框可以有多组边框+标题

 

8、HTML5智能表单
①H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签中,即可通过表单提交
<form
id=”xx”>…</form>
<input
…form=”xx”>
②新增N六个type新属性,详见表格
新增input的属性:
Autocomplete:自动完成功用,
>>>回想从前输入过的情节,在下次输入时提示没有输入的一部分,
>>>大多数浏览器默认开启,
>>>有多少个特性值on/off(也是form的习性)
>>>可以在<form>标签上设置Autocomplete,

支配整张表单的自动完成开关。但足以在各自input上单独设置,覆盖form的完好安装
Autofocus:自动拿到要旨,Autofocus=”Autofocus”刚打开网页时,光标所在地方
Form:所属表单,通过form表单的id,指向特定表单
Required:必填。required=”required”设置必填
*Pattern:验证input的模式
Placeholder:提示

 

前天的内容就享受到此处呀~~~小女人初学HTML,还请各位园友多多指教!!! 

 

图片 2

 

 

 

 

作者:夕照希望
出处:http://www.cnblogs.com/hope666/ 

<!–[概念描述列表]

1 <blockquote cite="http://www.jredu100.com">
2 我是引用的WWW。。吼吼吼哈哈哈哈哈哈哈
3 </blockquote>

</head>

***大规模的行级标签
span(文本)、img(图片)、em(强调)、strong(强调)、q(短引用)、a(超链接)、
i(倾斜)、b(加粗)、small(缩短字体)

<tr>

b.GBK:扩充的国标码,简体普通话
c.UTF-8:万国码
Unicode码(常用)基本万分各国语言

 

 

</tr>

1 <em>我被em标签强调了!!</em><br />
2 <strong>我被strong标签强调了!!</strong><br />
3 <i>我被i标签倾斜了!!</i><br />
4 <b>我被b标签加粗了!!</b><br />

font-size:字体大小 **PX
**%(浏览器默认字体大小的比例,绝大部分默认16px)

 

<td>李四</td>

1 <pre>
2 <code>
3 3.StringBuffer sb = new StringBuffer();
4 for(String s : arr){
5 sb.append(s);
6 }
7 </code>
8 </pre>    

</tr> </table>

前言: 

 

1 X<sup>2</sup> X²    
2 <br />
3 X<sub>2</sub> X²

<td align=”right”>邮编:</td>

②cite标签:浏览器显示为倾斜,常用于书、画作、随笔的引用
eg:

<td></td>

④bdo:表示文本方向,dir=”ltr”
从左往右 dir=”rtl” 从右往左
eg:

</tr>

3.Align:设置单元格中的文字,在单元格中的水平对齐格局left/center/right

/* [CSS常用文本属性]

⑤kbd:表示需要用户用键盘输入的内容。浏览器显示为等宽字体
eg:

图片 3

style=”border-collapse:collapse;”<!–表格中两条线变成一条线–>

*http-equiv和name属性,必须与content属性配合使用。前双方只是用来讲明即将修改那个属性值,而实质上的性质内容,在content中讲述

<q cite="http://www.baidu.com">我是用q标签声明的一句话</q> 

color: blue;

1 <pre>
2 一二三四五
3      一二三四五
4 </pre>

<tr>

<s>1.这是s标签中的文字</s>

</td>

③name属性:需配合content属性使用,重要用来给收索引擎提供必需音讯
>>>写法:<mete
name=”属性值” content=”属性值常见内容”></mete>
>>>紧要属性值:
author
作者,声明网站作者,常用集团网址表示
keywords
网站关键字,六个第一字用英文逗号分隔
description
网页描述,收索引擎呈现在title下的描述内容

<!DOCTYPE html>

 

<td>2-2</td>

1 <p>这是P标签中的一个段落,这是P标签中的一个段落,这是P标签中的一个段落</p>
2 <p>这是P标签中的一个段落,这是P标签中的一个段落<br/>这是P标签中的一个段落</p>

<tr>

1、HTML的竹签分类
①块级标签:自动换行、前后隔一行
②行级标签:按行逐一展现

报表的行<tr></tr>

7.Background:背景图片,后接相对路径,当背景图和背景象同时生效时,背景图会覆盖背景象。

 

3、mete标签
①charset属性:单独使用。设置文档字符集编码格式。
>>>写法:<meta
charset=”utf-8″ >
>>>常见的字符集编码格式:
a.GB-2312:国标码,简体粤语

6、Bgcolor: 背景色

而是由于图片在外人服务器,不可控,所以不提议利用
②title:图片的题目,挡鼠标指上时彰显的唤醒文字
③alt:当图片不可以加载时,彰显的文字
④width/height:图片的小幅低度,相当于CSS中的style=”width:;height:;”
⑤align:图片周围的文字,相当于图片的排列模式,可选值:top/center/bottom
eg:

<tr>

eg:

 

7、其他标签
①<s>有误文本:删除线
eg:

 

8.Bordercolor:边框颜色

<th>第三行</th>

 

* id选择器 100

2、头部:<head></head>
Head用于表示网页的元数据:即描述网页的主干音讯。

/*【采用器优先级】

 

<body>

<img src="img/8.jpg" title="当鼠标指上时显示的提示文字" alt="当图片无法加载时,显示的文字" width="100" height="100" align="center" />

<tr>

<u>8.这是u标签</u>

<th>克罗地亚语成绩</th>

一、表格table

·当图片在当下文件一律层时:图片名 src=logo.png

a.相对路径

图片如下:

4、img
图片标签
①scr属性:表示图片引用路径;
>>>scr的周边路径的写法:

 

1 <figure>
2     <img src="img/3.jpg" />
3     <figcaption>这是图片的标题。</figcaption>
4 </figure>    

 

 

 

1、span(文本):用于包裹一部分文字,进行一定样式的改动。
eg: 

2、其他页面锚链接

1 <div style="width:100%; height:100px; background-color:red;">
2     <h1>我是div里面的标题</h1>
3     这是div里面的文字。
4 </div>

<br /><br />

2、常见的块级标签
①题目的签

<input type=”checkbox” />运动

1.Width,Height:给单个的行、列,设置宽度低度;

#table1 .col1{

 

 

唯独,在最首祚规中,small和big标签,不可能被提倡使用,提倡使用style=”font-size:11px;”CSS样式替代
eg:

</td>

 

<input type=”text” name=”city” />

5、超链接<a></a>
①href:超链接的跳转地址。可以写网络连接,或地面html文件的相对路径,确定情势同img的src路径。
②target:设置超链接打开的窗口的岗位。_self
自身页面打开(默认) _blank 新页面打开
③title:鼠标指上后显示的文字
④rel:注解即将跳转的页面,与眼前页面的关联

<br />

注:由于Google/IE的兼容问题,需在锚点中,插入一个空格 才能见效
eg:

<ul>

 

*1.写法:选择器1,选择器2,……,选择器N{}

◀当图片在当前文件下一层时,文件夹名、图片名img/abc.jpg

<tr>

行使相对路径时,图片最外层只可以放到网站根目录(图片必须要在品种文件夹中)

 

 

 

 1 <!--声明文件的编码格式-->
 2 <meta charset="utf-8" >
 3 
 4 <!--作者-->
 5 <meta name="anthor" content="http://www.CC.com"/>
 6 
 7 <!--网页关键字:多个关键字用英文逗号分隔-->
 8 <meta name="keywords" content="html5,网页,Web前端开发"/>
 9 
10 <!--网页描述:搜索网站时,title下面的解释文字。至关重要!!-->
11 <meta name="discription" content="这是我开发的第一个网页"/>
12 
13 <!--title标签:网页的标题,即网页选项卡上的文字-->
14 <title>我的第一个网页</title>

* 1、字体、字号:

◀当图片与眼前文件一律层时,图片名src=”abc.jpg”

<td>

⑥sup:上标文本
sub:下标文本
eg:

②multiple=”multiple” 设置select控件,为多选控件

图片 4

 

 

<p><span style=”color:
#F39900;”>大家在接收你的需求后,会第一时间与您收获联系。</span></p>

3、q(短引用):常用来一句话的引用,cite属性表示援引来源
浏览器解析时,会在情节的上下插入双引号
eg:

<!–水平线标签<hr
/>–>

此处选icon,注脚被连接图片是眼下网页的icon图标。
type:阐明被接连文件是何许项目,可以大概
href:申明链接文件的地方
eg:

<li>列表第一项</li>

*http-equiv和name属性,必须与content属性配合使用,前两者只是用来声称即将修改这些属性值,而实质上的属性值内容,在content中描述。

 

4.Width/Height:表格的增幅,低度

–>

small(裁减字体):small标签可以多层嵌套,表示比默认字体小一号

浏览器呈现时,标题顶格彰显,dd会缩进显示。

二、头部标签详解
1、文档注脚:<!DOCTYPE
html>
HTML5已经简化为上述样式~
只顾:文档阐明必须有!而且必须在文档页面的首先行!!!

</td>

6、锚链接
①本页面锚链接
a.设置一个锚点<a
name=”top”></a>用name属性表示锚点名称
b.在超链接的href属性中,使用#name
跳转到指定锚点地方
eg:

<td><input type=”text” name=”username01″ / value=”123″
placeholder=”请输入账号”></td>

⑨mark:高亮或标志文本
浏览器呈现为香艳背景
eg:

<!–①案例–>

1 <dl>
2     <dt>这是dl列表的标题</dt>
3     <dd>描述项1</dd>
4     <dd>描述项2</dd>
5     <dd>描述项3</dd>
6     <dd>描述项4</dd>
7 </dl>

*/

c.网络连接(精通):直接使用图片的网络地址,

图片 5

 

<input type=”radio” />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

span(文本):用于包裹一部分文字,举行一定样式的改动。

1 <ul>
2     <li>列表第一项</li>
3     <li>列表第二项</li>
4     <li>列表第三项</li>
5     <li>列表第四项</li>
6 </ul>

 

◀当图片在时下文件上一层时,../图片名src=”../computer.jpg

<!–

1 <a name="top">&nbsp;</a>
2 <a href="http://www.Baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个百度超链接</a>
3 <a href="tencent://message/?uin=2713997369" title="鼠标指上后显示的文字" target=" _self">跟我聊聊天吧</a>
4 <a href="#center" title="鼠标指上后显示的文字" target=" _self">跳&nbsp;转</a>    
5 <a href="mailto://2713997369@qq.com" title="鼠标指上后显示的文字" target=" _self">跟我发个邮件吧</a>

<tr>

4.Valign:设置单元格中的文字,在单元格中的垂直对齐模式top/center(middle)/bottom

<figcaption></figcaption>:图片的题目

<mark>9.哈哈哈哈哈</mark>

line-height: 30px;

1、六个关键性质:

<q
cite=”http:www.baidu.com”>我是被q标签注明的一句引用的话</q>

⑦有体系表ol (order list)

① 顺序必须严谨遵从上述顺序;

 

 

二、table的常用属性
1.Border:表格的边框属性;当使用border设置边框时会在有着td以及table上嵌套边框,当border加大时,唯有table最外层框线加粗,td单元格上的框线不会变卦

</table>

>>>写法:<mete
http-equiv=”属性值” content=”属性值详细内容”></mete>
eg:

1.多个根本性质:

<dd>描述项</dd>
</dl>
貌似意况下,标题dt只有一项,描述项dd可以有N多项。
浏览器展现时,标题格式会呈现,彰显缩进。
eg:

<table>

 

案例图:

***HTML4.01事先的文档注解:
<!DOCTYPE html
PUBLIC “-//W3C//DTD HTML
4.01//EN””http://www.w3.org/TR/html4/strict.dtd"&gt;

要素内容:

5.请输入“<kbd>Esc</kbd>”退出系统。

UTF-8:万国码 Unicode码 基本分外各国语言

②http-equiv属性:将大家的音信写给浏览器看,让浏览器遵照这中间的要求进行
内需般配content属性使用,重要注脚浏览器怎么样分解译文。
(http-equiv属性只是表明需要设置哪一部分,具体的装置情节,放到content属性中)

斜体 加粗 字号/行高 字体族(微软雅黑,非衬线字体族)

②水平线<hr/>
③段落<p><p/>
④换行<br
/>
eg:

 

   
今日来和我们分享一下以来友好收拾的HTML笔记,希望会对你的学习抱有帮忙!

 

 

</tr>

<img src=”../1_HTML基本标签/img/icon.png” />

  1. span(文本)
  2. img(图片)
  3. em(强调)
  4. strong(强调)
  5. q(短引用)
  6. a(超链接)
  7. i(倾斜)
  8. b(加粗)
  9. small(收缩字体)

width: 13px;

题目的签<h1></h1>……<h6></h6>

 

 

<td>110分</td>

<p>what are you from?</p>

width: 250px;

<input type=”submit” name=”submit” value=”提交+” style=”color:
white;height: 37px;width: 110px; border:hidden;”>

</div>

<td>电子邮箱:</td>

<input type=”text” name=”name” />

</body>

<td>

<td>1-1</td>

>>>
典型应用,调整控件普通话垂直居中的情势:控件的height=控件的line-height

</tr>

#table1 .checkbox{

</td>

CSS常用文本属性

text-align: right;

 

</div>

声明文档类型为HTML5文本

<td>2-1</td>

 

②在超链接的href属性,文件名.html#name

图片如下:

<!DOCTYPE html>

<li>列表第二项</li>

</textarea>

<!–

 

[效用性链接]

<tr>

<tr>

 

 

<td>

</td>

 

selected=”selected”:默认选中。

Form:所属表单 通过form表单的id,指向特定表单。

>>>常见的国语编码格式:

<td>1-1</td>

<!–[表格table]

<td></td>

<tr>

CSS样式表(一)

 

big(放大字体):同small可以多层嵌套,直到字号最大停止。

<td>1-3</td>

<table width=”500″ border=”1″>

<td>2-2</td>

②post传参使用http请求传递,相比较安全;post可以传递大量数据;

<li>付款到贵美</li>

③ Align:设置单元格中的文字,在单元格中的水平对其艺术 left/ceter/right

</tr>

<meta charset=”UTF-8″>

</tr>

④ style=”resize: none;” 设置为宽高不容许修改。

<body>

<td colspan=”4″ align=”center”>

</tr>

}

<td></td>

</td>

 

<strong>我被strong标签强调了!!! </strong><br />

<tr>

<td></td>

<br /><br />

<input type=”checkbox” />聊天

 

<hr />

<li>付款给合作社</li>

<li>商品分类1</li>

 

 

<td>1-2</td>

strong(强调):浏览器会展现为加粗

<table>

  1. HTML标签
  2. 标签式是HTML最基本单位和最重大的三结合。
  3. 使<和>扩起来
  4. 标签都是密闭的(规范)
  5. HTML标签属性
  6. 是标签的一有些,用于包含额外的信息。
  7. 可以有多少个特性
  8. 属性和属性值成对出现
  9. 语法
  10. HTML文档注释
  11. <!– 这是HTML注释–>

</table>

</head>

 

 

 

</tr>

}

[斯特朗(Strong)/em/i/b标签的区别]

#table1 .submit{

</tr>

scroll 无杂谈字多少,均会显示滚动

<td>100分</td>

<td>2-3</td>

1、Head标签内的信息用于描述网页,即元数据

常配合CSS使用,为网页中的常用分区标签,常用于网页布局使用

–>

属性值必须引号括起来

}

font-family: “宋体”,sans-serif;

}

源代码:

<input type=”checkbox” />玩游戏

<title>表单作业</title>

color: #5A5A5A;

<li>这是列表1</li>

<i>我被i标签倾斜了。</i><br />

</form>

}

#table1 td span a{

<input type=”text” />

 

 

</tr>

<td>2-1</td>

>>> 绝大部分浏览器自动开启

<!–引用<blockquote></blockquote>

<td>

</tr>

<td>

<td>头像:</td>

①徐跳转的页面设置锚链接

 

<td>1-2</td>

</td>

<!– [img 图片标签]

</tr>

 

<td>120分</td>

 

}

>>>
使用radio时,value属性必填。提交时,提交的为value中的默认值。

….

*/

<td rowspan=”2″></td>

<td align=”right”>确认密码:</td>

* 1.不得不有字母、数字、下划线组成;

<td>

<td>

<b>我被b标签加粗了。</b><br />

 

⑤ <optgroup label=”江西省”></optgroup>
:用于将option标签举办分组,label属性表示分组名。

<tr>

 

<td>1-1</td>

<td><b>电话:</b></td>

 

 

<td width=”600px” height=”110px” align=”center” valign=”center”>

font-size: 48px;

</select>

<td>

font-weight:字体的粗细,可选属性值:bold加粗 lighter细体
100~900数值(400正常,700 bold)

</tr></table>

<head>

2、Cellspacing:单元格与单元格之间的空隙。当cellspacomg=0时,单元格之间间隙为0,但边框线并从未统一(边框线依然两条线的小幅)

<input type=”password” />

i am from china </pre>

<li>这是列表5</li>

 

 

 

<hr />

<!–网页描述–>

报表的行 <tr></tr>

<td rowspan=”3″>1-1</td>

<td class=”col1″>手机号/邮箱</td>

 

⑧.button:普通按钮,没有另外卵用。

 

① white-space: nowrap; 假诺是闽南语,需安装行末不断行

01-

<th”>第一行</th>

</tr>

</tr>

<td>

</td>

<th>语文成绩</th>

<th>第二行</th>

报表课程:

<tr>

报表的列 <td></td>

 

 

<li>双方评价</li>

*1.写法:HTML标签名{ }

4、Width/Height:表格的小幅中度

②新增N六个TYPE新属性,详见表格。

图如下:

 

<td>密码:</td>

行使title:网页的题目,即网页选项卡上的文字

 

<!DOCTYPE html>

<!DOCTYPE html>

</tr>

翻阅贵美服务协议

<table width=”500″ border=”1″ bordercolor=”red”>

<li>笔记本</li>

* 1.写法:#挑选器名{}

</table>

 

02-

</html>

图表如下:

引用<blockquote></blockquote >

我<span style=”color: red;font-size: 36px;”>爱</span>我家

水平线<hr/>

<h1><span style=”color: #F39900;”>
合作</span>意向书</h1>

<td>

<td><b>公司名称:</b></td>

<tr>

 

–>

<head>

<input type=”text” name=”name” style=”width: 420px;” />

 

</div>

</td>

</tr>

 

#ul .first{

<tr>

<!–

</td>

(常用字体族名称:衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace)

 

</tr>

 

<td>

一、超链接

 

<tr>

1、em和strong都意味着强调,而strong的
强调品位要大于em,strong和em标签均可多层嵌套,表示强调品位的与日俱增。

<!DOCTYPE html>

</form>

smll(缩小字体):smll标签可以多层嵌套,表示比默认字体小一号,直到字号小到最中号停止。

 

<td align=”right”>城市:</td>

 

<img src=”../1_HTML基本标签/img/icon.png” />

li{

*/

height: 30px;

<tr>

<tr>

<title>CSS常用文本属性</title>

登录

<td>

>>> 使用注意事项 :

*/

<li>手机</li>

</FORM>

<td colspan=”3″>

<!– [广泛的行级标签]

</html>

<td>2-3</td>

<option value=”shenfenzheng”
selected=”selected”>身份证</option>

02-

①type:设置input的输入类型

<th>第二行</th>

<a href=”#top” title=”鼠标指上后显得的文字”
target=”_self”>这么些一个锚点</a>

<tr>

<input type=”email” />

</tr></table>

<a href=””><img src=”../1_HTML基本标签/img/icon.png”
/></a>

<style type=”text/css”>

font-size: 14px;

<tr>

代码如下:

text-shadow:文本阴影,有多个属性值:

 

<li>笔记本</li>

【table的常用属性】

<tr>

<input type=”file”/>

图形如下:

}

<td>1-3</td>

<li>列表第四项</li>

 

<meta charset=”utf-8″>

/*[CSS常用文本属性]

color: red;

<!DOCTYPE html>

</tr>

* 1.写法: *{}

</ul>

*2.见效规则:满足任意一个选取器,均可生效

案例-唐诗

图片 6

</body>

#ul li{

1、内容与表现分离,内容与表现分开

<td>1-3</td>

报表的行 <tr></tr>

<blockquote
cite=”http.baidu.com”>这多少个是段子那一个是段子这些是段子这一个是段子这多少个是段子这么些是段子那么些是段子这些是段子这多少个是段子这些是段子这一个是段子

</td>

<input type=”submit” value=”注册” style=”color: white; border:
hidden;”/>

<td>2-2</td>

>>>常见路径的章程:

<h1>一流标签</h1>

>>>例如:font-family:Arial, ‘Microsoft Yahei’, sans-serif;

<input type=”text” name=”telephone” />

<html>

 

<ul>

案例操练:

<!DOCTYPE html>

<td rowspan=”2″></td>

<tr>

</tr>

①get传参数使用URL传递,所有参数在地方栏可见,不安全,get传参数据量有限;

<td></td>

}

<td></td>

i(倾斜)

* 十六进制:#ffffff

#first{

我<span style=”color: red;font-size: 36px;”>爱</span>我家

</tr></table>

#login .div2{

}

</body>

<th>第一行</th>

<small>我被small缩小了</small><br />

 

<input type=”text” />

课后操练复习。

 

<td>张三</td>

<td>

<title>贵美商城注册页</title>

 

color:字体颜色

<!–[图片组合标签figure]

代码如下:

Required:必填 Required=Required 设置input为必填

<meta charset=”UTF-8″>

代码如下:

<td align=”right”>性别:</td>

}

</table>

<tr>

<p>第三首:长恨歌</p>

/*【拔取器命名规范】

图片如下:

height: 200px;

</tr>

</tr>

浏览器解析时,会在内容的光景插入双引号

<strong>我被strong标签强调了!!! </strong><br />

method:表单提交数据运用的法子:get/post

<th>第二行</th>

</td>

letter-spacing:字符间距,字与字之内的间隔

② 四个样式之间用空格分割,而且font-size/line-height 必须作为一对用/分割

 

i(倾斜)

text-indent:首行缩进,可用像素值调整缩进大小

④ Valign:设置单元格中的文字,在单元格中的水平对其艺术 top/centr/bottom

<td>2-2</td>

<body>

–>

</td>

div li{

<th>第一行</th>

<td></td>

 

>>>重要属性值: author 作者,注脚网站作者,常用集团网址表示

<tr>

<title></title>

案例练习:

color: #FFFFFF;

 

<tr>

<h3>注册</h3>

<li>确认收货</li>

<td rowspan=”2″></td>

<td>2-2</td>

>>>
radio凭借name属性,确定是不是属于同一组,那么同样为同组,智能选一个。

图如下:

③value:input输入框的默认值

<tr>

<td>

</tr>

① 相对路径:

<td><input type=”password” name=”password01″
placeholder=”请输入密码”/></td>

<input type=”radio” />

 

 

<p>李十二,字太白,号李白,自称与李堂皇室同宗,祖籍陇西成纪(今海南广安附近),生于中亚碎叶。据野史记载,幼时随父迁居绵州昌隆(今黑龙江江油)青莲乡……</p>

【注意】當表格使用align屬性石,相當于使表格浮動,可能會導致表格前边的要素受表格浮動印象,导致布局散乱。

Autocomplete:自动完效能用.回忆以前输入国的始末,在下次输入时,按照在此以前的情节提醒,自动完成。

<h2>目录</h2>

<a name=”top”> </a>

<html>

<td></td>

<td>150分</td>

<!–[表格table]

<tr>

<dt>标题</dt>

①.text:文本输入框

}

<title></title>

<tr>

width: 70px;

* */

图片组合标签(块级)

</tr>

图片 7

图表如下:

<tr>

</tr>

 

* 2.生模仿则:选拔器2必须是挑选器1的一向子代

挥洒规范:

 

}

①水平阴影距离 必选,数值越大,阴影右移

</style>

标签名和属性名必须小写

<h3>购物流程</h3>

分区标签(块级)

Background:
背景图片,后接相对路径。当背景图和背景观同时生效时,背景图覆盖背景观

图片 8

</tr>

<head>

2、em和i都能切斜,斯特朗(Strong)(Strong)和b都能加粗。可是斯特朗(Strong)和em多了一层强调的语义。可以扶持查找引擎飞快抓取网络根本。而且HTML5要求开发者,尽可能地促成代码的语义化。

* 2.当效果于一致层时:可由权重总结

<table>

<td>1-1</td>

 

 

 

这是div里面的文字

<th>第三行</th>

width: 43px;

<td>

<li>商品归类3</li>

 

</td>

<td>1-2</td>

②在朝链接的href属性中,使用#name 跳转到制定的锚点地方:

本人接受赶集网的<a href=”#”>用户协商</a>和<a
href=”#”>用户协议</a>

 

<html>

③ multiple=”multiple”
设置select控件为多选,可在界面使用Ctrl+鼠标,举行多选。一般不用。

图片 9

<title></title>

 

新内容:

<a href=”#top”>跳转到锚点

</tr>

④黑影颜色 可选,默认为粉粉色

<td rowspan=”3″></td>

<tr>

</style>

</td>

 

<td>

 

</td>

</html>

<tr>

>>>写法:<meta charset=”utf8″>

<small><small>我被small缩小了</small></small><br
/>

</tr></table>

</html>

</td>

<dl>

<!–

 

 

<tr>

}

 

⑦.image:图形提交按钮。跟submit一样享有提交功用。

<h3>【李拾遗简介】</h3>

</td>

#table1 td span{

<tr>

font-size: 58px;

这是div里面的文字!

<tr>

<tr>

<b>我被b标签加粗了。</b><br />

<td rowspan=”9″>

<tr>

报表的列 <td></td>

th 默认加粗,且在单元格居中显得

<!–[HTML的竹签分类]

<th>学号</th>

</td>

<legend>联系情势</legend>表格标题

图片 10

</html>

<td class=”col1″>密码</td>

② 相对路径:写法file:///E:/aaa。png 可是严禁利用

<table>

</html>

<th>第一行</th>

<th>第三行</th>

<form action=”” method=”get”>

<hr />

报表的列<td></td>

<th>第三行</th>

图如下:

>>> 常用属性值:hidden 超出区域的文字,隐藏不能彰显

<li class=”list” id=”first”>这是列表3</li>

</div>

<body>

<td>2-1</td>

 

width: 200px;

rel:用于标明被连续文件与眼前文件的关系。此处选icon,声明被链接图片
是现阶段网页的icon图标

1、块级标签:自动换行,前后隔一行。

<td><input type=”checkbox” name=”爱好” value=”女”/
checked=”checked”>女

/**/

</td>

 

<input type=”checkbox” name=”1″ value=”软件服务”>软件服务

* 3.优先级:最低

图片 11

(是否自动换行使大家看清块级标签的关键目的)

<h3>产品体系</h3>

 

<td rowspan=”3″></td>

–>

</td>

}

</tr>

预格式:在浏览器解析式,会依据等宽字体显示,并且保留标签内的空格和回车。常用于保留代码格式。

图形如下:

图片 12

</head>

background-image: url(../2_CSS基础语法/img/icon1.gif);

⑤ Nowrap:nowrap=nowrap 设置单元格文字行末不断行。

③ 新增input的属性:

<input type=”text” name=”phone” style=”width: 420px;” />

 

图片 13

<td>

3、Cellpadding:段远隔内编剧,段远隔闽南语字与单元格边框之间的离开

 

<td>喜欢的城市:</td>

<tr>

background-position: 0px -50px;

题目的签<1><2><3><4><5><6>:默认加粗,H1最大,H6最小

<tr>

<!– 【表格table】

<td align=”right”>真实姓名:</td>

<dt>联想电脑</dt>

<td>1-3</td>

<em>我被em标签强调了!!!!!</em><br />

<a href=aaaa.html#其次节锚点>

图片 14

<input type=”password” name=”password” />

<!–段落<p></p>–> <!–换行<br/>–>

</body>

</tr>

*/

<div class=”div”>

<html>

<title></title>

auto 自动,依据文字多少活动决定是否出示滚动条(默认样式)

<input type=”text” name=”dizhi” style=”width: 460px;” />

</td>

</tr>

 

</body>

</td>

<td align=”right”>国家:</td>

* text-stroke: -webkit-text-stroke: 0.2px #008000;
描边的粗细,描边的颜料

 

W3C= word wide web consortium-万维网联盟

段落<p></p>

*/

<option>青岛</option>

<figcaption>折是图形的标题</figcaption>

<td>2-1</td>

<form>

 

<td colspan=”2″>PHP</td>

注:由于Google/ie的兼容问题,需要在锚点中,插入一个空格  才能奏效:

<!– [广大的块级标签]

</div>

图片 15

<img
src=”https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=3225200470,3369676538&fm=73

<td rowspan=”6″ background=”../img/f5_banner.png”></td>

* 4.ID接纳器是唯一的!同一页面严禁出现同名ID!!!

 

 

</tr>

action:表单需要交给的服务器地址

<td>1-2</td>

<td></td>

<hr />

<td>1-3</td>

<!–

<!–预格式<pre></pre>

text-decoration: none;

</td>

 

<input type=”checkbox” name=”1″ value=”移动支付”>移动支付

<!– [报表的跨行与跨列]

 

 

width: 30px;

line-height: 25px;

 

>>>【重点】让每行多余文字显示省略号:

  1. span(文本)
  2. img(图片)
  3. em(强调)
  4. strong(强调)
  5. q(短引用)
  6. a(超链接)
  7. i(倾斜)
  8. b(加粗)
  9. small(裁减字体)

<td>2-1</td>

.qq{

标签必须科学嵌套

图片 16

/*[颜色常用单位]

#table1 td a{

<!–网页关键字–>

<td></td>

<option>济南</option>

<td>王五</td>

mailto://jianghao@jerei.com 发邮箱

<tr>

</tr>

<li class=”list” id=”first”>这是列表3</li>

2、行级标签:按行逐一呈现。

 

<th>姓名</th>

<meta charset=”UTF-8″>

①设置一个锚点:<a name=”top”></a>用name属性表示锚点名称

 

<meta charset=”UTF-8″>

<dd>列表第四项</dd>

<h2>顶尖标签</h2>

<style type=”text/css”>

<td>

<li>那是列表1</li>

 

<meta charset=”UTF-8″>

</table>

<option value=”女”>女</option>

b(加粗)

</tr>

<td>

</td>

 

* 3.优先级:当效能于同一层时,class选拔器>标签采用器

.list{

font-style:字体样式,正常(normal) 斜体(italic)

报表的表头列 <th></th>
(将tr中的td,替换为th,表示本行的表头)

</tr>

<li class=”list”>这是列表2</li>

5、【下拉精选控件 select】

<td></td>

<td align=”right”>证件类型:</td>

 

<title>Css常用选用器</title>

<option value=”男” selected=”selected”;”>男</option>

 

</tr>

font-family:字体族,设置字体。

–>

 

Autofocus:自动获取核心 Autofocus=Autofocus

<tr>

当表格属性与行列属性争论时以行列属性为主

<input type=”password” name=”password” />

 

<td><input type=”radio” name=”sex” value=”女”/
checked=”checked”>女

<td>2-3</td>

购物车

<tr>

height: 25px;

</head>

          第二天的学习

使用link :

<td>120分</td>

<span>已有账号,<a href=”#”>直接登录</a></span>

<tr>

b(加粗)

/*【标签采用器】

<li>列表第四项</li>

</tr>

 

<img src=”../1_HTML基本标签/img/icon.png” />

</div>

<!–[无序列表ul unorder list]–>

<td>

<td>1-2</td>

</style>

<li>这是列表5</li>

                       ———————–end
(爱念书的小伙儿)

换行<br/>

word-break:
浏览器默认在空格处断行,当一个单词长度超出范围时,会不断行呈现,
break-all 允许在单词内换行。

<th>第一行</th>

图片 17

 

</tr>

}

</tr>

<tr>

图片 18

2、常用属性:

<td>

<div style=”width: 100%;height: 100px;”>

</tr>

<div>

</tr>

</td>

<ul></ul>

<style type=”text/css”>

</dl>

<!–

</figure>

<li>家电</li>

/* *【子代选取器】

</tr>

<li class=”qq”>这是列表4</li>

<head>

<input type=”reset” value=”重置” />

<td>

<tr>

<td>1-2</td>

</html>

</head>

* 2.立竿见影规则:必须同时班组所有选拔器才生效

font-size: 36px;

<td>2-2</td>

</tr>

</body>

 

<!–[form表单]

<!DOCTYPE html>

 

<td>2-3</td></tr>

…..N多少个表单元素(input/select/textarea)

      第一天

<tr>

        第三天

二、行级标签

<td>2-3</td>

</tr></table>

 

<td>1-3</td>

</head>

* RPG颜色:(255,255,255)

</body>

<ol>

*/

而是,get请求的传输速率要比post快。

<li>确认购买信息</li>

<td>1-3</td>

(明白)font缩写形式:font-style font-variant font-weight font-size
line-height font-family

* class选择器 10

<h3>静夜思</h3>

<html>

<head>

–>

2、http-equiv属性:需配合content属性使用。重要表明浏览器怎样解释编译文件

line-height: 30px;

<td>

–>

<tr>

 

图片 19

<td>性别</td>

 

<!–

 

 

 

#table1 td input{

</body>

background-image: url(../2_CSS基础语法/img/icon.gif);

<hr />

</dl>

<td>1-1</td>

<fieldset>表格的边框

</tr>

<th>第二行</th>

background-repeat: no-repeat;

white-space: nowrap; 设置粤语行末不断行展现

 

5、Align:
设置表格在父容其中的对齐模式;left/居左 center/居中 right/居右

text-decoration:文本修饰
下划线underline、删除线line-through、上写道overline、none

*/

 

貌似景色下,标题dt只有一项。描述项dd能够有N多项。

<option selected=”selected”>[请选择]</option>

i am from china </p>

3、name属性:需配合content属性使用。重要用于给寻找引擎提供必要信息。

}*/

③影子模糊距离 可选,数值越大,阴影越模糊。默认为0,不模糊

* 行级样式表stle=”” 1000

<p>第一首:静夜思</p>

</body>

#table1 td{

图片如下:

<select name=”city”>

</select>

</tr>

 

图表如下:

<title>表格table</title>

<option value=”xueshengzheng”>学生证</option>

三、表格table

<html>

</tr>

<li>商品归类2</li>

height: 35px;

q(短引用):常用于一句话的引用,cite属性表示援引来源

2cite属性,注解引用的源于,一般为引用的网址URL

<ol>

图表如下:

 

表格 <table>

<input type=”password” placeholder=”6-20位字母数字下划线” />

(可包含1-0,2-2,02 等)

<input type=”text” name=”phone” />

<tr>

表格 <table>

<tr>

<li class=”first”>商品分类</li>

<a href=”http://www.baidu.com” title=”鼠标指上后突显的文字”
target=”_blank”>这是一个超链接</a>

 

 

 

* 2.效益:采用页面的具有HTML标签

<tr>

}

<tr>

③selected=”selected” 设置select控件,默认选中的option选项

</table>

<tr>

<form action=”” method=”get”>

<td>1-1</td>

</tr>

<p>这些是段子这些是段子那多少个是段子这些是段子这个是段子那些是段子这一个是段子那个是段子这多少个是段子这一个是段子这一个是段子

</tr>

<html>

</td>

<p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>

<input type=”submit” value=”立即登记” class=”submit” />

width: 30px;

color: #FF6800;

2、字体颜色:

 

<html>

</ul>

<td>用户名:</td>

 

</td>

一、HTML–网页的源码(超文本标签语言)

<td>

03-

<td>

报表的表头列 <th></th>
(将tr中的td,替换为th,表示本行的表头)

</td>

2、标签分类

<meta charset=”UTF-8″>

<h4>顶级标签</h4>

<td>1-2</td>

<input type=”checkbox” name=”1″ value=”数字化展馆”>数字化展馆

</tr>

列表训练:

<td>

<td colspan=”9″ align=”center”>杰里(杰瑞(Jerry))教育</td>

<h6>一流标签</h6>

<td>2-2</td>

<pre>

<!–

GB-2312:国标码,简体中文

</td>

*1.写法:选择器1 选择器2 …… 选择器N {}

</table>

<q
cite=”http:www.baidu.com”>我是被q标签表明的一句引用的话</q>

<td>2-3</td>

2、内容的语义化

color: #6DBD24;

<td></td>

<td>

title=””:鼠标指上后展现的文字。

/*#login .div1{

height: 25px;

<tr>

background-position: -42px 0px;

 

<input type=”text” name=”haoma” />

<td><input type=”text” name=”youbian” /></td>

<tr>

<td>120分</td>

 

* 1.邻近原则:近者优先。

 

<hr />

height: 13px;

 

<tr>

 

<td>2-1</td>

</div>

特性设置优先级:td>tr>table

<!DOCTYPE html>

图表如下:

图如下:

<style type=”text/css”>

</tr>

图片 20

<big>我被big放大了</big> <br />

第三天

 

<meta charset=”UTF-8″>

 

 

④placeholder:输入框的提示内容。当input有默认的value或者输入值时,placehoder消失。

<input type=”checkbox” class=”checkbox” />

<img src=”../1_HTML基本标签/img/icon.png” />

<th>第三行</th>

 

em(强调):浏览器会显示为倾斜

}

 

line-height: 30px;

图片 21

<head>

</tr>

<table width=”500″ border=”1″ style=”border-collapse: collapse; ”
background=”../img/15062610214111_0.jpg” >

<hr /><br /> <br /> <br /> <br /> <br
/>

/*【后代选拔器】

 

<td align=”right”>手机号码:</td>

2、em和i都能切斜,斯特朗(Strong)(Strong)和b都能加粗。不过斯特朗(Strong)和em多了一层强调的语义。可以扶持寻找引擎连忙抓取网络根本。而且HTML5渴求开发者,尽可能地落实代码的语义化。

 

1、Border:
表格的边框属性;当使用border=’1’设置边框时,会具备的td以及table上嵌套边框,当border加大时,只有table最外层框线加粗,td单元格上的框线不会变卦。

<dd>列表第三项</dd>

<td align=”right”>出生日期:</td>

* 1.写法:选择器1选择器2……选择器N{}

<tr>

>>>三个字体样式间用逗号分隔,浏览器解析时,会从左往右依次解析,接纳可用字体。

② name属性,应该写在<select>上,所有选项只有一个 name

GBK:扩充的国际码,简体中文

②.password:密码输入框,输入内容默认突显小黑点。

图表如下:

<body>

<meta charset=”UTF-8″>

 

<h1>这是div里面的标题</h1>

height: 20px;

<!–

<table id=”table1″ cellspacing=”10″ >

/*【交集采纳器】

<td align=”right”>联系地址:</td>

<p> i am from china </p>

<head>

·当图片在目前文件前一层时:../img/logo.png

</td>

 

 

<img src=”logo.png” />

<td>

[tr td 属性标签]

<body>

#login .div3{

smll(缩短字体):smll标签能够多层嵌套,表示比默认字体小一号,直到字号小到最中号截至。

<td>爱好:</td>

<input type=”text” name=”day” />

height: 40px;

<tr>

② 设置宽高style=”width: 200px; height: 150px;” 自身有cols=””
rows=””六个属性,但不常用

开头<!DOCTYPE
html>

</tr>

 

href:讲明连接文件的地方

</td>

2、浏览器突显为:图片与标题上线排列,且完全向后缩进一个单位。

 

* 2.发端不可以使数字。

<td>1003</td>

</body>

<th>第二行</th>

3.target:设置超链接打开窗口的职务。-slef 自身页面打开(默认)
-blank新页面打开、

 

strong(强调):浏览器会展现为加粗

<img src=”img/logo.png” />

description 网页描述,搜索引擎展现在title下的叙说内容

</head>

<td>

</tr>

① 写法:<textarea></textarea>

<td align=”right”>证件号码:</td>

</select>

text-align: center;

<br />

<td>1-1</td>

<p>这一个是段子这一个是段子这多少个是段子这多少个是段子这些是段子这些是段子这一个是段子那多少个是段子那多少个是段子那多少个是段子那多少个是段子

*2.效用:选中所有对应的HTML标签,并修改其样式

<input type=”checkbox” name=”1″ value=”多媒体互动”>多媒体互动

</head>

 

② overflow: hidden; 设置控件超出范围隐藏

2.title:鼠标指上后展现的文字

<tr>

<th>第三行</th>

 

<tr>

</td>

<dl>

</ol>

background-position: 0px -30px ;

1、本页面锚链接

.div{

<head>

<input type=”password” />

 

<span>使用任何措施登录:</span>

 

–>

</ul>

<td>2-3</td>

 

<th>第三行</th>

<hr />

</html>

 

 

图片 22

*/

⑤.submit: 提交按钮。将享有表单数据,提交至后台服务器

<tr>

#login div{

 

·当图片在时下文件下一层时:文件夹名/图片名 img/logo.png

font-size: 12px;

<td>1-2</td>

<hr />

3、行距、对齐等:

<dt>这是dl列表的题目</dt>

 

Bordercolor: 边框颜色

>>>

/*【并集接纳器】

</ol>

<body>

</tr>

/*CSS语法必须卸载<style>标签中*/

–>

 

浏览器解析时,会在情节的光景插入双引号

<td>用户名</td>

–>

 

–>

<input type=”text” placeholder=”用户名(必填)” />

<br />

03-

<!–③案例–>

–>

<input type=”text” name=”username” />

</tr>

 

【meta标签】

</head>

</td>

–>

<tr>

<div class=”div2″>

</tr>

<th colspan=”2″>第一行</th>

表格<table></table>

–>

 

<input type=”checkbox” name=”1″ value=”电子商务”>电子商务

Pattern:验证input的模式

<li>这是列表4</li>

<body>

</form>

<a href=”02广阔的块级标签.html# ”
target=”_blank”>转到第二个图</a>

 

</td>

</tr></table>

<th>第二行</th>

案例磨炼:

 

⑥.reset:重置表单数据按钮。将表单数据復苏到默认状态。

>>>一般后边使用具体字体名称,最终一个行使字体族类名称。

big(放大字体):同small可以多层嵌套,直到字号最大截止。


网络路径:直接动用图片的网络地址,可是由于图片在旁人服务器,不可控。(所以不提议采纳)

<dd>列表第一项</dd>

/*CSS注释*/

 

background-position:0px -80px ;

>>>URL传参的花样:链接URL地址?name1=value1&name2=value2

<td>1-1</td>

span(文本):用于包裹一部分文字,举行一定样式的改动。

<input type=”submit” value=”同意左边服务协议,提交登记音信”
disabled=”disabled” />

</td>

<td>

 

 

</tr>

1标志标签中的文字,为因用户的内容。浏览器显示为段落缩进

<tr>

</head>

<meta name=”author” content=”http://www.jredu100.com” />

 

<i>我被i标签倾斜了。</i><br />

只是,在风行正规中,small和big标签,不被倜傥使用。提倡使用style=”font-size:11px;”CSS样式替代。

Placeholder:提示

<!–

<!–[超链接a]

<td>

<meta charset=”UTF-8″>

opacity:透明度,0~1之间的数字。
调整时控件以及子控件均会透明,而利用rgba调整时,只会时本控件透明,子控件不会时有爆发透明度变化。

HTML标签必须关闭

←㊣→

图片如下:

 

text-indent: 0px;

<tr>

tencent://message/?uin=2831705549 与QQ聊天

② bgcolor:背景色

–>

③.radio:单选项

<li>列表第一项</li>

②name:给input输入框起名。一般情况下,name属性必不可少。因为,传递数据时,使用那么=value(输入内容)的款型传递

 

>>>可以在<form>标签设置Autocomplete,控制整张表单的自动完成开关。但足以在分级input上独立设置,覆盖form的全部安装。

</tr>

1.href:超链接的跳转地址。可以写网络连接,或当地html文件的相对路径,确定情势同img的src路径

width: 200px;

<tr>

</td>

<tr>

1、功效:用于为网页连接各样文件。

font-size: 52px;

<tr>

<input type=”text” name=”com name” style=”width: 420px;” />

<th>第二行</th>

(可包含1-0,2-2,02 等)

* 2.调用:在急需修改样式的HTML标签上,使用id=”接纳器名”

<h1>唐诗三百首</h1>

text-align:块级元素中文字的水平对齐格局 left center right

 

font-size: 12px;

>>> 使用src属性,选用图片路径

–>

<table>

<figure>

<!–HTML注释–>

–>

</tr>

<tr>

<input type=”text” placeholder=”请输动手机号或邮箱” />

</fieldset>

what are you from?

这多少个是段子这些是段子那一个是段子这多少个是段子那么些是段子这多少个是段子这多少个是段子这一个是段落</p>

<dd>价格:4999元</dd>

<td>120分</td>

 

<!–作者–>

<h3>

<td colspan=”3″>HTML5</td>

line-height:行高 ① 像素单位 48px ② 不带px 正常行高的翻番 ③百分数 同2

<td>

</table>

</dl>

<td align=”right”>联系号码:</td>

<td>

<tr>

<td><input type=”button” value=”我就是看看”/></td>

 

01-

</tr>

</ul>

[get与post的区别]

type:表明被连续文件时咋样类型。可以省略。

>>> 使用accept=”类型”,设置智能上传的文件类型, imge/*
任一格式图片

<td>1002</td>

<dd>所在地:北京</dd>

1、charset属性:单独行使。设置文档字符集编码格式。

 

<!–[HTML5智能表单]

<td>1-3</td>

</td>

</form>

③ readonly=”readonly” 设置为只读形式,不同意编辑。

<tr>

6、 【文本域 textarea】

<table width=”500″ border=”1″ cellspacing=’10’ >

 

 

①checked=”checked”属性,设置默radio或checkbox认选中项

 

<br />

* 1.写法: .采纳器名字{}

如图:

 

<!–[分区标签div]

</tr>

[斯特朗(Strong)(Strong)/em/i/b标签的分别]

<th>第一行</th>

 

</tr>

font-style: italic;

–>

<table>

 

图形如下:

font-weight: 600;

<tr>

<head>

<dd>列表第二项</dd>

 

</tr>

<img src=”../img/logo.png” />

<td colspan=”3″>java</td>

 

②垂直阴影距离 必选,数值越大,阴影下移

height: 25px;*/

<big>我被big放大了</big> <br />

* 2.调用:在急需修改样式的HTML标签上,使用class=”选拔器名”

 

</tr>

<br />

<p>作者:李白</p>

<!–[有体系表ol order list]–>

<td class=”col1″>真实姓名</td>

background: brown;

<img src>””>:一幅图片,表示图片的路线。

<tr>

帮忙中央

<textarea style=”width: 300px; height: 300px; resize: none;
overflow-y: scroll;” readonly=”readonly”>

<html>

①H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单实行付出。

 

<form>

 

>>> 使用checked=’checked’属性,设置默认选中项

<body>

<h3>一流标签</h3>

height: 20px;

<td>2-3</td>

<div>

<td>1-2</td>

<td align=”right”>密 码:</td>

<meta name=”keywords” content=”html5,网页,Web前端开发” />

本条是段子这些是段子那些是段子那多少个是段子这多少个是段子这么些是段子这些是段子这个是段落</blockquote>

keywords 网站关键字,多个重点字,用英文逗号分隔

预格式<pre></pre>

 

<td align=”right”>用户名:</td>

<p>第二首:忆江南</p>

<!– [大面积的行级标签]

<tr>

background: #BCBCBC;

 

</tr></table>

</div>

</style>

<!–<br/>–>

/*height: 40px;*/

<table width=”500″ border=”1″ cellspacing=’10’ bgcolor=”aqua”
style=”border-collapse: collapse;

color: #5CC4EE;

 

<pre> ↖↑↗

 

</td>

list-style: none;

<tr>

/*【ID选择器】

</tr>

<td></td>

4.属性名等于属性值的场所:

refresh 网页刷新 set-Cookie设置浏览器cookie缓存

<select name=”zheng”>

<input type=”text” name=”country” />

–>

<html>

<th>第一行</th>

<ul id=”ul”>

<li>列表第三项</li>

④ option 常用属性:

<td>

overflow:控制超出范围文本的展现形式(auto
遵照文字多少活动突显滚动条,scroll始终显示滚动条, hidden
超出范围文本隐藏) 可以经过overflow-x overflow-y分别安装水平垂直方向

</tr>

报表的表头列<th></th> (将tr中的td,替换为th,表示本作为表头)

3.input-type属性的常用属性值:

 

<td>123分</td>

</tr>

<td align=”right”>E-mail:</td>

<tr>

border: hidden;

–>

</html>

}

 

<td><input type=”reset”/></td>

① Width、Height:给单个的行、列,设置宽度低度;

<tr>

<td>124分</td>

<td>1-3</td>

图片 23

<td><input type=”checkbox” name=”爱好” value=”男”/>男

/*【类选取器】

<title>表单</title>

 

<small>我被small缩小了</small><br />

<tr>

</tr>

 

<div class=”div1″>

</tr>

<img src=”../1_HTML基本标签/img/icon.png” />

*2.见效规则:拔取器2必须是挑选器1的子孙……

<hr />

① 写法:<select>

图片 24

<tr>

>>>写法:<meta
http-equiv=”属性值”content=”属性值详细内容”>

/*【通用采纳器】

<td><b>姓名:</b></td>

 

</tr>

white-space: nowrap;

</tr>

</tr>

<td></td>

<FORM id=too>

* 颜色名称:red

这是div里面的文字!

<hr />

 

 

当option有value属性时,将来台传递的是value属性的值。

<dl>

 

<li class=”list”>这是列表2</li>

<td>

color: #818181;

 

</tr></table>

 

#ul .last{

1、em和strong都意味着强调,而strong的
强调品位要大于em,strong和em标签均可多层嵌套,表示强调品位的与日俱增。

–>

<em>我被em标签强调了!!!!!</em><br />

 

<small><small>我被small缩小了</small></small><br
/>

text-overflow:设置多余文字的呈现模式 clip裁剪掉 ellipsis省略号

<table width=”500″ border=”1″ cellspacing=’10’
style=”border-collapse: collapse;” bgcolor=”aqua” >

>>>常用属性值:Content-Type HTML4.01事先的文档内容编码内容

<h5>超级标签</h5>

–>

[锚链接]

</tr>

<p><span
style=”color:#F39900;”><big>您需要的劳务</big></span></p>

<td></td>

font-weight: bold;

 

<div class=”Q”>

</style>

<dd>产品型号: 联想IdeaPad Y450A-TFU(NBA回忆版)</dd>

}

<td></td>

 

>>>个属性:off/on

 

/*width: 30px;

color:darkorange;

<body>

* RPGA:第四位数,表示透明度。可选值0~1

<ul>

图片 25

<th>第二行</th>

 

* 权重划分:标签选取器 1

<th>第一行</th>

<li class=”last”>商品分类4</li>

<option></option> //可以有N多个

2.input的常用属性:

<head>

*/

<html>

一、表单元素

–>

>>>写法:<meta name=”属性值” content=”属性值详细内容”>

<input type=”checkbox” name=”1″ value=”网络建设”>网站建设与传播

<tr>

</td>

1、src属性:表示图片引用路径

 

<tr>

<table width=”500″ border=”1″>

1、跨列:colspan,某单元格跨N列,则该单元格左边的N-1个td就不需要了。

 

<td colspan=”4″ rowspan=”2″>Android</td>

text-align: center;

[合并边框的写法]
“style=’border-collapse:collapse;”使用边框合并后,无需设置Cellspacing

q(短引用):常用来一句话的引用,cite属性表示援引来源

 

③ text-overflow: ellipsis; 设置多余文本省略号突显

一.复习今日的课后训练

 

em(强调):浏览器会显示为倾斜

<td colspan=”2″>ios</td>

</body>

 

<td>2-2</td>

height: 30px;

<tr>

<body>

<td>爱好</td>

<td></td>

2、跨行:rowspan,某段远隔跨N行,则该单元格下面的N-1个td就不需要了。

<td></td>

<form>

}

 

</div>

<!DOCTYPE html>

</head>

<table width=”1000″ height=”600″ bordercolor=”red” border=”10″
cellspacing=”0″>

</tr>

 

</td>

value=””:当option没有value属性时,未来台传递的是<option></option>标签中的文字;

<br/>这多少个是段子这个是段子那一个是段子这多少个是段子这么些是段子这多少个是段子那多少个是段子这一个是段子这多少个是段子这么些是段落</p>

<input…form=”foo”>

<td>再一次输入密码:</td>

<head>

 

<td>

第五天

<hr />

 

 

 

<td><input type=”image”
src=”../img/f2_img1.jpg”/></td>

</head>

1、<figure></figure>标签有多个子标签

图片 26

 

–>

 

 

<style type=”text/css”>

<td>密码:</td>

<h1>商品音信</h1>

<th>数学成就</th>

.Q{

④.file:文件上传

图片 27

列表磨炼:

<img src=”../1_HTML基本标签/img/icon.png” />

↙↓↘</pre>

</h3>

>>>
也可以透过overflow-x/overflow-y分别安装水平垂直方向的展现模式。

 

图片 28

<td>2-1</td>

 

 

<div id=”login”>

–>

<!DOCTYPE html>

图片 29

 

<td>2-1</td>

<option>烟台</option>

⑤ style=”overflow: ;” 设置当文字超出区域时,如何处理。

*/

<table width=”500″ border=”1″>

而是,在风行规范中,small和big标签,不被倜傥使用。提倡使用style=”font-size:11px;”CSS样式替代。

</tr>

</html>

7.表格的边框与标题

<tr>

}

 

 

<td>

* 3.优先级:同一层时,id采取器>class选拔器

* font-variant:small-caps; 将字母转为小型大写字体。

③ font-size和font-family必须指定,其他样式不点名将采纳默认样式显示;

<table width=”600px”>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图