js333 > 计算机互联网 > 【金沙js333娱乐场】HTML5学完就去浪迹天涯的我,

原标题:【金沙js333娱乐场】HTML5学完就去浪迹天涯的我,

浏览次数:124 时间:2019-11-16

HTML的正确入门姿势——基本结构与基本标签,入门姿势基本结构

1、 常见的块级标签:

①<h1></h1>......<h6><h6>:标题标签,自动加粗,h1最大,h6最小。 ②<hr/>:水平线标签,添加一条水平线。 ③<p></p>:段落标签, ④<br/>:换行标签, ⑤<blockquote/></blockquote>:引用标签,cite属性,表明引用的来源,一般引用网址 浏览器默认首行缩进。 ⑥<pre></pre>:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、 空格等元素能在浏览器中显示。 【补充】html 文件中空格的表示: 

HTML5学完就去浪迹天涯的我...,html5浪迹天涯

初涉H5的学习,完全萌新一枚,每天虽然疲惫却真的前所未有的充实,不敢有一点懈怠,真的不想时间白白浪费。到今天为止,会了简单的表单制作,还有一点点小小的成就感,多的不说了,下面展示下我这一周的学习笔记吧!再贴上我自己做的小表单!

金沙js333娱乐场 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>打吉祥小游戏</title>
    </head>
    <body>
        <form action="_05html-表单.html" method="get">
            <table>
                <tr>
                    <td>注册手机号</td>
                    <td>
                        <input type="text" name="tel" />
                    </td>
                </tr>
                <tr>
                    <td>注册密码</td>
                    <td>
                        <input type="password" name="password" />
                    </td>
                </tr>
                <tr>
                    <td>备用邮箱</td>
                    <td>
                        <input type="text" name="mail"/>
                    </td>
                </tr>
                <tr>
                    <td>上传头像</td>
                    <td>
                        <input type="file"/>
                        
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="提交" />
                    </td>
                    
                </tr>
                <tr>
                    <td>图片点击提交→</td>
                    <td>
                        <input type="image" src="../img/icon.png" />
                    </td>
                </tr>
                <tr>
                    <td>游戏偏好</td>
                    <td>
                        <input type="checkbox" name="hobby" value="抽" />抽
                        <input type="checkbox" name="hobby" value="扇" />删
                        <input type="checkbox" name="hobby" value="捶" />捶
                        <input type="checkbox" name="hobby" value="踹" />踹
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

 

 

一.meta标签常用属性

1.charset:设置文档的字符集编码格式 HTML5中设置字符集编码:<meta charset="UTF-8">   >>>常见的字符集编码格式: a.GB-2312:国际码,简体中文 b.GBK:扩展的国标码 c.UTF-8:万国码,Unicode 2.http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行, 可选属性值:Content-Type(文档类型)refresh(网页定时刷新)set-cookie(设置浏览 器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容否, 放到content属性中) 3.name属性:使用方法同“http-equiv”,将我们的信息写给搜索引擎 常用且需要掌握的属性:author(作者) keywords(网页关键字)description(网页描述)这两个属性设置,网页必不可少 --> <!--作者--> <meta name="author"content="; <!--网页关键字,多个关键字用英文符号分割--> <meta name="keywords"content="HTML5,网页,web前端开发"/> <!--网页描述:搜索网站时,title下面的解释文字.至关重要!--> <meta name="description"content="这是我的第一个网页"> <meta charset="UTF-8"> 二.title标签:网页的标题,即网页选项卡上的文字 <title>培训第一天</title> 三.使用link标签:链接网页图标(title前的小logo) rel属性:声明连接文件的类型,此处选icon type属性:可以省略 bref属性:表示图片的路径地址 <link rel="icon" href="../img/icon.png"/> 四.常用块级标签 <h1></h1>......<h6></h6> <!--h标签:标题标签,自动加粗,h1最大,h6最小--> <hr/>:水平线标签(哪里需要放哪里就是一条水平线) <p></p>:段落标签(如果漏写结束标签,到下一个html标签结束) <br/>:换行标签(换行符,打回车只会翻译成一个空格)> <blockquote></blockquote> <!--引用标签,cite属性,表明引用的来源,一般表明引用网址,浏览器默认显示为首行缩进--> 金沙js333娱乐场 2 金沙js333娱乐场 3 <pre></pre>:预格式标签(承载代码) 浏览器默认显示样式:1,显示为等宽字体 2,代码中的换行,空格等元素可在浏览器直接显示。 补充:HTML文件中“ ;”表空格(不同浏览器对长度解析不一样) <ol></ol>:有序列表 <ul></ul>:无序列表(网页布局很重要) 其中,<li></li>列表项都可以有N多项 <dl></dl>:定义描述列表:<dl></dl> 列表标题:<dt>一般只有一项</dt> 标题顶格显示 列表描述项<dd>可以有N多项</dd> 描述项相对标题进行缩进显示 *注意嵌套时列表不能交叉* <div></div>:分区标签 五.常用行级标签 span(文本):无实际意义,用于包裹某部分文字,修改特定样式 q(短引用):语法:<q cite="http:baidu.com">这是短引用标签q中的文字</q> small(缩小字体):可以多重嵌套直到字体最小 big(放大字体):可嵌套直到最大 em(强调) strong(强调) a(超链接) i(倾斜) b(加粗) ***strong,em,b,i标签的区别***: 1、strong和em都表示强调,strong显示为粗体,em显示为倾斜。而且, strong的强调程度比em更高 2、strong和b都能加粗,em和i都能倾斜,但是,strong和em多了一层强调的语义,HTML5语言,要求标签尽可能的实现语义化。     img(图片)
       1、src:表示引用图片的地址
            路径地址的写法:
            ①相对路径:以当前文件为准,去寻找图片地址
                    a、与文件处于同一层的图片,直接写图片名
                    b、图片在当前文件下一层:文件夹名/图片名
                    c、图片在当前文件上一层:../图片名
            ②绝对路径:file:///盘符:/文件夹/图片.后缀名     但是严禁使用!
            ③网络地址:网络上的图片链接。但是一般不使用,因为有意外。
            2、height=""width=""图片的宽度高度。可以用ccs样式(style="width:;height:;")代替
            3、title:图片标题,鼠标指上后显示的文字。
            4、alt:当图片无法显示的时候,显示的文字。
            5、align:设置图片周围文字相对于图片的位置。top,center,bottom     a(超链接):     1、href:超链接的路径,可以是网络链接,也可以是本地文件(路径确定同img)     2、target:用超链接打开的位置。_self自身页面(默认),_blank新页面     3、title:鼠标指上后显示的文字     4、(了解)rel:用于表明被链接文档与当前文档的关系;        rel=“prev”被链接文档是前一篇文档 rel="next"被链接文档是后一篇文档        (记住)rel=“icon”被链接图片是当前文档的图标 rel=“stylesheet”被链接文档是当前文档的样式表       rel=“prefetch”预加载,在当前文档加载完成后,用空余时间预加载即将链接的文档    5、锚链接:      ①.本页面锚链接:a.设置锚点:<a name="top"></a>              b.在超链接上,使用name跳转到对应锚点            <a href="#top" target="_self">这是一个锚点</a>        ②.页面间锚链接:a.在即将跳转的页面的指定位置,设置锚点              b.在超链接的href中属性,使用"页面地址.html#name"             <a href="t.html#hip">跳转到新页面的位置</a> 6.功能性链接: mailto://[email protected] 用于给指定邮箱发送邮件            file:///e:/a.jpg 打开本地文件(只能在本地文件中打开)           tencent://message/?uin=qq号 给指定qq发消息     s有误文本     <s>这是s标签中文字</s>     金沙js333娱乐场 4     cite标签:浏览器显示为斜体,常用于书、画作     金沙js333娱乐场 5
    <!--mark:高亮或标记文本,浏览器显示为黄色背景-->     <mark>aaaa</mark>金沙js333娱乐场 6     六.表格 金沙js333娱乐场 7 [table常用属性]: 1、border:给表格添加边框,当border属性增大时,只有外围框线增加,单元格的边框始终为1px 2、cellspacing:单元格与单元格之间的间隙距离,当cellspacing=“0”,只会使单元格间隙为0,但不会合并边框线。 【表格边框合并】style=“border-collapse:collapse;”,无需再写cellspacing 3、cellpadding:每个单元格中的内容,与边框线的距离。 4、width,height:表格的宽高 5、align:表格在屏幕的左中右位置显示,left,center,right >>>注意:给表格加上align属性,相当于让表格浮动,会直接打破表格后面的元素的原有的排列方式 6、bgcolor:背景色,等同于style=“background-color” 7、background: background="../img/gx.jpg" 背景图片 等同于style=“background-image”且背景图片会覆盖背景颜色 8、bordercolor=“blue” 边框颜色   【tr和td相关的属性】 1、width/height: 单元格的宽高 2、bgcolor: 单元格的背景颜色 3、align:left center right 单元格中的文字,水平对齐方式 4、valign:top center bottom 垂直对齐方式 5、nowrap:nowrap="nowrap" 单元格中文字不换行   注意:1、当表格属性与行列属性冲突时,以行列属性为准.(作用范围越小优先级越高,近者优先) 2、表格的align属性,是控制表格自身在浏览器的显示位置 行和列的align属性,是控制单元格中文字在单元格中的对齐方式 3、表格中的align属性,并不影响表格内文字的水平对齐方式 tr的align属性,可以控制一行中所有单元格的水平对齐方式   [表格的跨行与跨列] colspan 跨列,当某个格跨N列时,其右边N-1个单元格需删除 rowspan 跨行,当某个格跨N行时,其下方N-1个单元格需删除 七.表单         语法:<form>...</form>         一般和table配合使用,table负责页面架构,起实际提交作用的是form,互不影响         <form action="表单提交地址" method="提交方法">...</form>         form表单         1.两个重要属性:action-表单提交的服务器地址 method-表单提交数据的方法(get/post)          2.get和post的区别:         ①get:使用url传参:          url传参不安全,所有信息可在地址栏看到。并且可以通过地址栏随意传递其他数据。          url传递数据有限,只能传递少量数据。 ②post:使用http请求传递数据,url地址不可见,比较安全,且传输数量没有限制。 综上,常用post传输数据 3.【input标签及属性】 ①type:input输入框的类型 ②name:input输入框的别名,一般情况下必填。因为传递数据时使用 name=value的形式传递 ③value:input输入框的默认值。 ④placehold:input的提示内容,当输入框有value时,提示内容消失。 ⑤(了解)tabindex="1"控制点击tab键时的跳转顺序,从最小的开始,逐个往大的数值跳转获得焦点。 【input特殊属性值】 ①checked=“checked”默认选中 ②disabled=“disabled”设置控件不能使用,用在按钮上不能点击,用在输入框上不能修改。而且如果输入框disabled,则输入框信息将不能往后台传递。 ③hidden=“hidden” 隐藏。等同于<input type="hidden"/> 常用于配合disabled,或根据其他需要,使用隐藏域传递数据。 金沙js333娱乐场 8

 

4.【input-type属性详解】 ①text:文本输入框 ②password:密码输入框,输入内容时显示为小黑点 ③radio:单选按钮, checkbox:复选按钮 >>>name和value属性需同时存在,提交时,提交的是value中的属性值。 例如:<input type="radio" name="sex" value="男"/>提交时显示为"sex=男" >>>radio凭借name属性区分是否为同一组,name相同,为同组,同组中只能选一个。 >>>checked="checked"默认选中(radio只能选一个,checkbox可以选多个) ④file:文件上传按钮 ⑤submit:提交按钮,提交表单数据。 ⑥reset:重置按钮,将表单数据重置为初始状态 ⑦image:图形提交按钮,功能同submit,可以提交数据 ⑧button:普通按钮,没有任何作用。   <input type="submit" value="注册"/> 金沙js333娱乐场 9 <input type="submit"/> 金沙js333娱乐场 10 <input type="text" name="username" placeholder="请输入用户名" /> 金沙js333娱乐场 11 <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 金沙js333娱乐场 12 <input type="text" name="username" value=123 disabled="disabled" /> 金沙js333娱乐场 13 5.【下拉框控件select】 ①写法: <select> <option></option> //可以有N多个 </select> ②name属性:写在select上,所有选项只有一个name ③multiple="multiple"设置select控件为多选。可在设置界面按住ctrl进行多选。一般不用 金沙js333娱乐场 14

 

④option常用属性: value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字; 当option有value属性时,往后台传递的是value属性的值 示例:<td> <select name="city" > <option value="1">青岛</option> <option value="2">湖北</option> <option value="3">济南</option> <option value="4">烟台</option> </select> </td> title=""鼠标指上后显示的文字 selected="selceted":默认选中 ⑤<optgroup label="山东省"></optgroup>:用于将option标签进行分组,label属性表示分组名。 金沙js333娱乐场 15注:name起名时,不能以数字开头,不能用中文,不能有除下划线以外的其他特殊封号,不能有空格。

 

    6.【文本域textarea】 ①写法:<textarea></textarea> ②设置宽高style="width:200px;height:100px;" 自身有cols=""rows=""两个属性但是不常用 ③readonly="readonly"设置为只读模式不能编辑。 ④style="resize:none;"设置为宽高不允许修改 ⑤style="overflow: ;"设置当文字超出区域时,如何处理(不是textarea专属,div也可以设置) >>>也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式 >>>常用属性值:hidden 超出区域的文字,隐藏无法显示 scroll 无论多少文字,均会显示滚动(默认样式) 7.【表单的边框与标题】 <fieldset> //表单边框 <legend></legend> //表单标题 </fieldset> >>>如果想要让标题嵌入到边框中,需将标题标签写到边框标签里。 >>>一个表单,可以有多组边框+标题的组合。 金沙js333娱乐场 16

 

8.【HTML5 智能表单】 ①H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签中,即可通过表单进行提交。 <form id=foo>...</form> <input ...form="foo"/> ②新增属性查看表格 金沙js333娱乐场 17 ③input元素的新增属性: Autocomplete:自动完成功能:记录用户之前输入的内容,并在下次输入时,自动提示完成输入。 >>>属性值:on/off >>>可以在form表单上使用,对整张表单的所有控件进行自动完成的开关。也可以在input上使用,对特定输入框进行修改。 >>>绝大部分浏览器,默认开启。   Autofocus:自动获得焦点:autofocus=“autofocus”,只能设置input元素自动获得焦点。 Form:所属表单:通过form表单额id,确定此input输入哪张表单 Required:必填:required=“required”设置input必填,否则阻止提交 Pattern:使用正则表达式验证input的模式 Placeholder:提示内容,当有value时,提示内容消失。       好了差不多就是这些吧,还希望多多指教,有错误的地方也请大神们指出。 Time is simply how you live your life    

初涉H5的学习,完全萌新一枚,每天虽然疲惫却真的前所未有的充实,不敢有一点懈怠,真的不...

2.5 常用的行级标签

1、span标签:用于包裹行内的文字。常配合css使用修改文字样式。

↓栗子:“帅”字颜色变红,字体变48像素

我真帅!!!

2、em/strong/i/b 区别

1、em和i都能倾斜,strong和b都能加粗。但是,em和strong多了一层强调的含义。
(强调的作用,可以让搜索引擎快速的抓取网页的重点部分。可以实现代码的语义化。)
2、em和strong都有强调的作用,但是em是倾斜,strong是加粗,而且strong的强调程度要比em更高。

<em>em标签,倾斜+强调</em>
<strong>strong标签,加粗+强调</strong>
<i>i标签,倾斜</i>
<b>b标签,加粗</b>
<s>删除线</s>
 <u>u标签,下划线</u>

常见引用标签
常见的引用标签有:blockquoye、q、cite
区别:
1、显示效果上:blockquote整段缩进、q加引号、cite倾斜
2、从功能上:blockquote用于引用一整段内容,是块级标签。q引用一句话,是行级标签。cite常用于引用作品名、书画名。

 

3、img图片标签

①、src属性:表示图片所在的路径。
  [路径的表示方式]
  a网络上的图片地址。不建议使用。 使用http://协议
  b可以使用图片的绝对路径。仅供了解。使用file://协议。严禁使用。因为网页使用http协议,无法打开file://协议的文件
    绝对路径写法:file:///盘符:/文件路径
  c使用相对路径。推荐使用的唯一方式。
    a.图片在当前文件的下一层,“文件夹名/图片名(带后缀)”
    b.图片与当前文件在同一层,直接写“图片名”。
    c.图片在当前文件的上一层,“../图片名”。
    注意:图片必须包含在项目里面,不能退出项目根目录
②、width、height(宽度、高度)属性。
③、title:鼠标指上时显示的文字。
④、alt:图片无法加载时显示的文字,省略alt将默认显示title内容。
⑤、align:图片周围的文字,相对于图片的排列方式:
  top:文字居上
  center:文字居中
  bottom:文字居底

<img src="img/TX.JPG" width="100" height="100" title="鼠标指上时显示的文字" alt="金沙js333娱乐场 18" align="center"/>

4、a标签:超链接

a、href属性:超链接跳转的地址。可以是网页链接,也可以是本地html文件的相对路径。
b、target属性:超链接新页面打开的位置。
  _self在当前页面打开(默认) _blank在新页面打开
c、title属性:鼠标指在超链接上显示的文字。

【功能性超链接】
a、给指定邮箱发送邮件。mailto://协议。写法:mailto://邮箱地址
   eg:<a href="mailto://[email protected]">点击给帅哥发邮件!</a>
b、tencent:与指定QQ聊天。tencent://协议。写法:tencent://message/?uin=QQ号码
  eg:<a href="tencent://message/?uin=983364230">与帅哥聊天</a>
c、锚链接:点击超链接可以跳转到页面的指定位置(锚点)
  ①在页面的指定位置定义一个锚点:<a name="top"></a>
  ②将超链接的href属性,改为“#锚点名称”:<a href="#top">跳转顶部</a>
  ③跳转到其他页面锚点的方式:<a href="其他页面地址.html#锚点名称">跳转到其他页面指定位置</a>

 <a href="#top" target="_blank" title="百度">这是一个超链接</a>

5、字体大一号和小一号,已淘汰。修改字体统一使用css

<small>小一号字体</small>
 <big>大一号字体</big>

 

【其他行级标签,了解即可】
s标签:带删除线
u标签:带下划线
dfn标签:定义专业术语
abbr标签:专业术语缩写词
code:提示搜索引擎当前为一段计算机代码,但是不会保留代码格式,需要配合pre标签共同使用。pre包含code
var:声明变量
bdo:定义文本显示方向,有一个重要属性:dir, ltr从左往右 rtl从右往左
kbd:表示需要用户输入的文字
sub:下标
sup:上标
time:表示时间

        <u>u标签带下划线</u> 
        css实现下划线

        <s>s标签带删除线</s>
        css实现删除线

        我们正在学习<dfn>HTML5</dfn>,简称为<abbr>H5</abbr>。

        <pre>
        <code>
jsLoader({
    name : 'iplookup',
    url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'
});
        </code>
        </pre>

        <var>x</var>+<var>y</var>=1

        <bdo dir="rtl">我真帅</bdo>

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

        H<sub>2</sub>O   X<sup>2</sup>

        现在是<time>16:10</time>                

 


 

【w3c倡导的web结构】
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码,必须要实现语义化

【w3c的规范】
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的标签,不能发生交叉
②块级标签可以包裹行级,行级标签不能包裹块级;p标签不能包裹p标签等...


 

【示例-表单】

(见开头的代码)

QWQ嘤嘤嘤(第一周),专业学习qwq 一串串小小的代码,竟然可以做出辣么多的东西,彻底颠覆了我的世界观、...

 

二、HTML的基本标签  

一、什么是HTML

    HTML是超文本标签语言,即网页的源码。而浏览器就是翻译解释HTML源码的工具。

2、表单(form)

金沙js333娱乐场 ,【两个重要属性】:action-表单提交的服务器地址 method-表单提交数据的方法(get/post) get/post区别: 1>get使用URL传参: (?表示传递参数,?后面采用name=value的形式传递,多个参数之间用&连接) ① URL传参不安全,所有信息可在地址栏看到,并且别人可以很容易url注入,来 攻击自己的数据库。 ② URL传参数据量有限,只能传递少量数据。 2>post:使用http请求传递数据。URL地址看不到数据信息,安全且传递信息量没有限制 综上所述:大部分使用post传参,但是get传参比Post快 【input标签及属性】     ①type:input输入框的类型,可选值有:     ②name:input输入框的别名,必填,因为传参的时候采用name=value的形式传递。     ③value:input输入框的默认值     ④placeholder:提示内容,当输入框有value时,提示内容消失。 【input特殊属性值】     ① checked="checked"默认选中     ② disabled="disabled"设置控制不能使用,按钮上不能点击,输入框上不能修改,而且如果       输入框时disabled,则输入框信息不传递到后台     ③hidden=“hidden”隐藏。等同于<input type="hidden" name="username"value="1234" />       等同于配合disabled或根据其他需要,使用隐藏域传递信息.     【input-type属性详解】     ①text:文本输入框     ②password:密码输入框,内容不对外显示     ③radio:单选按钮     checkbox:复选按钮         a、单选按钮,name和value属性需同时存在,提交时,提交的是value中的属性值         例如:<input type="radio" name="sex" value="男"/>提交显示为"sex=男"         b、radio凭借name属性区分是否为同一组,name相同为同组,且只能选择一个         c、checked="checked"默认选中,(radio只可以选一个,checkbox可以选多个)     ④submit:提交按钮,提交表单数据     ⑤reset:重置按钮,重置为默认状态     ⑥file:文件上传按钮     ⑦image:图片提交按钮,功能同submit,可以提交数据     ⑧button:普通按钮,没什么软用            ⑨其他常用属性值:见下图 金沙js333娱乐场 19   【select标签】下拉选择标签    写法:  

<select name="=city">
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
<option>纽约</option>
<option>罗马</option>
</select>

      常用属性

    ①name属性:写在select里,所有选项只有一个name
    ②multiple属性:multiple="multiple"设置select为多选,一般不用
    ③option常用属性:value=""属性,当option没有value属性时,往后台传递的是<option></option>中间的文字,
      当有value属性时,传递的是value的属性值。
      title=""属性,鼠标之上后现实的文字
      select="select"默认属性值
    ④optgroup属性: 用于option属性分组,用lable属性表示分组名。
      <optgroup label="中国">
      <option>青岛</option>
      <option>烟台</option>
      <option>北京</option>
      </optgroup>

【textarea】:文本域,其常用属性 :

    ①设置宽度高度><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2 style="text-decoration: underline;text-align: center; background-color: yellow;width: 500px;">特别休假请假单</h2> <p>申请日期:  年  月  日</p> <table border="2"cellspacing="0"width="500px"> <tr> <td>所属单位</td> <td>部组班</td> <td>职称</td> <td>111</td> <td>姓名</td> <td>111</td> <td>厂长</td> </tr> <tr> <td rowspan="2">期间</td> <td colspan="3">年月日</td> <td rowspan="2" colspan="2">天数</td> <td>111</td> </tr> <tr> <td colspan="3">年月日</td> <td>主管</td> </tr> <tr> <td colspan="2">职务代理人</td> <td colspan="4">盖章</td> <td>111</td> </tr> <tr> <td>到职日期</td> <td colspan="3">年月日</td> <td colspan="2">审核意见</td> <td>组长</td> </tr> <tr> <td colspan="2">全年特别休假</td> <td colspan="2" align="right">天</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td colspan="2">已请假</td> <td colspan="2">天</td> <td>人事主任</td> <td>人事经办</td> <td>班长</td> </tr> <tr> <td colspan="2">本次申请日数</td> <td colspan="2">天</td> <td rowspan="2">111</td> <td rowspan="2">111</td> <td rowspan="2">111</td> </tr> <tr> <td colspan="2">剩余假期</td> <td colspan="2">天</td> </tr> </table> </body> </html>

金沙js333娱乐场 20

 

2.4 了解:组合标签figure

包含两部分:
img 一张图片
figcaption: 图片的标题,在图片正下方显示。

<figure>
    <img src="img/icon.PNG" />
    <figcaption>图片的标题</figcaption>
</figure>

3、组合标签:

金沙js333娱乐场 21

 

2.6 表格

表格table标签
表格中的一行,用tr表示;
一行中的每个单元格,用td表示;
首行的表头中每个单元格用th表示,th默认文字会加粗,居中。

【表格中的各种属性】
1、border:给表格的每个td和整个table加边框。如果border的值>1,则只有最外层边框加粗,td上的边框不变。

2、cellspacing:设置单元格与单元格之间的间距。
  cellspacing="0"可以设置边框之间的间距为0,但是相邻的边框不会合并,而是显示两条线的宽度。
[设置表格边框合并]
可以使用css设置:style="border-collapse: collapse;"
设置边框合并以后,cellspacing属性将会失效。

3、cellpadding:单元格内边距,单元格中文字与边框之间的距离。

4、width/height:表格的宽度 /高度

5、align:设置表格在浏览器中居左、居中、居右

6、Bgcolor:表格背景色
  bordercolor:表格的边框颜色
  background:表格背景图。背景色和背景图同时存在,背景图生效。

【表格的行列属性】
作用于tr或td上的属性

1、width/height:宽度/高度

2、bgcolor:背景色
当表格的属性与行列的属性发生冲突时,优先级采用“近者优先”的原则:table<tr<td

3、align:设置表格中的文字水平对齐方式(right、center、left)
Valign:设置表格中的文字垂直对齐方式(top、center、bottom)

【注意】当表格属性与行列属性相冲突时,以行列属性为准
                         (近者优先!!!)
table中的align控制表格在整个浏览器中的显示位置!
单元格中的align控制其中文字在单元格中的对齐方式!
表格的align属性并不影响单元格内文字的水平对齐方式!
tr的align属性可以控制一行中所有单元格的水平对齐方式!

【表格的跨行与跨列】
1、跨列:colspan="n" 如果某个单元格跨n列,择该单元格右侧n-1个td就不需要了。
2、跨行:rowspan="n" 如果某个单元格跨n行,择该单元格下方n-1个td就不需要了。

 

 

代码如下:

    <table border="1"; cellspacing="0"; style="border-collapse: collapse;" cellpadding="10"
            width="500"; height="400"; align="center"; Bbgcolor="yellow"; bordercolor="red"; 
            background="img/TX.JPG"; >

            <tr bgcolor="red">
                <th width="300"; bgcolor="cyan"; align="right"; valign="top"; rowspan="3">1-1</th>
                <th colspan="3">1-2</th>

            </tr>
            <tr>

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

【表格的结构化】
完整的表格结构,包括
caption:表格的标题,无论caption标签放在表格的第几行,表格标题永远在表格的正上方居中
thead:表格的表头部分。永远在表格最上部
tbody:表格的身体部分。永远在表格的thead之下,tfoot之上
tfoot:表格的尾部。永远在表格的最下部。

表格的直列化:
表格有几列,就可以在表格的最上方写几个<col />标签,每个<col />就对应着第几列,可以对<col />标签修改样式、
添加name等属性,表示这一列的所有td同步修改;
如果,需要对多列修改共同样式,可以使用<colgroup></colgroup>包裹多个<col />

 

代码如下:

     <table>
            <col style="background-color: red;"/>
            <colgroup style="background-color: blue;"/>
                <col />
                <col />
            <caption>表格的标题</caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王二</td>
                    <td>不明</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td>合计</td>
                    <td></td>
                    <td>3</td>
                </tr>
            </tfoot>
        </table>

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表 ①有序列表:<ol></ol> 列表项:<li></li> ②无序列表:<ul></ul> 列表项:<li></li> ③定义列表(实现图文混排):<dl></dl> 列表标题:<dt>一般只有一项</dt> 列表描述项:<dd>可以有很多项</dd>

1.3link标签

链接网页与其他文件。

下面举个栗子:链接小图标

<link rel="icon" href="img/icon.PNG"/>

<body部分>

1.1meta标签

<meta charset="utf-8" />

<!--
↑设置网页的字符集编码格式:
GB2312:国标码。简体中文的编码格式。
GBK:扩展的国标码。比国标吗多了更多的编码格式。
utf-8;万国码。可以兼容绝大多数国家的语言。

html4.01之前,声明字符集编码的格式:<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

-->

<meta name="keywords" content="杰瑞教育,html5,Web开发"/>

<!--
设置网页关键字:
name="keywords"表示当前语句用于设置网页关键字
content=""表示网页的关键字内容。多个关键字之间用英文逗号分隔。
-->

<meta name="description" content="这是我在杰瑞开发的第一个网页。我真厉害!!!!!"/>

<!--
设置网页描述:
name="description" 表示当前语句用于设置网页描述
content="" 表示网页的描述内容。
网页的描述,在搜索引擎中搜索网站时,标题下面的一段文字,就是网页的描述内容。
-->


跨专业学习编程的苦逼生活 QWQ嘤嘤嘤(第一周),专业学习qwq

一串串小小的代码,竟然可以做出辣么多的东西,彻底颠覆了我的世界观、人生观、价值观。

话不多说,一个例子证明一切>>>>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .li{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <form action=""method="get">
        <div style="width: 555px;height:30px;background-color: #E8E8E9;">
            <img src="img/xiaotu.png" align="center"style="margin-bottom: 3px;"/>
            <b style="font-size: 12px;line-height: 30px;">用户注册</b>
        </div>
        <div>
            <table>
                <tr>
                    <td class="li">用户名:</td>
                    <td>
                        <input type="text" name="name" />*
                    </td>
                    <td>检测是否有相同的用户名</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="li">密码:</td>
                    <td>
                        <input type="password"name="psw" />
                    </td>
                    <td>
                        至少6位
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        真实姓名:
                    </td>
                    <td><input type="text" name="relname" /></td>
                </tr>
                <tr>
                    <td class="li">确认密码:</td>
                    <td><input type="password" name="psw2"  /></td>
                    <td align="right">性别:</td>
                    <td><select name="sex">
                        <option >男</option>
                        <option >女</option>
                    </select></td>
                </tr>
                <tr>
                    <td class="li">证件类型:</td>
                    <td>
                        <select name="card" style="width: 150px;height: 25px;">
                            <option>身份证</option>
                        </select>
                    </td>
                    <td align="right">出生日期:</td>
                    <td><input type="date" name="data" />(格式为2013-2-7)</td>
                </tr>
                <tr>
                    <td class="li">证件号码:</td>
                    <td><input type="text" name="num" /></td>
                    <td align="right">国家:</td>
                    <td><input type="text" name="country" /></td>
                </tr>
                <tr>
                    <td class="li">联系号码:</td>
                    <td><input type="tel" name="tel"/></td>
                    <td align="right">城市:</td>
                    <td><input type="text" name="city" /></td>
                </tr>
                <tr>
                    <td class="li">手机号码:</td>
                    <td><input type="tel" name="phone"  /></td>
                    <td style="font-size: 12px;color: darkgray;">建议填写以便短信进行通知</td>
                </tr>
                <tr>
                    <td class="li">Email:</td>
                    <td><input type="email" name="mail"  /></td>
                    <td align="right">邮编:</td>
                    <td><input type="email" name="ad"  /></td>
                </tr>
                <tr>
                    <td class="li">联系地址:</td>
                    <td colspan="3"><input type="text" name="adr"style="width: 450px;"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2"align="center"height="50px">
                        <input type="reset" value="重置" style="border: none;border-radius: 8px;"/>
                        <input type="submit" value="注册" style="background-color:#A51313;border: none;border-radius: 8px;margin-left: 10px;color: white;"/>
                    </td>

                </tr>

            </table>

        </div>
        <div id=""style="margin-left: 100px;">
                    广告|
                    <sapn style="color: #579FFB;font-size: 12px;">伙伴云表格,三分钟上手,永久免费!</sapn>查看详情

                </div>
        </form>
    </body>
</html>

 

看见这串代码了嘛,没想到在hbuilder中竟然可以敲出下面这个表格(额滴神,好神奇鸟~)

金沙js333娱乐场 22

接下来给大家看看这一周的成果吧  ps(一周的笔记!!!)

三、HTML的基本标签

一、Html的基本结构:

<!DOCTYPE html> <html> <head> <meta  charset=utf-8"> <title></title> </head> <body> 网页的文本、图片等信息; </body> </html>

2.<body>主体部分

<!--
body中的内容,会显示在浏览器的展示区域中。
-->


4、分区标签:<div></div>

金沙js333娱乐场 23

 

2.1 标签的分类

HTML标签,分为“块级标签”和“行级标签”。

【块级标签和行级标签的区别】

1、块级标签自动换行,前后隔一行;
行级标签不会自动换行,从左往右依次显示
2、块级标签的宽度默认是百分之百,行级标签的宽度由文字内容撑开;
3、块级标签可以设置宽度、高度、边距等属性
行级标签不能设置上述属性

从写法上,HTML标签分为“成对标签”和“自闭合标签(空标签)”
成对标签:成对出现,有开始标签,必须有结束标签,内容包裹在两个标签之间。例如:<h1></h1> <p></p> <title></title>
自闭合标签/空标签:只有一个标签,用/表示标签的自动闭合(/可以省略)。例如<hr /> <link /> <meta />


<head部分>

1、title标签:浏览器标签页显示的标题 2、meta标签:其常用属性 ①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8"> 常见的字符集编码格式: a.GB-2312:国标码,简体中文 b.GBK:扩展的国标码 c.UTF-8:万国码 Unicode 常用 ②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中) ③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看 常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。 3、link标签:链接网页图标(title前的小logo),其常用属性有: ①rel属性:声明链接文件的类型,此处选icon ②type属性:可以省略 ③href属性:表示图片的路径地址

二、HTML文档的结构

    HTML文档主要包括三大部分:文档声明部分、<head>头部部分、<body>主体部分。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
    </body>
</html>

<!--
↑文档类型声明:让浏览器按照html5的标准对代码进行解释与执行。
↑文档类型声明必不可少,而且,必须放在文档最上方。
↑如果不写文档类型声明,浏览器会默认按照兼容模式运行,但可能会出现不明bug。
-->

5、常见的行级标签

<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如: 这是<span>      表格行列属性:[tr和td的属性]:     1、width/heigh:单元格的宽高     2、bgcolor:单元格的背景颜色     3、align:left center right 单元格中的文字水平对齐方式     4、valign:top center bottom 单元格中的文字垂直对其方式     5、nowrap:单元格中文字不换行   【注意】当表格属性与行列属性冲突时,行列属性优先级高  

1.<head>头部部分

<!--
↑head中主要放关于网页设置的相关语句。
-->


2.7 表单

【form表单】
1、form表单有两个重要的属性
  action:表示将表单提交给哪个服务器地址。
  method:表单提交数据的方式,可选值有get、post两种。

[get和post的区别]
  ①get使用url传递数据,所有内容在地址栏可见,不安全。
      post的数据无法在地址栏看到,较安全。
  ②get传递的数据量有限,而且只能传递纯文字内容;
           post可以传递大量数据,并且可以传递图片、视频等文件。
  ③get的传输速度要比post快。

[get传递数据的URL格式]
http://原来的地址.html?name1=value1&name2=value2
比如:http://127.0.0.1:8020/0595.html?username=123
所以,input使用时,name属性必不可少,缺少name,将导致该输入框的数据不向后台传递。

2、input的常用属性:
  ①type:表示当前输入框是何种类型的输入框;
  ②name:给输入框起别名。向后台传递时,使用name=value的形式传递。

  ③value:当前input的默认值;
  ④placeholder:输入框的提示内容,当输入框有value时提示内容消失。

  ⑤hidden:隐藏当前输入框。可以写为hidden="hidden",也可以省略属性值,只写<input type="text" hidden>
    隐藏的输入框依然可以向后台传递数据
  ⑥disabled:禁用当前输入框。可以显示,不能使用。
    被禁用的输入框内容,将不能向后台传递数据。
  ⑦ checked="checked" 设置单选/多选按钮,默认选中。
3、input的type类型:
  ①text:普通的文本框;
  ②password:密码框输入的内容,显示为小黑点。
  ③radio:单选按钮,单选按钮的value不能省略,这个value需要传到后台;
    单选按钮,凭借name是否相同,区分按钮是否为同一组。同一组按钮只能选中一个,name必须相同。
    checked="checked" 设置单选按钮,默认被选中。
  ④checkbox:多选按钮,其他与单选按钮相同。
  ⑤file:文件上传框。
    accept属性可以限制只能上传何种类型的文件。"*"表示可以接受所有文件,"image/*"表示只能接受图片。
    multiple="multiple" 设置可以上传多个文件。
  ⑥submit:表单提交按钮
  ⑦reset:表单重置按钮,点击将表单恢复为初始状态。
  ⑧image:图形提交按钮,src属性导入图片,与submit都具有提交表单的作用。
  ⑨button:显示为按钮形状,但是没有任何作用。
  ⑩hidden:隐藏的输入框,与 普通输入框+hidden="hidden" 的作用相同。
4、select 下拉选择区块
  ①select里面的每一项,用<option></option>标签表示;
  ②name属性,需要写到select标签上;
  ③option标签如果有value属性,择向后台传递的将是value属性的值,
    如果没有value属性,则传递的是<option></option>标签之间的文字。
  ④option添加属性中,selected="selected"设置选中默认项
  ⑤select添加属性multiple="multiple",设置当前下拉控件可以多选。
  ⑥option添加属性title,表示鼠标指上后的文字。
  ⑦select可以使用<optgroup></optgroup>标签对选项进行分组,用label属性显示分组名

              <select name="city">
                            <optgroup label="沿海">
                                <option value="123">青岛</option>
                                <option selected="selected">烟台</option>
                            </optgroup>
                            <optgroup label="内地">
                                <option title="济南">济南</option>
                                <option>淄博</option>
                            </optgroup>    
                        </select>

 

5、textarea 文本域
  ①文本域大小控制:
    可以用文本域属性cols="20"(宽度多少字符) rows="20"(高度等于多少行)
    可以使用css样式style="width: 200px; height: 300px;"
  ②设置文本域大小不能拖动>    <form action="" method="get" id="form1"> <table> <tr> <td>用户名</td> <td> <input type="text" name="username" value="sdg" disabled/> <input type="text" name="username" value="sdg" hidden="hidden"/> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" value="" placeholder="请输入密码"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="radio" name="sex" value="不明" checked="checked" />不明 </td> </tr> <tr> <td>兴趣</td> <td> <input type="checkbox" name="hobby" value="吃" />吃 <input type="checkbox" name="hobby" value="喝" />喝 <input type="checkbox" name="hobby" value="玩" />玩 <input type="checkbox" name="hobby" value="乐" />乐 </td> </tr> <tr> <td>身份证</td> <td> <input type="file" name="card" accept="image/*" multiple="multiple"/> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <optgroup label="沿海"> <option value="123">青岛</option> <option selected="selected">烟台</option> </optgroup> <optgroup label="内地"> <option title="济南">济南</option> <option>淄博</option> </optgroup> </select> </td> </tr> <tr> <td>阅读服务协议:</td> </tr> <tr> <td colspan="2"> <textarea style="width: 300px; height: 200px; resize: none; overflow: scroll;" readonly="readonly">这是一份你必须同意的协议</textarea> </td> </tr> <tr> <td> <input type="submit" value="注册"/> </td> <td> <input type="reset" name="重置"/> </td> </tr> <tr> <td> <input type="image" src="img/icon.PNG"/> </td> <td> <input type="button" value="一个并没有什么卵用的按钮"/> </td> </tr> </table> </form>

【html5智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id,
  然后给表单外面的input添加form属性,指向这个id,就可以实现表单与input的绑定
  <form id="ff"></form>
  <input form="ff"/>
2H5给我们新增了许多input的新的type类型
  range color date email url等
3、H5新增的input属性:
  ①form属性:关联指定表单的id
  ②placeholder:输入框的提示内容
  ③required="required" 表示必填
  ④autofocus: 指定输入框自动获得焦点
  ⑤autocomplete:可以设置是否开启自动提示完成功能,默认 为开启状态,
  设置为off表示关闭,设置为on表示打开
  可以为form标签设置autocomplete,控制表单所有输入框的自动提示功能。

一、什么是HTML HTML是超文本标签语言,即网页的源码。而浏览器就是翻译...

1.2title标签

<title>杰瑞首页</title>

<!--
↓网页的标题,也就是网页选项卡上的文字。
-->


2.3 基于布局的块级标签

1、有序列表ol: order list。一个有序列表由多个li组成

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

2、无序列表ul: unorder list

<ul>
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
            </ul>

3、定义列表dl: difine list。

定义列表包含两部分:
<dt></dt>:定义列表的标题,标题顶格显示,一般一个定义列表只有一个标题
<dd></dd>:定义列表的描述项,相对于标题向后缩进显示,一个标题可以有多个描述项。

<dl>
    <dt>定义列表的标题</dt>
    <dd>定义列表的描述项1</dd>
    <dd>定义列表的描述项2</dd>
    <dd>定义列表的描述项3</dd>
</dl>

2.2 常见的块级标签

1、h标签:标题标签,默认加粗,h1最大,h6最小

2、hr标签:水平线标签

3、br标签:换行标签,在代码中敲回车,在网页中并没有作用,必须使用<br>断行。

4、p标签:段落标签,表示网页中的一段文字

5、blockquote标签:引用标签,表示标签中的文字是应用自其他网站的内容。浏览器默认显示效果:整段向后缩进

6、cite:表示引用内容的来源,常写引用的网址URL。

7、pre标签:预格式标签,与p标签不同的是,pre标签会保留代码中的空格和回车,在网页中直接显示。最常的作用,是在网页中显示代码段,保留代码段格式。

8、div分区标签,用于配合css使用。将网页划分为块,可以包裹各种标签。<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML基本标签</title>
    </head>

    <body>
                <h1>我真帅!</h1>
        <h2>我真帅!</h2>
        <h3>我真帅!</h3>
        <h4>我真帅!</h4>
        <h5>我真帅!</h5>
        <h6>我真帅!</h6>


                <hr/>


                <p>这是一个段落。这是一个段落。<br />这是一个段落。这
                    是一个段落。</p>
        <p>这是一个段落。这是一个段落。这是一个段落。这是一个段
                    落。</p>


                <blockquote cite="www.jredu100.com">
                       我是个帅哥 !
                </blockquote>  


                <pre>
            预
            格
            式
            标
            签</pre>


     

<div style="width:100%;height:20px;background-color: red;">
    这是div里面的文字
</div>

本文由js333发布于计算机互联网,转载请注明出处:【金沙js333娱乐场】HTML5学完就去浪迹天涯的我,

关键词:

上一篇:没有了

下一篇:没有了