HTML5基础

最新推荐文章于 2022-04-01 21:33:59 发布

哪吒べ

最新推荐文章于 2022-04-01 21:33:59 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/dyz4001/article/details/84832581

版权

Html+css+jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、HTML简介

1、HTML由一套标记标签组成，在制作网页时我们使用这些标记标签来描述网页；

2、HTML5的优势，世界各大知名浏览器厂商的支持，HTML5平台的标准化，以及跨平台开发；

3、W3C标准：网页有三部分组成，结构，表现，行为，分别对应HTML、CSS、JavaScript三种常用技术；

4、HTML结构包括head和body；

二、网页的基本信息

1、DOCTYPE声明

用于约束HTML文档结构，检验是否符合Web标准，同事告诉浏览器，使用哪种规范来解释这个文档中的代码；

2、title标签对

描述网页的标题；

3、meta标签

描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述，该标签内容并不现实，目的是方便浏览器解析或利用搜索引擎搜索，采用名称=值的方式描述；

三、标签类型和功能

1、标题标签

<h1>...</h1>~<h6>...</h6>；

2、段落标签

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体变粗标签

6、字体倾斜标签

7、注释

<! - -注释内容- - >

8、特殊符号

特殊符号	字符实体
空格
大于号	>
小于号	<
引号	"
版权符号©	©

9、图像标签

10、超链接标签

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

target的取值：_self，_blank；

11、锚链接

意思是跳转到name属性为marker的标签处；

12、功能性链接

例如点击之后打开QQ或者电子邮件窗口，如下：

<a href="http://wpa.qq.com/msgrd?v=3&uin=目标QQ号码&site=qq&menu=yes" target="_blank">点击打开QQ</a>

13、无序列表

<ul>

</ul>

注意：跟怒W3C标准，ul标签中只能嵌套li标签；

无序列表特性：

没有顺序，每个li标签独占一行；

默认li标签前面有一个实心小圆点；

一般用于有规律的图文组合模块；

14、有序列表

<ol>

</ol>

有序列表特性：

有顺序，每个li标签独占一行；

默认li标签前面有阿拉伯数字的顺序标记；

一般用于排序类型的列表，如试卷、问卷调查等；

15、自定义列表

<dl>

</dl>

dd标签对是dt标签对下的子标签；

16、视频标签

注意：由于各个浏览器支持播放的视频格式不同，所以出现了source属性，浏览器会自动使用第一个能够识别的路径，如下：

你的浏览器不支持video标签

</video>

17、音频标签

其他同视频标签，都有autoplay属性

注意：

要想主流浏览器都支持视频和音频文件的方法如下：

视频至少包含WebM和MPEG4，音频至少包含WAV和MP3；

18、头部结构标签

19、脚部结构标签

20、独立区域结构标签

21、独立的文章内容

22、相关内容或应用

常用语侧边栏；

23、导航类辅助内容

四、表单及表单标签

1、<form>标签对

在HTML5中，使用<form>标签对来实现表单的创建，属于容器标签；

有两个常用的属性，action 和 method；

action属性指示服务器上处理表单输出的程序，语法为action="URL"，如果属性值为空，默认将表单提交到本页面；

method告诉浏览器如何将数据发送到服务器，值有 get 和 post ，get会改变地址栏状态，将表单数据显示到地址栏中，post属性不会；

2、input 自闭合标签

<input>元素常用属性
属性	说明
type	指定表单元素的类型，具体见下方
name	表单名称
value	可选属性，指定表单元素的初始值，如果元素type为radio，则必须指定一个值
size	指定表单元素的初始宽度，type为password时，宽度以字符为单位，其他以像素为单位
maxlength	指定在text或password元素中输入的最大字符数，默认无限大
checked	此属性指定按钮是否是被选中的，当type为radio或checkbox时，使用该属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
  <!--readonly为只读，disable为禁用，placeholder为提示信息，selected为列表框默认选中，
  checked为单选框和复选框默认选中，required规定填写内容不能为空，pattern验证输入内容是否符合自定义的正则表达式格式-->
  <p>
    请输入账号：
    <input type="text" name="userName" placeholder="请输入账户名" size="20" maxlength="30"/>
  </p>
  <p>
    请输入密码：
    <input type="password" name="userPassword" placeholder="请输入密码" size="20" maxlength="30"/>
  </p>
  <p>
    性别：
    <label for="male">男</label>
    <input type="radio" name="gen" value="男" id="male" checked/>
    <label for="female">女</label>
    <input type="radio" id="female" name="gen" value="女"/>
  </p>
  <p>
    爱好：
    <input type="checkbox" name="hobbys" value="看书"/>看书
    <input type="checkbox" name="hobbys" value="运动"/>运动
    <input type="checkbox" name="hobbys" value="睡觉"/>睡觉
  </p>
  <p>
    出生日期：
    <select name="year">
      <option value="" disabled="true" selected>选择年份</option>
      <option value="1992">1992</option>
      <option value="1993">1993</option>
      <option value="1994">1994</option>
    </select>年
    <select name="month">
      <option value="" disabled="true" selected>选择月份</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>月
  </p>
  <p>
    出生日期：
    <input type="number"name="year" min="1950" max="2017" step="1"/>年
    <input type="number"name="month" min="1" max="12" step="1"/>月
    <input type="number"name="day" min="1" max="31" step="1"/>日
  </p>
  <p>
    滑块：
    <input type="range" name="range" min="0" max="12" step="2"/>
  </p>
  <p>
    搜索框：
    <input type="search" name="serach"/>
    <input type="submit" value="GO"/>
  </p>
  <p>
    邮箱：
    <input type="email" name="email"/>
  </p>
  <p>
    网址：
    <input type="url" name="url"/>
  </p>
  <p>
  <h3>多行文本域：</h3>
  <textarea name="textarea" cols="20" rows="5" placeholder="cols属性为显示列数，rows属性为显示行数"></textarea>
  </p>
  <p>
    上传文件：
    <input type="file" name="files"/><input type="submit" value="上传"/>
  </p>
  <p>
    <!--另外还有图片按钮，<input type="image" src="图片路径" width="20px" height=""10px/>,图片按钮默认具备提交功能-->
    <input type="button" name="button" value="普通按钮" onclick="alert(this.value)"/>
    <input type="submit" name="submit" value="提交"/>
    <input type="reset" name="reset" value="重置"/>
  </p>
</form>
</body>
</html>