天道酬勤,学无止境

H5学习笔记3:HTML5表单及其他新增和改良元素

1.新增元素与属性

新增属性

1. 表单内元素的form属性:在HTML5里,表单内的从属元素可以写在form外面。

 <form id="testform">
<input type="text"> 
</form> 
<!-- 下面的textarea不必写在上面的form表单内 --> 
<textarea form="testform"></textarea>

2. 表单内元素的formaction属性:可以为所有的提交按钮,诸如、、等增加不同的fromaction属性,使得在单击不同的按钮时可以将表单提交到不同的页面。

<form id="testform" action="server.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
<input type="submit" name="s3" value="s3" formaction="s3.jsp">提交到s3 </form> 

3. 表单内元素的formmethod属性:对每个表单元素分别制定不同的提交方法(POST或GET)

<form id="testform" action="serve.jsp">
姓名:<input type="text" name="name"><br>
<input type="submit" value="POST提交" formmethod="post">
<input type="submit" value="GET提交" formmethod="get"> </form>

4. 表单内元素的formenctype属性:对表单元素分别制定不同的编码方式,在HTML5之前,表单内有一个enctype属性,它用来指定表单被提交到服务器之前应该如何对数据进行编码,它有三个值:

①appliction/x-www-form-urlencoded(默认)
②multipart/form-data(文件上传)
③text/plain

<form action="server.jsp" method="post">
    <input type="text" name="name" value="test"><br>
    文件:<input type="file" name="files">
    <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
    <input type="submit" value="提交">
</form>

5. 表单内元素的formtarget属性:它用于指定在何处打开表单提交后所需加载的页面,它的属性值如下:

①_blank:在新的窗口中打开
②_self:在本窗口中打开(默认)
③_parent:在当前窗口的父窗口中打开
④_top:在当前窗口中打开
⑤framename:在指定的框架(frame)中打开

<form id="testform" action="server.js">
  <input type="submit" name="s1" value="v1" formaction="s1.jsp"
  formtarget="_self">提交到s1
  <input type="submit" name="s2" value="v2" formaction="s2.jsp"
  formtarget="_blank">提交到s2
</form>

6. 表单内元素的autofocus属性:为文本框、选择框或按钮框加上autofocus属性后,当页面打开时,这些控件将自动获得焦点。一个页面只能有一个控件具有autofocus属性。

<input type="text" autofocus>

7.表单内元素的required属性:应用了此属性的输入框,在表单提交时,会检查是否已输入内容,如果没有输入内容,则会自动提示用户输入。

<input type="text" required>

8.表单内元素的labels属性:为所有能使用label元素的表单控件定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。(很难理解)

代码详见《HTML5与CSS3权威指南》第57页
9.标签的control属性:在标签(label元素)内部放置一个表单元素,并通过该标签的control属性来访问该表单。

<!DOCTYPE html>
<html>
  <head>
    <title>标签的control属性使用示例</title>
    <meta charset="UTF-8">
    <script>
      function setValue () {
        var label = document.getELementById("label");
        var textbox = label.control;
        textbox.value = "621000";
      }
    </script>
  </head>
 
  <body>
    <form>
      <label id="label">
        邮编:<input type="text" maxlength="6">
        <small>请输入六位数字</small>
      </label>
      <input type="button" value="设置默认值" onclick="setValue()">
    </form>
  </body>
</html>

10.文本框的placeholder属性:文本框(text或textarea)处于未输入状态时显示的输入提示。另外我们可以在CSS中控制placeholder的显示样式

<input type="text" placeholder="Input Me">

11.文本框的list属性:单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,此datalist元素列表为用户输入提供便捷选择。我们还可以使用CSS来控制此datalist不显示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>list属性示例</title>
  </head>
  <body>
    text: <input type="text" name="greeting" list="greetings">
    <!-- 使用style="display:none;"将datalist元素设定为不显示 -->
    <datalist id="greetings" style="display:none;">
      <option value="Good Morning">Good Morning</option>
      <option value="Hello">Hello</option>
      <option value="Good Afternoon">Good Afternoon</option>
    </datalist>
  </body>
</html>

12.文本框的autocomplete属性:它可以指定’on’、‘off’和’'三个值,当指定为’on’时,可以显式指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表

<iniput type="text" name="geenting" autocomplete="on" list="greetings">

13.文本框的pattern属性:对input元素使用pattern属性,并将其值设为某个格式的正则表达式,在提交时会对用户输入进行检查,检查其输入内容是否符合给定的格式。

<form>
  请输入指定格式的内容:<input type="text" pattern="[0-9][A-Z]{3}" name="part">
  <input type="submit">
</form>

14.文本框的selectionDirection属性:针对input元素和textarea元素,当用户用鼠标选取其文字部分时,可以使用此属性来获取选取的方向,当正向选取文字时,该属性值为’forward’,反向时为’backward’。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>selectionDirection属性使用示例</title>
    <script>
      function alertSelectionDirection () {
        var control = document.forms[0]['text'];
        var direction = control.selectionDirection;
        alert(direction);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" name="text">
      <input type="button" value="点击我" onclick="alertSelectionDirection()">
    </form>
  </body>
</html>

15.复选框的indeterminate属性:以前的复选框checkbox只有选中和未选中两种状态,在HTML5中,可以通过JavaScript对该元素使用indeterminate属性,以说明该复选框处于"尚未明确是否选取状态"

<input type="checkbox" indeterminate id="cb">indeterminate属性测试
<script>
  var cb = document.getElementById('cb');
  //将indeterminate属性设为true
  cb.indeterminate = true;
</script>

16.image提交按钮的height属性和width属性:针对类型为image的input元素,HTML5增加了width和height属性,分别指定图片的宽度和高度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>image类型的input元素使用示例</title>
  </head>
  <body>
    <form>
      姓名: <input type="text" name="name">
      <input type="image" src="edit.gif" alt="编辑" width=23 height=23>
    </form>
  </body>
</html>

17.textarea元素的maxlength属性和wrap属性

maxlength属性使用整数值设定该textarea元素可输入的最大字符数
wrap属性可以指定soft和hard两个值:当指定为hard时,用户输入时的自动换行会被记录,即在换行处会插入一个换行标志,那么后台拿到的数据也是换行的,而soft则不会有这个效果。使用hard属性时必须指定textarea的cols属性值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>textarea元素新增的maxlength属性与wrap属性</title>
  </head>
  <body>
    <form action="test.php" method="post">
      <textarea name="name" maxlength=100 rows=5 wrap="hard" cols=5>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

新增和改良的input元素种类

  • search:与text文本框类似,专用于搜索
  • tel:与text文本框相似,专用于电话号码
  • url:与text文本框相似,要求用户必须在其中输入url格式的内容
  • email:与text文本框相似,要求用户必须在其中输入正确的email格式的内容
  • date、month、week、time、dateimte-local:各种日期与实践输入文本框
  • number:与text文本框相似,但其内容必须为数字,否则提交后内容为空
  • range:只允许输入一段范围内数值的文本框,具有min属性和max属性
  • color:颜色选择文本框

上面的新的属性在各浏览器中会表现的不一样

1.url类型:url类型的input专门用于输入url地址的文本框,若输入内容格式不符,则不允许提交

<input type="url" name="url" value="http://www.microsoft.com">

2.email类型:email类型的input专门用于输入email地址的文本框,若输入内容格式不符,则不允许提交,它还有一个multiple属性,这个属性允许用户输入多个email地址,使用逗号来分割

<input type="email" name="email" value="3494688@qq.com">
<input type="email" name="emails" multiple value="3494688@qq.com,kaindy7633@gmail.com">

3.date类型:date类型的input允许用户输入日期类型的内容,通常会以日历的形式向用户展示,方便用户选择输入。

<input type="date" name="date" value="2016-0101">

4.time类型:time类型的input是专门用来输入时间的文本框,并且在提交时会对输入的内容进行有效性检查。

<input type="time" name="time" value="10:00">

5.datetime-local类型:datetime-local类型专门用来输入本地日期和时间的文本框,并且在提交时会对输入内容进行有效性检查。

<input type="datetime-local" name="datetime-local" value="2016-01-01T10:00:15">

6.month类型:month类型专门用来输入月份的文本框,并在提交时做有效性检查

<input type="month" name="month" value="2015-10">

7.week类型:week类型专门用来输入周号的文本框,并在提交时做有效性检查

<input type="week" name="week" value="2010-W40">

8.日期与时间类型元素的属性

①所有用于输入日期和时间的元素(date、time、dateime-local、month、week)都具有一个step属性,该属性用于对用户的选择进行限定

<input type="date" name="date" step="3">

对于datetime-local属性,使用step=60或60的整数倍则表示最小的输入单位是分钟,而不为整数倍时,表示可以输入以秒为单位的值

②在JavaScript中,使用stepUp方法和stepDown方法,可以变更这些具有step属性的输入值

document.forms[0].date.stepUp(5);

③在使用这些日期和时间的元素时,可以通过使用min属性和max属性来限定输入值得范围

<input type="date" name="date" min="2016-01-01" max="2016-01-31">

④所有用于输入日期和时间的元素都有一个valueAsDate属性,用于设置或获取UTC日期和时间

⑤所有用于输入日期和时间的元素都有一个valueAsNumber属性,用于设置或获取元素中所设置的日期和时间呗转换后的整数值(1970年1月1日0时0点0秒后所经过的毫秒数),也就是时间戳。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UFT-8">
    <title>valueAsDate属性使用示例</title>
  </head>
  <body>
    <form>
      <input type="date" name="date" id="date">
      <input type="button" value="点击我" onclick="alert(document.getElementById('date').valueAsNumber)">
    </form>
    
    <script>
      document.getElementById('date').valueAsDate = new Date();
    </scriipt>
  </body>
</html>

9.number类型:专门用来输入数字的文本框,并在提交时进行检查,若不符则会以空白内容提交。number类型也具有max、min和step属性

<input type="number" name="number" value="25" max="100" min="10" step="5">

JavaScript为number元素提供了valueAsNumber属性,可以利用该属性设置和读取该元素中的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>valueAsNumber属性使用示例</title>
    <script>
      function sum () {
        var number1 = document.getElementById('number1').valueAsNumber;
        var number2 = document.getElementById('number2').valueAsNumber;
        document.getElementById('result').valueAsNumber = number1 + number2;
      }
    </script>
  </head>
  <body>
    <form>
      <input type="number" id="number1"> + 
      <input type="number" id="number2"> =
      <input type="number" id="result" readonly>
      <input type="button" value="计算" onclick="sum();">
    </form>
  </body>
</html>

10.range类型:一种只允许输入一段范围内的数值的文本框,具有max属性和min属性,也具有step属性

<input type="range" name="range" value="25" max="100" min="10" step="5">

11.search类型:它是一种专门用来输入搜索关键词的文本框。外观上可以用CSS样式改写:

input[type="search"] {-webkit-appearance: textfield;}

12.tel类型:它被设计用来输入电话号码的专用文本框,但它并没有校验规则,我们可以通过pattern属性来指定对用户输入内容进行验证。

13.color类型:color类型的input元素用于选取颜色,其提供了一个颜色选择器。

选择背景:
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent = this.value;">
<span id="currentColor"></span>

14.简单表单示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>简单表单示例</title>
  </head>
  <body>
    <form name="form1">
      <label for="username">姓名:</label>
      <input type="text" name="username" id="username" required><br>
       <label for="age">年龄:</label>
       <input type="number" name="age" id="age" min="0" max="100"><br>
       <label for="birthday">出生日期:</label>
       <input type="date" name="birthday" id="birthday"><br>
       <label for="Email">Email:</label>
       <input type="email" name="email" id="email" required><br>
       <label for="url">个人主页:</label>
       <input type="url" name="url" id="url"><br>
       <label for="memo">个人简介:</label>
       <textarea name="memo" id="memo" required></textarea><br>
       <input type="submit">   
    </form>
  </body>
</html>

对新的表单元素使用样式

output元素的追加
output元素定义不同类型的输出,比如计算结果或脚本的输出,它必须书写在表单内部

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>output元素示例</title>
    <script>
      function value_change() {
         var number = document.getElementById('range1').value;
         document.getElementById('output1').value = number;
      }
    </script>
  </head>
  <body>
    <form id="testform">
      请选择一个数值:
      <input type="range" id="range1" min=0 max=100 step=5 value=10 onchange="value_change()">
      <output id="output1">10</output>
    </form>
  </body>
</html>

2.表单验证

1.自动验证
在HTML5中,通过对元素使用属性的方法,可以实现对表单提交时执行的自动验证功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
  </head>
  <body>
    <form method="post">
      <input type="text" required pattern="^\w.*$">
      <input type="submit">
    </form>
  </body>
</html>

2.取消验证
有两种方法可以取消表单验证:

  • 利用form元素的novalidate属性来关闭整个表单验证
  • 利用input元素或submit元素的formnovalidate属性

3.显式验证
checkValidity方法,调用该方法,可以显式的对表单内所有元素内容或单个元素内容进行有效性验证,它返回布尔值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>checkValidity示例</title>
    <script>
      function check() {
        var email = document.getElementById('email');
        if(email.value == '') {
          alert('请输入Email地址');
          return false;
        } else if(!email.checkValidity()) {
          alert('请输入正确的email地址');
          return false;
        } else {
          alert('您输入的Email地址有效');
        }
      }
    </script>
  </head>
  <body>
    <form id="testform" onsubmit="return check();" novalidate="true">
      <label for="email">Email:</label>
      <input type="email" name="email" id="email">
      <input type="submit">
    </form>
  </body>
</html>

3.增强的页面元素

1.新增的figure元素与figcaption元素
figure元素用来表示页面上的块独立的内容,它可以表示图片、统计图表或示例代码

figcaption元素表示figure元素的标题,它从属与figure必须书写在figure元素的内部

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>figure元素示例</title>
  </head>
  <body>
    <figure>
      <img src="s1.jpg" alt="森林">
      <figcaption>森林</figcaption>
    </figure>
  </body>
</html>

2.新增的details元素与summary元素
details元素为一种用于标识该元素内部的子元素可以展开、收缩显示元素。

summary元素从属于details元素,在用鼠标点击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或收缩。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>details元素使用示例</title>
    <script>
      function detail_ontoggle(detail) {
        var p = document.geElementById('p');
        if(detail.open) {
          p.style.visibility = 'visible';
        } else {
          p.style.visibility = 'hidden';
        }
      }
    </script>
  </head>
  <body>
    <details id="detail" ontoggle="detail_ontoggle(this)" style="curosr:pointer">
      <summary>精武风云</summary>
      <p id="p" style="visibility:hidden">陈真(甄子丹 饰)当年为报杀师之仇,独创虹口道场...(精武风云电影介绍)</p>
    </details>
  </body>
</html>

3.新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的内容

<p><mark>HTML5</mark>是近十年Web开发标准最巨大的飞跃</p>

4.新增的progress元素
progress元素代表一个任务的完成进度,这个进度可以是不确定的,表示进度正在进行。

该元素具有两个表示当前任务完成情况的属性,value属性表示已完成了多少工作量,max属性表示总共有多少工作量。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>progress元素的使用示例</title>
    <script>
      var progressBar = document.getElementById('p');
      function button_onlcick() {
        var progressBar = document.getElementById('p');
        progressBar.getElementByTagName('span')[0].textContent = "0";
        for(var i=0; i<=100; i++) {
          updateProgress(i);
        }
      }
      function updateProgress(newValue) {
        var progressBar = document.getElementById('p');
        progressBar.value = newValue;
        progressBar.getElementByTagName('span')[0].textContent = newValue;
      }
    </script>
  </head>
  <body>
    <section>
      <h2>progress元素的使用示例</h2>
      <p>完成百分比:<progress id="p" max=100><span>0</span>%</progress></p>
      <input type="button" onclick="button_onclick()" vlaue="请点击">
    </section> 
  </body>
</html>

5.新增的meter元素
meter元素表示规定范围内的数量值,如磁盘使用量,投票比例等,它有6个属性

  • value:在元素中标示出来的实际值
  • min:指定规定范围时允许使用的最小值
  • max:指定规定范围时允许使用的最大值
  • low:规定范围的下限值,必须小于或等于high属性的值
  • high:规定范围的上限值
  • optimum:最佳值,该属性值必须在min属性值和max属性值之间
<p>磁盘使用量:<meter value="40" min="0" max="160">40/160</meter>GB</p>

6.新增的dialog元素
dialog元素代表一个对话框

在默认情况下,dialog元素是隐藏的,我们可以在JavaScript代码中使用元素的show方法显示dialog元素,使用close方法隐藏dialog元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="打开对话框" onclick="document.getElementById('dg').show();">
    <dialog id="dg" style="width: 9%; text-align: center;">
      <h1> 用户登录 </h1>
      <main>
        <form class="" action="index.html" method="post">
          <label for="txtName" value="用户名">
            <input type="text" id="txtName">
          </label><br>
          <label for="txtPassword" value="密码">
            <input type="password" id="txtPassword">
          </label><br>
          <input type="button" value="登录">
          <input type="button" value="关闭" onclick="document.getElementById('dg').close();">
        </form>
      </main>
    </dialog>
  </body>
</html>

可以使用dialog元素的showModal方法以模式对话框的形式显示dialog元素

<input type="button" value="打开对话框" onclick="document.getElementById('dg').showModal();">

如果要在页面打开时显示对话框,可以使用dialog元素的open属性

<dialog id="dg" open style="width:9%;text-align:center;">

可以使用dialog元素的returnValue属性为对话框设置或返回一个值

<input type="button" value="打开对话框" onclick="document.getElementById('dg').show(); document.getElementById('dg').returnValue='返回的值';">
 
<input type="button" value="关闭" onclick="document.getElementById('dg').close(); alert(document.getElementById('dg').returnValue);">

7.改良的a元素
在HTML5中,为a标签添加了download属性,用户点击带有此属性的链接后,将直接下载链接所指向的资源文件。

<a href="html5.jpg" download="HTML5权威指南"><img src="html5.jpg"></a>

用户点击链接后将直接下载html5.jpg这个图片文件,且文件名为’HTML5权威指南’

8.改良的ol列表
在HTML5中,为ol元素添加了start属性和reversed属性

如果希望列表编号不是从1开始,可以使用start属性自定义开始编号

<ol start=5>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
</ol>

如果需要对列表进行反向编号,可以使用ol列表的resersed属性

<ol start=5 resersed>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
</ol>

9.改良的dl列表
dl列表可以用来定义文章或网页上的术语解释

<dl>
  <dt><dfn>RSS</dfn></dt>
  <dd>RSS也叫聚合RSS是在线共享内容的一种简易方式....</dd>
  <dt><dfn>博客</dfn></dt>
  <dd>博客,又译为网络日志、部落格或部落阁等,是一种通常由个人管理...</dd>
</dl>

它也可以用来表示一些页面或article元素中内容的辅助信息

<dl>
  <dt>作者</dt>
  <dd>Kaindy</dd>
  <dt>出版社</dt>
  <dd>机械工业出版社</dd>
  <dt>类别</dt>
  <dd>网络开发</dd>
</dl>

10.加以严格限制的cite元素
cite元素表示作品(一本书、一篇文章、一首歌曲)的标题。在HTML4中cite可以用来表示作者,但在HTML5中明确规定不能使用cite元素表示包括作者在内的任何人名。

<p>我最喜欢的电影是由甄子丹主演的<cite>精武风云</cite></p>

11.重新定义的small元素
small元素定义了更具体的、专门用来标识所谓"小字印刷体"的元素,通常用在诸如免责声明、注意事项、法律规定、版权相关等声明文字中。

12.安全性增强的iframe元素
略…

13.增强的script元素
在HTML5中,对于script元素,新增async属性和defer属性,它们的作用都是为了加快页面的加载速度,使得脚本代码的读取不再妨碍页面上其他元素的加载。

当我们使用async属性时,脚本文件下载完毕后,会立即执行onload事件处理函数

<script async src="xxx.js" onload="myInit1()"></script>
<script async src="aaa.js" onload="myInit2()"></script>

而当我们使用defer属性时,脚本文件下载完毕后,不会立即执行onload事件处理函数,而是要等到页面全部加载完成后,才执行该脚本文件的onload事件处理函数

<script defer src="xxx.js" onload="myInit1()"></script>
<script defer src="aaa.js" onload="myInit2()"></script>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • HTML5、CSS3、移动web开发——学习笔记(未完)
    目录【一】、HTML5【二】、CSS3【三】、移动Web开发之流式布局 【一】、HTML5 目录什么是HTMLH5 新增语义化标签H5 新增多媒体标签H5 新增 input 表单 、表单属性 目标了解 H5 新变化掌握 H5 新增语义化标签掌握 H5 新增多媒体标签掌握 H5 新增 input 表单、表单属性 一、 什么是HTML5 1. HTML5简介 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言,具有新的元素,属性和行为 XHTML可扩展超文本标记语言HTML5XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。基础学习的是XHTML具有更大的技术集,允许更多样化和强大的网站和应用程序。增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性。这个集合有时称为HTML5和它的朋友们(包括新的css、js),通常缩写为HTML5 2. 广义的HTML5 广义的HTML5是HTML5本身 + CSS3 + JavaScript这个集合有时称为HTML5和朋友们,通常缩写为HTML5虽然HTML5的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势HTML5 MDN介绍:https://developer
  • 前端工程师入门
    前端快速入门到高级工程师 概述 前端开发工程师是Web前端开发工程师的简称,2007年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程,主要包括三个要素:HTML(标准通用标记语言下的一个应用)、级联样式表和JavaScript。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。 html(超文本标记语言) 什么是 HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)HTML 不是一种编程语言,而是一种标记语言(markup language)标记语言是一套标记标签(markup tag)HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的,比如 和 标签对中的第一个标签是开始标签,第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 html练习 css(级联样式表) CSS 概述 CSS 指层叠样式表 (CascadingStyleSheets)
  • HTML学习笔记——HTML5新增标签和特性
    1.常用的新标签 标签名作用header定义页面文档的头部,页眉footer定义页面文档的底部,页脚nav定义页面的导航部分article定义文章section定义文档中的节,区段aside定义页面的侧边 与表单相关的新增标签: 1.datalist标签:定义选项列表,与input配合使用。作用:datalist中设置列表内容后,文本框输入关键字就可以提示出列表中相应的内容。 使用步骤: 第一步:input标签定义list属性,设置相应的属性名; 第二步:在datalist标签中使用id属性绑定list定义的属性名。 请输入明星名字:<input type="text" list="star"> <datalist id="star"> <option>张学友</option> <option>郭富城</option> <option>刘德华</option> <option>郭德纲</option> <option>刘晓庆</option> <option>张三</option> </datalist> 2.fieldset标签:与legend标签和表单标签搭配使用,将表单的相关元素进行分组打包,也就是将表单的相关元素装到一个方框内,legend用于设置方框左上角的标题。 <fieldset> <legend>用户登录</legend> 用户名:<input type="text
  • HTML5+CSS3基础知识汇总 (HTML5篇)
    文章目录 1. HTML5的介绍2. HTML5的优势3. HTML5前景趋势4. H5 新增语义化标签5.H5 新增多媒体标签 5.1 <audio>音频标签 5.1.1 音频格式 5.1.2 常用属性 5.1.3 代码格式 5.2 <video>视频标签 5.2.1 视频格式 5.2.2 常用属性 5.2.3 代码格式 6. H5新增表单 6.1 新增表单元素 6.2 新增表单属性 1. HTML5的介绍 1.1 HTML介绍 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 用于取代HTML4与XHTML的新一代标准版本,所以叫做HTML5 1.2 HTML新增特性 HTML5设计目的是为了在移动设备上多媒体。 新增了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特殊特性,性能与集成特性,CSS3特性。 1.3 HTML5开发手者手册指南 参考文献:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML 2. HTML5的优势 提高可用性和改进用户的友好体验更好的语义标签可以给站点带来更多的多媒体元素(视频和音频)可以很好的替代flash和Silverlight当涉及到网站的爬取和索引的时候
  • 粉阿吉整理(5)之------H5 新增标签
    -1. 结构 写法上更加的简单化(DOCTYPE/charset)相关面试题(DOCTYPE) 1). DOCTYPE声明必须是HTML文档的第一行,位于标签之前 2). DOCTYPE声明不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令 3). DOCTYPE 3种类型:HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset 4). 如果html中没有加上DOCTYPE**可能在不同浏览器出现bug**,所以html加上DOCTYPE是至关重要 -2. 新增标签 1.头部信息 header: 2.页脚 footer: 3.导航链接的部分 nav: 4.主体 main: 元素中的内容对于文档来说应当是唯一的 注意: 在一个文档中,不能出现一个以上的 <main> 元素 <main> 元素不能是以下元素的后代: <article>、<aside>、<footer>、<header> 或 <nav> 5.独立的内容区块 section: 类似div 6.侧边栏导航 aside: 7.文章标签 article: 8.标签 hgroup: 用于对网页或区段(section)的标题进行组合 主副标题 9.标记 mark: 内容显示背景颜色,可以修改 10.地址标签 address: 写在侧边栏多一点
  • 前端学习Html5(day1)
    一、什么是HTML5 1、HTML的一个最新的版本,也是web的一个标准。 2、支持 所有的主流浏览器都支持h5(chrome,firefox,safari。。。)。IE9及以上支持h5(有选择的支持,并不会全部支持),但是ie8及以下不支持h5. 3、相对于h4 抛弃了一些不合理不常用的标记和属性,.新增了一些标记和属性–表单(这点) 4、增加了其它的新特性 语义特性,本地存储特性,网页多媒体,二维三维,特效(过渡,动画) 5、设计目的是为了在移动设备上支持多媒体 二、页面结构新的元素 这里只记录比较常见的 <article> 定义页面的侧边栏内容 <command> 定义命令按钮,比如单选按钮、复选框或按钮 <footer> 定义 section 或 document 的页脚。 <header> 定义了文档的头部区域 <nav> 定义运行中的进度(进程)。 <section> 定义文档中的节(section、区段)。 三、新增标签 1、<audio> 音频 src controls autoplay loop 2、<video> src 视频路径 controls 属性规定浏览器应该为视频提供播放控件 autoplay 是否自动播放 就是页面加载完之后,会自动播放 loop 是否循环播放 poster 指定视频还没有完全下载完毕,或者用户没有点击播放前显示的封面。
  • 【前端学习笔记day01】前端学习笔记目录
    前端学习笔记 前端开发概述HTML 2.1. html概述和基本结构 2.2. html标题标签 2.3. html段落标签、换行标签与字符实体 2.4. html块标签、含样式的标签 2.5. html图像标签、绝对路径和相对路径 2.6. html链接标签 2.7. html列表标签 2.8. html表单 2.9. html表格 2.10. 页面布局概述 2.11. table布局及实例CSS 3.1. css基本语法及页面引用 3.2. css文本设置 3.3. css颜色表示法 3.4. css选择器 3.5. css盒模型 3.6. 盒模型的实际尺寸 3.7. 盒模型使用技巧及相关问题 3.8. css元素溢出 3.9. 块元素、内联元素、内联块元素 3.10. 浮动 3.11. 定位 3.12. background属性 3.13. 特征布局实例讲习Photoshop 4.1. 常用图片格式 4.2. photoshop常用图片处理技巧 4.3. ps效果图制作实例 4.4. photoshop批量切图技巧 4.5. Photoshop制作雪碧图技巧前端页面开发流程HTML5与CSS3 6.1. CSS权重 6.2. CSS3新增选择器 6.3. CSS3圆角、rgba 6.4. CSS3 transition动画 6.5. CSS3 transform变换 6.6
  • HTML5笔记(菜鸟教程)
    写了一篇笔记了,觉得整个页面效果乱乱的,这篇文章就再改变一下试一下小节加粗康康有没有好一点。最近希望自己学习效率可以高一点再高一点,最近网课上的我负能量满满这样不好不好。不知道大家写博客的时候用的是Markdown编辑器还是富文本(小朋友你是否有很多问号) boolean 数据类型 boolean 变量存储为 8 位(1 个字节)的数值形式,但只能是True 或是 False。 1.HTML5简介: HTML5设计目的是在移动设备上支持多媒体 (1).添加了很多语义元素 (2).新的属性 (3).完全支持css3有更多页面体验效果 (4).可以进行video和audio的简单页面播放 (5).可以2D/3D绘图 (6)本地存储 (7).本地SQL数据 (8)可以简单的开发应用 2.HTML5 canvas:用于图形的绘制,通常写在脚本里(javascript) (1).创建一个画布 tip:页面可以有多个canvas,用style来定义边框否则没有边框和内容 (2).javascript绘制图像 第一句:找到canvas元素 第二句:创建context对象 第三四句:绘制一个红色的矩形 (3).canvas路径 moveto(x,y):起点坐标 llineto(x,y):终点坐标 stroke:绘图 绘制圆: (4).canvas文本 font:定义字体 fillText(
  • Web前端学习笔记第一篇HTML5
    Web前端学习笔记第一篇 第一篇 HTML5第1章 HTML5学习概述1.1 认识HTML51.2 学习HTML5前的工作准备1. 头部内容2. 主体内容 第二章 HTML5常见的块级标签和行级标签2.1 常见的块级标签2.2 常见的行级标签2.3 HTML5新增结构标签简介 第三章 HTML5表格3.1 HTML5表格简介3.2 表格的基本属性3.3 行和列的属性3.4 表格的结构化与直列化3.4.1 表格的结构化3.4.2 表格的直列化 3.5 章节案例:完成“特别休假申请单” 第四章 HTML5表单4.1 表单简介<form></form>4.1.1 method属性4.1.1 enctype属性 4.2 input输入框4.2.1 input属性4.2.2 各种输入框 4.3 其他表单元素4.3.1 select 下拉选择控件4.3.1.1 select 标签的属性4.3.1.2 option 标签的属性4.3.1.3 利用<optgroup> 标签分组 4.3.2 textarea文本域4.3.3 button按钮 4.4 HTML5智能表单4.4.1 表单分组4.4.3 表单新增元素及属性 第一篇 HTML5 第1章 HTML5学习概述 HTML:HyperText Markup Language(超文本标记语言) 1.1 认识HTML5 HTML5: 万维网联盟
  • html+ css基础笔记_表单扩展_h5_标签_part2_1
    1. HTML 与 XHTML区别 ?(面试会问) DOCTYPE文档及编码 元素大小写 属性布尔值 属性引号 图片的alt属性 单标签写法 双标签闭合 2. strong与b标签、em与i标签的区别?(面试会问) strong和em都是表示强调的标签,前者的强调程度强一些 表现形态都是 文本加粗 和 文本斜体 区别:strong和em具备语义化(推荐使用),b与i不具备,没有意义,但是i可以简化使用class,简化选择器,与内联span一起使用,例如:淘宝官网 3. 引用标签? blockquote : 引用大段的段落解释 q : 引用小段的短语解释 abbr : 缩写或首字母缩略词 address : 引用文档地址信息 cite : 引用著作的题目 4. iframe标签嵌套网页?(这个可以做钓鱼网站,直接跳到某网站,然后获取账号和密码,所以要注意看网址) 会创建包含另一个文档的内联框架(行内框架),可以引入其他的html到当前html中显示。 主要是利用iframe的属性进行样式的调节。常见属性如下: frameborder:规定是否显示框架周围的宽度 width:定义iframe的宽度 height:高度 scrolling:规定是否在iframe中显示滚条,yes no src:规定在iframe中引入的URL srcdoc:规定在iframe中显示的页面内容 应用场景
  • H5新增特性
    什么是H5 HTML5是HTML标准的第五次修订和最新版本。它提供的新功能不仅提供富媒体支持,而且还增强了对创建Web应用程序的支持,该Web应用程序可以比以前更轻松,更有效地与用户,其本地数据和服务器进行交互。 怎样声明H5文档 HTML5的文档类型非常简单。要表明您的HTML内容使用HTML5,只需使用: <!DOCTYPE html> H5有哪些新特性 1. 语义化标签 <header></header> <nav></nav> <section></section> <footer></footer> <article></article> 2. 增强型表单 <input type="email" /> //type属性: email url number range color date month week time 3. 新增表单元素 datalist元素keygen元素output元素 4. 新增表单属性 placehoderrequiredminmax… 5. 多媒体:使视频和音频成为开放网络中的一流公民。 <video></video> <audio></audio> 6. canvas 7. 地理定位 8. 拖拽 9. 本地存储 localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 10
  • web前端学习大纲
    一、HTML5 + CSS3 目标:能够独立把美工提供的PSD效果图还原成PC端静态代码页面 HTML5 浏览器与浏览器内核 语法及使用 常用标签 语义化 表单元素 HTML 新增标签 CSS3基础 CSS基本语法规范 常用的选择器用法与规范 复合选择器使用 数值与单位 文字文本样式 CSS3新增选择器 CSS3进阶 CSS盒子模型 CSS背影技巧 圆角/阴影/过渡 定位和浮动 伪类和伪元素 Chrome调试工具 CSS高级技巧(精灵图、CSS三角、图标字体等) CSS常见布局技巧大全 网页开发常见问题以及解决方案 CSS常见兼容性问题以及解决方案 CSS新增属性 Photoshop切图 cutterman插件一键切图 电商项目 代码组织原则 项目开发实战流程 电商类复杂页面布局规范 CSS初始化技术选择(normalize.css使用) CSS字体图标使用 CSS属性书写顺序规范 万恒的多页面开发 网页语义化设计 CSS页面模块化开发 favicon图标制作 复杂网页结构排版技巧 常见动画过渡特效 电商类常见布局问题解决方案 将电商项目部署到web服务器 二、移动WEB网页开发 目标:能够独立开发移动端页面,并适配不同的移动端终端 CSS3动画 CSS3的2D和3D变化 animation动画 炫酷页面开发(地图大数据热点图、大风车、旋转木马轮播图等) 移动端页面开发
  • 【HTML笔记】HTML5基础知识个人总结
    HTML5 新增语义化标签 header:表示页面中一个内容区块或整个页面的标题 nav:表示页面中导航链接部分 main:表示页面中的主要的内容 (ie不兼容) section:表示页面中的一个内容区块 article:表示一块与上下文无关的独立的内容 aside:在article之外的,与article内容相关的辅助信息 footer:表示页面中一个内容区块或整个页面的脚注 figure:表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置) 兼容低版本浏览器: <script src=“html5.js”></script> address 公司地址或者个人邮箱 city 城市 time mark hgroup 标题组 视频标签 <video src="movie.ogg">Video元素</video> controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。 autoplay属性:如果出现该属性,则视频在就绪后马上播放。 loop属性:重复播放属性。 muted属性:静音属性。 poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。 video: mp4/mpeg4 ogg webm 音频标签 <audio src="someaduio.wav">Audio元素</audio> audio: mp3
  • 我的JavaScript学习笔记(二-JavaScript对象)
    四、浏览器对象模型[BOM]详解 1、浏览器对象概念 BOM即提供与浏览器交互的方法和接口。原本是用来处理浏览器窗口和框架,但是很多js扩展也算作BOM的一部分。例如:弹出窗口、移动缩放、关闭窗口,navigator对象、location对象、screen对象,对cookies的支持等。 2、窗口对象(window)-----顶级对象 BOM的核心对象是window,表示浏览器的一个实例。在浏览器环境下,window对象就担当了global对象的角色。 注:在window对象上定义的属性和直接定义的全局属性个点差别。 例如: var age = 29; window.color="red"; console.log(delete window.age); //false console.log(delete window.color); //true //直接用var 定义的全局属性,其属性的[[configuration]]特性值被设置为false,所以这样定义的属性不可以通过delete操作符删除。 <1>window对象常见属性 属性 说明 closed 表明窗口是否关闭的布尔值 defaultStatus 表示窗口状态栏中的默认状态信息 documnent 表示窗口中显示的当前文档对象 frames 表示窗口中包含的所有的frame对象数组 history
  • H5新增特性
    ** H5新增特性 ** 语义化标签:header、footer、section、nav、aside、article 增强型表单:input 的多个 type 新增表单元素:datalist、keygen、output 新增表单属性:placehoder、required、min 和 max 音频视频:audio、video canvas 地理定位 拖拽 本地存储:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除 新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause WebSocket:单个 TCP 连接上进行全双工通讯的协议 1. video/audio视频/音频 标签定义视频,比如电影片段或其他视频流。 1.目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。 2.语法:<video src=”” controls autoplay loop></video> 3.Controls 向用户显示控件,比如播放按钮 4.Autoplay 自动播放 5.Loop循环播放 标签定义声音,比如音乐或其他音频流。 1.目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg
  • 黑马网页开发前端基础班+就业班+中级进修班课程大纲/前端学习路线
    最近开始学前端,关注到黑马的学习大纲,写得非常详细,转载过来给大家参考下,稍微编辑了一下,去除了其中的广告。 课程版本:6.5 原网址http://www.itcast.cn/course/web.shtml HTML&JS+前端基础班课程大纲学习对象 1.0基础0经验的小白人员,想转型到高薪编程行业或对此行业有浓厚兴趣的人员; 2.在校大学生,希望充实自身技能,毕业后能顺利就业并有更强的市场竞争力; 3.不满足目前工作现状,想要得到更好的发展空间。上课方式 全日制脱产,每周5天上课(实际培训时间可能因法定节假日等因素发生变化) HTML&JS+前端基础班课程大纲 所处阶段 主讲内容 技术要点 学习目标 第一阶段:HTML5 + CSS3 HTML5 1、 浏览器与浏览器内核2、语法及使用、3、 常用标签4. 语义化5、 表单元素6、 HTML 、7 新增标签 可掌握的核心能力:掌握 HTML5 常用标签;掌握 CSS 语法及使用技巧;掌握CSS3新增选择器;掌握CSS3新增样式属性;掌握 DIV+CSS 布局方式;掌握常见网页布局技巧;掌握企业级、电商级网页开发基本的流程、规范;掌握语义化、模块化、兼容性的PC端网页开发;掌握 Photoshop 切图以及插件切图;熟练使用调试工具进行页面调试;掌握基本的动画效果。可解决的现实问题
  • Html学习笔记
    关于HTML 一、HTML简介 1.HTML是什么? HTML:Hyper Text Markup Language超文本标记(标签)语言 由多种标签组成,用来制作网页,告浏览器该如何显示页面 2.HTML语言的作用? 制作网页,控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接检索信息 使用表单获取用户信息,实现交互 3.版本W3C:World wide web consortium万维网联盟,制定WEB技术相关标准和规范的组织,HTML就是由W3C制定的 标准 两个版本:HTML4.0和HTML5.0 官网:https://www.w3school.com.cn/ 4.HTML后缀名----扩展名HTML文件的扩展名 是以.html或.htm来结尾 二.HTML文档的结构 1.1基本结构 1.1 简介 HTML标签是由尖括号括起来的关键,如 ,通常都是成对出现的,如 <cml> 以 为根标签,包含: 头部和 主体部分 头部提供关于网页的相关信息,如标题、字符编码、文档类型、关键等摘要信息 主体部分提供网页的具体内容,真正显示在页面中 合理的进行缩进 标签名不区分大小写,但一般习惯用小写 1.2开发工具 记事本notepad sublime notepad++ Dreamweaver VScode Webstorm等 使用步骤: \1. 新建文件(ctrl+N)
  • HTML5笔记+案例
    目录 一、HTML简介1.HTML是什么?2.作用3.版本4.扩展名 二、HTML文档结构1.基本结构1.1简介1.2开发工具1.3浏览器 2.标签2.1 标签的形成2.2 标签的分类2.3 注释2.4 实体字符2.5 文档类型 三、常用标签1. 基本标签1.1 有序列表1.2 无序列表1.3 定义列表1.4 水平线标签1.5 图像标签 2.其它标签3.头部标签4.标签嵌套 四、超链接1、简介2.基本用法3.锚链接3.1简介3.2 页面内的锚链接 4.功能链接5.URL5.1 简介5.2 组成 五、表格1.简介2.基本结构2.1 table标签2.2 tr标签2.3 td标签 3.合并单元格4.高级标签4.1caption标签4.2thead标签4.3th标签4.4tbody标签4.5tfoot标签 六、表单1.简介2.表单结构2.1表单语法2.2form标签 3.表单元素3.1单行文本框3.2 单选按钮3.3 复选框3.4 文件选择器 4.特殊表单元素4.1 下拉列表4.2 文本域 5、其他标签5.1 label标签5.2 button标签5.3 fieldset和legend标签 七、内嵌框架1、简介2、基本语法3、在框架中打开链接 八、HTML5简介1、发展2、特点3、兼容性 九、HTML5新增内容1、结构相关标签2、语义相关的标签2.1 mark标签2.2 time标签2
  • 学习HTML5之表单
    开始学习html5了。 HTML5 的标准已经定了,应该火了,或者已经火了。那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿。所以这里侧重的是手机里面的表现。 先来看看表单。h5里面增加了一些新的标签和属性,解决了我们以前比较头疼或者繁琐的功能。 先看看input里面的type属性,新增了一些属性,比如email、number、date、range等,那么他们的表现到底如何呢?我们来罗列一下。 <form > <input type="checkbox" name="c1" value="11"/> <input type="checkbox" name="c1" value="12"/>多选 <br/><br/> <input type="radio" name="r1" value="21"/> <input type="radio" name="r1" value="22"/> 单选<br/><br/> <input id="color" type="color"/> 颜色:<span id="spanColor">span><br/><br/> <input id="month" type="month"/> 月份:<span id="spanMonth">span><br/><br/> <input id="week"
  • H5 css3 新特性
    文章目录 H5 新特性 CSS3新增属性一、transform变换效果二、transition过渡效果三、animation动画效果 最近面试老是被问到这个问题,虽然以前整理过,但是忘了好多,在重新建个标题整理一下吧。 H5 新特性 语义化标签:header、footer、section、nav、aside、article增强型表单:input 的多个 type新增表单元素:datalist、keygen、output新增表单属性:placehoder、required、min 和 max音频视频:audio、videocanvas地理定位拖拽本地存储:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpauseWebSocket:单个 TCP 连接上进行全双工通讯的协议 语义化标签: 增强型表单 HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证. html5 新增的表单属性 html5 新事件 块级元素 div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address