S跟着李南江学习HTML5—HTML学习

信任你们一定都曾经写完了作业并预备早睡后才来看自己推送的。不是的话……

<h2>HTML5上学感想</h2>
  想过转行<strong>html5</strong>有5个月多时光了,很幸运从朋友那边精通到<strong>小码哥</strong>并报了名,因家里行程原因没能面对面跟着江哥一起读书html5基础,但申请的首后天就连忙地下载了<strong>HTML+CSS</strong>全体视频,并早先读书和做速记。
  在看江哥摄像的时候,对江哥的崇拜感油但是生,江哥教师心理澎湃、细腻、循环渐进、思路清晰、八面后珑。带着大家从HTML的效用、基础结构,到各项标签,各种知识点都率领着大家去认识和左右,时期也必不可少巩固知识点的磨炼,做到真正的100%收取。特别是<strong>路径难点</strong>这一块,需要组合江哥的勤学苦练再自身仔仔细细计算,才能更进一步的巩固。江哥教师的认真态度和心绪让自家对<strong>H5</strong>的读书更是地渴望,每一天的上学、敲代码和小结让自身越发的增多、有干劲。
  印象最深的<strong>表单标签</strong>、<strong>video标签</strong>和<strong>marquee标签</strong>,一个一往情深今后游人如织网站的注册界面,八个对应网站上的松开,江哥让大家领悟了登记界面的各类细节,看完录制和随之操练过三遍,再本身diy做多少个登记界面和弹幕,极度有成就感,也感受到文化的吸纳并转化。
  十一月首旬才盼来江哥视频的重新更新,也询问到江哥喜添丁,baby好可爱,<strong>喜欢江哥,崇拜江哥,</strong>也好期待能收看小码哥的教职工们,一起学习进阶HTML5。

别写了,咱凉拌吧。

<strong>学HTML5就选李南江,选培训机构自个儿只选小码哥(www.520it.com)</strong>

QWQ

学习笔记

  • 字符集

<meta charset="GBK">   GBK(GB2312)仅储存汉字和常用外文,体积小
<meta charset="UTF-8">    国际通用,储存了所有文字
  • DTD文档注脚

<!DOCTYPE  html>  作用:告诉浏览器我是一个文档
  • __ H标签、P标签、Hr标签__

<h1>我是标题</h1>
h1 h2 h3 h4 h5 h6标签, 只有h1到h6,其他的无效;用来添加标题,字体依次变小。
<!--注意:会独占一行 -->
<!--注意:一个界面只能出现一个h1标签 -->
<p>我是一段文本</p>
<!--注意:会独占一行 -->
<!--如何快速添加前后标签?选中文字,按快捷键:Ctrl+Alt+T -->
<hr/>
<!--注意:会独占一行 -->
<!--单标签 ,在浏览器上实现一条分割线-->
  • 注释

格式:<!--要解释的内容-->
快捷键:Ctrl+/
  • Img标签

1、img是英文image的缩写
2、img标签的格式:![]( )
src是英文source的缩写,资源,用来告诉img标签需要显示的图片
<!--注意点:
和H系列的标签不一样,img标签不会独占一行
如果我们手动指定图片的宽度和高度,会使图片变形如果不想图片变形,只指定一个值,系统会自动自动高度,都是等比拉伸,不会变形
-->
3、img包含的属性:
width:宽度
height:高度
<!--width/height两个属性来控制图片的高度和宽度 如果没有指定宽度和高度,系统会默认显示 -->
title:当鼠标悬停在图片上的时候,需要弹出的描述框中显示什么内容;
alt:是英文alternate的缩写 作用是:当需要显示的图片找不到时,显示什么内容。
  • Img标签的不二法门难点

给src属性赋值有2种方式:
1、相对路径:(掌握)
<!--就是每次都是从.html文件所在的文件夹开始查找-->
a、同级(图片和.html文件存储在同一个文件夹中):
格式:src="xxx.jpg"
含义:在.html文件所在的文件夹中查找名称叫做xxx.jpg的图片
b、下级(存储图片的文件夹和.html文件夹在同一个文件夹中):
<!--企业开发中用得最多-->
格式:src="images/xxx.jpg"
含义:在.html文件所在的文件夹中找到名称叫做images的文件夹,然后再在images文件夹中找到名称叫做xxx.jpg的图片
c、上级(存储图片的文件夹和存储代码的文件夹在同一个文件夹中)
<!-- ../的含义必须深刻理解,代表从当前的位置找到上一级文件夹-->
格式:src="../xxx.jpg"
含义:在.html文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹中找到名叫xxx.jpg的图片

2、绝对路径:(了解)
绝对路径就是每次都从指定的盘符开始查找。
<!--注意点:
路径中不要出现中文,否则可能出现未知问题
如果是通过相对路径来指定,那么不能跨盘符
-->
  • Br标签

1.作用:换行
2.格式:<br>
<!--注意点:
1、多个br标签可以连续使用,使用了多少个br标签就会换多少行
2、由于html的作用就是用来给文本添加语义,而br标签的语义是:不另起一个段落换行,而在企业开发中一般情况下需要换行都是因为需要另起一个段落,所以在企业开发中很少使用br标签
-->
  • a标签
  • a标签的作用:就是用来控制页面与玉面之间跳转的
  • a标签的格式:

<a href="指定需要跳转的目标页面">需要展现给用户查看的内容</a>
例如:
<a href="http://www.it666.com">江哥博客</a>
  • 注意点
    • a标签不仅可以让文字可以点击,还能让图片(在a标签的启幕标签和得了标签之间添加img标签)也能被点击
    • 一个a标签必须有一个href属性,否则a标签不精晓要跳转到什么地点
    • 若果经过a标签的href属性指定一个URL地址,那么必须在地点后面加上http://(不安全)或https://(安全)
    • a标签中的其余质量:
      a标签中有一个名叫target属性,这脾气子的功能就是尤其用于控制什么跳转

      • _self:用于在当下选项卡中跳转,相当于不新建界面跳转,暗中同意就是_sel
      • _blank:用于在新选项卡中跳转,相当于新建界面跳转
      • 还有一个title属性,和img标签中的
        title一样,都以用来决定鼠标悬停时突显的晋升文本
      • 据此一个整机的的a标签格式是3个属性都有</ul>

  • base标签
    就是专程用来统一指定当前页面中存有的超链接(a标签)需求什么打开;
  • 注意点:
    • Base标签必须写在head标签的初阶标签和截至标签之间
    • 一旦既在base标签中指定了target又在a标签中指定了target,那么浏览器会根据a标签中指定的来进行

<base target="_blank">   控制整个页面的跳转  插入在head标签之中
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://tieba.baidu.com/">贴吧</a>
<a href="http://v.baidu.com/">视频</a>

图片 1

a标签页面跳转

  • 假链接
    假链接存在的意思:
    在合营社开支中期,其余界面都尚未写出来,那么大家就不明了应该跳转到什么地点,所以不得不利用假链接来代表,当
    项目中期其余界面都已经完毕时再将假链接替换为真链接。
  • 假链接的格式:
    1、#

<body>
<a href="#">点我1</a>
</body>

2、JavaScript

<body>
<a href="javascript:">点我2</a>
</body>
  • 三种格式的界别:
    “#”的假链接会自动再次来到网页的顶部,而JavaScript:不会回到网页的顶部

  • 锚点

  • 要想a标签跳转到指定的岗位,必须告诉a标签一个全世界无双的身份证号码,那样才能找到

  • 一旦给HTML中的标签绑定一个满世界无双的地位号码吗?
    在html中都有一个誉为id的属性,id属性是绝世的

  • 想要跳转到指定的职位分两步

    1. 给目的地点添加一个id属性,然后指定一个无比的值
    2. 告诉a标签须求跳转到的目的标签对用的绝世的身份证号码是有点,把id贴到假链接#后面
  • 格式:

<body>
<h2>我是顶部</h2>
<a href="#center">跳转到中部</a>
<br>
<h2 id="center">我是中部</h2>
<br>
<h2>我是底部</h2>
<br>
</body>
  • 注意点:
    1. 因此a标签跳转到指定的职位,是从未有过对接动画的,是一直一下子就跳转了点名地点
    2. a标签除了可以跳转到当前界面的指定地方以外,还足以在跳转到其余界面的同时一贯跳转到别的界面的创设位置【id要贴在目的界面路径前边加个#前面】,格式如下:
      如若 【锚点.html】和【锚点测试界面.html】在同个文件夹,那么
      锚点.html代码

<body>
<a href="锚点测试界面.html#bottom">跳转到锚点测试界面</a>
<h2>我是顶部</h2>
<a href="#center">跳转到中部</a>
<br>
<h2 id="center">我是中部</h2>
<br>
<h2>我是底部</h2>
<br>
</body>

锚点测试界面.html代码

<body>
<h2>我是锚点测试界面顶部</h2>
<br>
<h2>我是锚点测试界面中部</h2>
<br>
<h2 id="bottom">我是锚点测试界面底部</h2>
<br>
</body>
  • 列表标签

  • 列表标签的作用:给一堆数据添加列表语义,相当于告诉搜索引擎告诉浏览器这一堆是一个完全

  • html中列表标签的归类

    1. 无种类表(最多)(unordered list)
    2. 以不变应万变列表(最少)(ordered list)
    3. 概念列表(其次)(definition list)
  • 无连串表

  • 无连串表的成效:
    给一堆数据添加列表语义,并且这一对数码颇具的数码都尚未先后之分

  • 无种类表格式:

<ul> 
<li>需要显示的内容</li>
</ul>
li其实就是list item(列表条目)的缩写  list:(列表) item:(条目)```
 * 注意点:
   1. 一定要记住ul标签是用来给一堆数据添加列表语义的,而不是用来给他们添加小圆点的
   2. ul标签和li标签是一个整体,是一个组合,所以一般情况下ul标签和li标签都是一起出现的,不会单个出现。
   3. 由于ul标签和li标签是一个组合,所以ul标签中不推荐包含其他标签,也就是说ul标签中指挥看到li标签
 * 无序列表应用场景:
   1. 新闻列表
   2. 商品列表
   3. 导航条

<h2>中国的都会有那些</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>武汉</li>
<li>天津</li>
</ul>

 * 总结:
   1. 虽然通过标签属性也能修改样式,但是在企业开发中千万不要这么做
   2. ul中最好只放li标签,但在企业开发中,li标签中的内容可能会很复杂,所以我们可以继续在li标签中添加其他的标签来丰富我们的界面
   3. 一定要记住ul标签中 最好只放li标签
   4. 但是li标签中还可以继续放其他标签
   5. 无序列表中的li标签中除了可以添加其他标签来丰富我们的界面以外,还可以添加ul标签来丰富我们的界面
 * 在webstorm中如何编写一个ul的格式:

ul>li*4
意思:生成一对ul标签,然后在那对ul标签中再生成4对li标签

 * 更加高级编写ul格式的代码的语法:

ul>li2>h2+ul>li3

就会变成下面这样:<strong>上面的加号+是同级别的意思</strong>

<ul>
<li>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>

* __有序列表__
 * 有序列表的作用:给一堆数据添加列表语义,并且这一对数据所有的数据都有先后之分。
 * 有序列表的格式:

<ol>
<li></li>
</ol>

 *  其他用法和ul都差不多,也就是应用场景/注意点都和ul差不多
 <strong>企业开发中不用ol,用ul标签,排序的序号等教给css做</strong>
* __定义列表__
 * 定义列表的作用:
 * 定义列表的格式:

<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

 * 其实dt和dd都是英文的缩写:
dt是英文definition title的缩写,含义就是用来定义列表
dd是英文definition description的缩写,含义就是用来定义标题对应的描述的,描述dt的

 * 定义列表的应用:
   1. 做网站尾部的相关信息
   2. 做图文混排

 * 注意点:
   * 和ul/ol一样,dl和dt/dd是一个整体,所以他们一般情况下不会单独出现,都是一起出现
   * 和ul/ol一样,由于dl和dt/dd是一个组合标签
   * 一个dt可以没有对应的dd,也可以有很多个对应的dd,但是都不推荐
   * 和li标签一样,当需要丰富界面时,我们可以在dt和dd标签中继续添加其他标签

* __表格标签的基本使用__
其实在过去表格标签用得非常非常多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表
 * 什么是表格标签?
表格标签作用:用来给一堆数据添加表格语义,
其实表格是一种数据的展现形式,当数据量非常大的时候,表格这种展现形式被认为是最为清晰的一种展现形式
 * 表格标签格式:

<table>
<tr>
<td></td>
</tr>
</table>

table代表整个表格,也就是一堆table标签就是一个表格;
tr标签代表整个表格中的一行数据,也就是说一对tr标签就是表格中的一行
td标签代表表格中一行中的一个单元格,也就是说一对td标签就是一行中的一个单元格。

 * 注意点
   * 表格标签有一个边框属性,这个属性决定了边框的宽度,默认值是0,所以看不到边框

<table border=”1″>

   * 表格标签和列表标签一样,他是一个组合标签,所以table/tr/td要么一起出现,要么一起不出现

* __表格标签的属性__

 * 宽度和高度的属性
【可以给table和td标签使用】
   * 表格的宽度和高度默认是按照内容的尺寸来调整的,也可以通过给table标签设置width/height属性来手动指定表格宽度高度
   * 如果给td标签设置width/height属性,会修改当前单元格的宽度和高度,不会影响整个表格的宽度和高度
  * 水平对齐和垂直对齐的属性
   【水平对齐可以给table、tr、td标签使用】
   【垂直对齐只能给tr、td标签使用】
   * 给table标签设置align=”left/center/right”属性,可控制表格在水平方向的对齐方式
   * 给tr标签设置align属性,可控制当前行中所有单元格内容的水平方向的对齐方式
   * 给td标签设置align属性,可以控制当前单元格中内容在水平方向的对齐方式
   * 给 tr标签设置valign=”top/center/bottom”属性,可控制当前行中所有单元格内容的水平方向的对齐方式
   * 给td标签 设置valign属性,可以控制当前单元格中的内容在垂直方向的对齐方式
   * 注意点:
如果tr和td都设置了align/valign属性,那么单元格中的内容会按照td设置的来对齐
  * 外边距和内边距的属性
   【只能给table标签使用】
   * 外边距就是单元格和单元格之间的距离
   默认情况下单元格和单元格之间的外边框距离是2px

Cellspacing=”2px”

   * 内边距就是单元格的边框和文字之间的间隙
   默认情况下内边距是 1

Cellpadding=”5px”

>注意:以上讲解的内容仅仅作为了解,以后在企业开发中都是用css

* __细线表格__
 * 在表格标签中想通过指定外边框为0来实现细线表格是不靠谱的,其实他是将2条线合并成一条线,看起来很不舒服的;
 * 细线表格的制作方式:
   1. 给table标签设置bgcolor
   2. 给tr标签设置bgcolor
   3. 给table标签设置cellspacing=”1px”
>注意:table、tr、td标签都支持bgcolor属性,但只做了解;

    __案例__

<table bgcolor=”black” cellspacing=”1″>
<tr bgcolor=”white”>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor=”white”>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>

![细线表格](http://upload-images.jianshu.io/upload_images/4577276-9b8af5669b0b2054.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


* __表格中的其他标签__
 * 表格标题
在表格标签中提供了一个标签专门用来设置表格的标题,这个标签叫caption,只要将标题写在caption中

 * Caption标签的注意点:
   * caption一定要写在table标签中,否则无效
    * caption一定要紧跟在table标签后面

 * 标题单元格标签
在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做 th标签,只要将当前列的标题存储在这个标签中就会自动居中并且加粗文字

>到此为止我们发现,其实表格中有两种单元格,一种是td,一种是th,td是专门用来存储数据的,th是专门用来存储当前列标题的


* __表格的结构(只需了解)__
 * 由于表格中存储的数据比较复杂,为了方便管理和
  * 表格中存储的数据可以分为4类
①   表格标题
②   表头信息
③   主题信息
④   页尾信息

  * 表格的完整结构

<body>
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
</body>

Caption作用:指定表格的标题
Thead作用:指定表格的表头信息
Tbody作用:指定表格的主题信息
Tfoot作用:指定表格的附加信息
  * 注意点:
   * 如果我们没有编写tbody,系统 会自动给我们添加tbody
   * 如果指定了thead和tbody,那么在修改整个表格的高度时,thead和tbody有自己的默认的高度,不会随着表格的高度变化而变化

* __单元格合并__
  * 水平方向上的单元格合并
   * 可以给 td标签添加一个colspan属性,来指定把某一个单元格当作多个单元格来看待(水平方向)
例如:

<td colspan=”2″> </td>
意思:把当前单元格 当作多个单元格(水平方向)来对待

   * 注意点:
     * 由于把某个单元格当作了多个单元格来看待,所以就会多出一些单元格,所以需要删掉一些单元格才能正常显示
     * 一定要记住单元格合并永远都是向后或者向下合并
  * 垂直方向上的单元格合并
   * 可以给td标签 添加一个rowspan属性 ,来指定把某一个单元格当作多个单元格来看待(垂直方向)
例如:

<td rowspan=”2″> </td>
意义:把当下单元格当作三个单元格(垂直方向)来看待

   *  注意点:同上

* __编程中的一些快捷键__
 * 快速移动选中的代码,上下移动

往上移步 Ctrl+shift+↑(方向键上)
往下活动 Ctrl+shift+↓(方向键下)

 * 快速合并和展开代码(合并和展开的是 某一个标签→鼠标放在标签内部)

合并:Ctrl+ –
展开:Ctrl+ +

 * 快速合并和展开代码(合并和展开选中的所有标签)

合并:Ctrl+shift+ –
展开:Ctrl+shift+ +

 * 快速新启一行

Shift+enter(回车)

* __表单标签(内有上节课2个独立练习)__
 * 什么是表单?
       表单就是专门用来收集用户信息的
 * 什么是表单元素?
 * 什么是元素?

在html中,标签/标记/成分都是指html中的标签
例如:<a> a标签/a标记/a元素

表单元素其实就是html中的一些标签,只不过这些标签比较特殊,在浏览器中所有的表单标签都有特殊的外观和默认的功能

 * 表单的格式: 

<form>
<表单成分>
</form>

 * 常见的表单元素
input标签: 有一个type属性,这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观
   * 明文输入框,type属性赋值text

账号:<input type=”text”>

   * 暗文输入框,type属性赋值password

密码:<input type=”password”>

   * 给输入框设置默认值,可以添加一个value属性

账号:<input type=”text” value=”你想要的账号”>
密码:<input type=”password” value=”你想要的密码”>

   * 单选框,type属性赋值radio

性别:
<input type=”radio” name=”xx”>男
<input type=”radio” name=”xx”>女
<input type=”radio” name=”xx”>保密

>注意点:
    1、默认情况下单选框不会互斥,要想单选框互斥,必须给每一个单选框标签都设置一个name属性,然后name属性还必须设置相同的值;
    2、要想让单选框默认选中某一个框子,那么可以给input标签添加一个checked属性(如果有多个checked,只会默认选最后一个);
    3、在html中如果属性的取值和属性的名称一样,可以只写一个,但是在xhtml中必须写上取值,所以在企业开发中我们推荐大家不要省略取值
   * 多选框 type属性赋值 checkbox
爱好:

<input type=”checkbox”>篮球
<input type=”checkbox”>足球
<input type=”checkbox”>棒球
<input type=”checkbox”>足浴

* **表单标签-按钮**
 * 定义普通按钮(type赋值**button**)
   * 可以通过value属性来给按钮指定标题
   * 作用:配合JS完成一些操作

<input type="button" value="我是按钮">

 * 图片按钮(type赋值**image**)

<input type="image" src="yzslx.jpg">

  * 重置按钮(type赋值**reset**)

<input type=”reset”>

   * 作用:用于清空表单中已经填写好的数据
   * 注意点:
如果想修改重置按钮默认的按钮标题,可以通过value属性来修改

<input type=”reset” value=”清空”>

  * 提交按钮(type赋值**submit**)

<input type=”submit”>

   * 作用:将表单中已经填写好的数据,提交到远程服务器
   * 注意点:
      要想把表单中填写好的数据提交到远程服务器,必须具备两个条件:
     1. 需要给form表单添加一个action属性,通过这个action属性指定需要提交到的服务器地址

<form action=”http://www.xxx.com"&gt;

     2. 需要给需要提交到服务器的表单元素添加一个name属性

账号:<input type=”text”name=”aa”>
密码:<input type=”password” name=”bb”>

  * 隐藏域(type赋值**hidden**)

<input type=”hidden”>

   * 作用:配合提交按钮将一些数据悄悄地提交到服务器
   * 想真正了解隐藏域要等学到Ajax。

* **Label标签**
  * 默认情况下文字和输入框是没有关联关系的,也就是说点击文字,输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么就需要让文字和输入框进行绑定
  * 要想让输入框和文字绑定在一起,那么我们可以使用Label标签
  * 绑定的格式:
   1. 将文字利用label标签包裹起来
   2. 给输入框添加一个id属性
   3. 在label标签中通过for属性和输入框中的id进行绑定即可

<form action=””>
<label for=”aaa”>账号:</label><input type=”text”
id=”aaa”>

<label for=”bbb”>密码:</label><input type=”text”
id=”bbb”>
</form>

    4. 注意:还有虽然不是官方推荐且有局限性的方法,就是直接用label包裹文字和输入框

<label>
账号:<input type=”text”>
</label>

* **datalist标签(仅了解)**
因为众多主流浏览器不支持
  * datalist标签
   * 作用:给输入框绑定待选项
  * datalist格式:

<datalist>
<option value=””>待选项内容</option>
</datalist>

  * 如何给输入框绑定待选列表
   1. 建一个输入框
   2. 建一个datalist列表
   3. 给datalist列表标签添加一个id
   4. 给输入框添加一个list属性,将datalist的id值赋值给list属性即可

<body>
请输入您的车型:<input type=”text” list=”cars”>
<datalist id=”cars”>
<option>宝马</option>
<option>奔驰</option>
<option>本田</option>
<option>丰田</option>
</datalist>
</body>

![datalist标签](http://upload-images.jianshu.io/upload_images/4577276-103b64cacd15788b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

* **表单标签-H5(仅了解)**
因为众多主流浏览器不支持

<form>
可以活动校验输入的故事情节是或不是合乎邮箱的格式
邮箱:<input type=”email”>
可以活动校验输入内容是还是不是是url地址
域名:<input type=”url”>
输入框中只好输入数字
电话:<input type=”number”>
可以透过日历来抉择时间
时间:<input type=”date”>
可以通过取色板来挑选颜色
<input type=”color”>
<input type=”submit”>
</form>

* **表单标签-非input标签(理解)**
* **select标签**
 * 作用:用于定义下拉列表
  * 格式:

<select>
<optgroup label=”分组名称”>
<option>列表数据</option>
<option>列表数据</option>
</optgroup>
</select>

  * 注意点:
    * 下拉列表不能输入内容,但是可以直接在列表中选择内容
    * 可以通过给option标签添加一个selected属性(赋值为selected)来指定列表的默认值
    * 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据


* **textarea标签**
  * 作用:定义一个多行输入框
  * 格式:

<textarea>
</textarea>

  * 注意点:
    * 默认情况下输入框可以无限换行
    * 默认情况下输入框有自己的宽度和高度
    * 可以通过cols和rows来指定输入框的宽度和高度,但是虽然指定了列数和行数,还是可以无线往下输入
    * 默认情况下输入框是可以手动拉伸的

* **video标签(掌握)**
  * 什么是video标签
   * 作用:播放视频
   * 格式:

<video src=””>
</video>

  * Video标签的属性:
   *  src:用于告诉video标签需要播放的视频地址
   * autoplay:用于告诉video标签是否需要自动播放视频

<video src=”images/sb.webm” autoplay=”autoplay”></video>

    * controls:用于告诉video标签是否需要显示控制条
    * poster: 用于告诉video标签视频没有播放之前显示的占位图片
    * loop:一般用于做广告视频,用于告诉video标签视频播放完毕之后是否需要循环播放
    * preload:预加载视频,但是需要注意preload和autoplay相冲,如果设置了autoplay属性,那么preload就失效
    * muted:静音
    * width/height:和image标签一样

* **video标签第二种格式(掌握)**

video>
<source src=”” type=””></source>
<source src=”” type=””></source>
</video>

  * 由于视频数据非常重要,所以五大浏览器厂商都不愿意支持别人的视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候w3c为了解决这个问题,推出了第二个video标签的格式。
  * Video标签的第二种格式存在的意义就是为了解决浏览器适配问题
  * Video元素支持三种视频格式,我们可以把这三种格式都通过source标签指定给video标签,那么以后当浏览器播放视频时他就会从这三种中选择一种自己支持的格式来播放

<video>
<source src=”images/sb1.webm” type=”video/webm”></source>
<source src=”images/sb1.mp4″ type=”video/mp4″></source>
<source src=”images/sb1.ogg” type=”video/ogg”></source>
</video>

  * 注意点:
  当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式,但是显然所有浏览器都通过video标签播放视频还有一个前提条件,就是浏览器必须支持html5标签,否则同样无法播放。在过去的一些浏览器是不支持html5标签的,所以为了让过去的一些浏览器也能够支持video标签来播放视频,那么我们以后可以通过一个js的框架叫做html5media来实现。

* **audio标签(掌握)**
  * 什么是audio标签?
   * 作用:播放音频
   * 格式:
     * 第一种:

<audio src=””></audio>

     * 第二种:

<audio>
<source src=”” type=””></source>
<source src=”” type=””></source>
</audio>

  * 注意点:
Audio标签的使和video标签的使用 基本一样,video中能够使用的属性在audio标签中大部分能够使用,并且功能一样,只有3个属性 不能用:width/height/poster

* **详情和概要标签(理解) **
  * 什么是详情和概要标签?
   * 作用:利用summary标签来描述概要信息,利用details标签来描述详情信息
   * 格式:

<details>
<summary>概要音讯</summary>
详情音信
</details>

* **marquee标签(理解)**
 * 注意点:
marquee标签不是w3c推荐的标签,在w3c官方文档中也无法查询这个标签,但是各大浏览器对这个标签的支持非常好
  * 什么是marquee标签?
   * 作用:跑马灯
   * 格式:

<marquee>内容</marquee>

   * 属性:
     * Direction:设置滚动方向:left/right/up/down(分别是向左/向右/向上/向下),默认向右
     * Scrollamount:设置滚动速度,值越大就越快
     * Loop:设置滚动次数,默认是-1,也就是无限滚动
     * Behavior:设置滚动类型,有2个取值:

   1. slide(滚到边界停止);
   2. alternate滚动到边界就弹回。

* **html中被废弃的标签**
  * 为什么html有一部分标签被废弃掉?
因为当前html中的标签只有一个作用,就是用来添加语义;
而早期的html标签中有一部分标签是没有语义的,有一部分标签是用来修改样式的,所以部分标签就被淘汰了。
比如:

<font> <b> <u> <i> <s>

以上这些标签都是没有语义的,都是用来修改样式的
   * b(bold)加粗文本,没有语义
   * u(underlined)给文本添加下划线,没有语义
   * i(italic)将文本倾斜,没有语义
   * s(strikethrough)给文本添加删除线,没有语义
  * 注意点:
   以后在企业开发中,不到万不得已一定不要使用这些被废弃的标签
   如果一定要使用,一般情况都是用来作为CSS的钩子来使用(i标签做一个小图标)

  * 推出了代替标签

strong==b
ins==u
em==I
del=s
strong语义:定义紧要性强调的文字
ins(inseted)语义:定义插入的文字
em(emphasized)语义:定义强调的文字
del(deleted)语义:定义被删去的文字

>记住一点,只需关注标签的语义,不用关注标签的样式


* **字符实体(理解)**
  * 在html中对 空格/回车/tab 不敏感,会把多个空格/回车/tab当作一个空格来处理
  * 什么是字符实体?
在html中有的字符是被html保留的,有的html字符在html中是有特殊含义的,是不能在浏览器中直接显示出来的,那么这些东西要想显示出来就必须通过字符实体。

字符实体前边肯定要抬高分号(;)
就是一个空格,有多少个 就有稍许个空格。
< 小于符号 < less than

 大于符号 >    greater than

© 版权符号 ©

给您们讲讲我的足球队吧。

图片 2

您见过一个人集帅气、可爱、幽默于一身么?大家回回热身跑2400米累成子时,她依然毫不动容,而看到多少个闺女走过来,她脸蛋的冰一下子就融化掉,连摔球的动作都变得暖和柔和。有一遍大家被进球,她对着篮球场上怒吼让队员赶紧归位,转过来对着板凳席席吐了下舌头,然后一脸怒容把球摔在地上,然后又调皮地抱住。

图片 3

还有次赛前,她对我们毫不留情地说,“I don’t care how they are gonna be,
but I want you guys to play fucking hard today, for our team, for
Reina.”

(我tm不在乎她们踢得怎么着,可是你们先天tm都给我好好踢,为了大家球队,也为了Reina)

图片 4

她的帅气不只是颜值,是骨子里带着的潇洒不羁。头发随便挽在脑后,总是穿着球队运动服,运动鞋,裤脚的拉链永远是半开的。(大致是因为舒服)我想假诺她在电影里反串,没人能认得出去。结果我前几天历次穿队服加运动鞋总有种迷之神气。(如下图)

图片 5

他是我们的足球训练。美帝人民听不懂普通话,如若大家讲中文时提到何人名,会令人认为大家在议论他。所以私底下大家叫他寇池(coach)。

寇池当过守门员,喜欢用手玩球。陶冶时他总喜欢八只手抱着球,zhuai到地上,然后稳稳地接住。就好像这样能给他增添点讲话的力道和自信。她站着时两条腿总是分开的,站得很稳。她肩膀很宽,让您认为悍不动她。

哎呀哎,追根究底,就是一个字——

图片 6

嗯,我是寇池的迷妹。

本身对他的佩服不亚于当时对于校服的迷之信仰。

有五回大家踢最强高中球队。赛前,寇池带大家去她女对象(大家叫他小寇池)教室放上次比赛摄像,指导备战。正讲到重点,摄像忽然卡了一秒,大寇池皱着眉转向小寇池,“paused?”小寇池瞪大了眼睛一脸懵逼,“what?”然后视频忽然识相地继续放了。就这一秒钟对视,啊,好萌,真的好萌。

图片 7

您可能会问,寇池怎么有女对象。难道是?嗯对,她们就是一对。大寇池尤其帅,而小寇池尤其尤其的萌。她大约才一米五几吧,手小小的,脚小小的,全身都很小,像个幼童。听他们讲有两遍队里没人还伪造学生上去踢过比赛,竟无一人发现。她的衣衫瞧着都大大的,鞋子小小的,刚从裤脚里冒出一个头,更显出她脚的小。她连连站得笔直,散发着和大寇池相似的很man的气场,然而一见到大寇池就变软了。

图片 8

有一遍吃晚饭时一小伙伴去和两个寇池打招呼,回来时一度被麻酥了——刚刚七个寇池吃饭的姿势都如出一辙,叉东西,送到嘴里,然后嚼,一下须臾间的动作真的一模一样,看到自身后来同时转过来跟我打招呼,语气都同样,她俩一样的发型,一样的衣着,一样的动作,望着跟双胞胎一样。不过一个那么帅,一个那么萌。

(由于道具组跟不上请脑补该动图)

图片 9

我抓起一把狗粮就往嘴里塞。

好甜啊。

您说,世界上怎么有诸如此类萌的一对恋人?

从而每回操练来看他们俩在相互踢球,我就在心底说,

“这狗粮,我吃!”