2021/4/26 删除了一些根本不常用的内容,修改了语义化标签的内容)

HTML5语法与基础标签

认识HTML5骨架

html5(Hyper Text Markup Language)骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="...">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档对象声明DTD

  • HTML文件第一行必须是DTD,Document Type Definition
  • 不写DTD会引发浏览器的一些兼容问题
  • 不同版本的HTML有不同的DTD写法。

字符集

//meta:元标签,表示网页的基本配置
//charset:字符集
<meta charset="UTF-8">
字符集涵盖字符1个汉字字节数适用场景
UTF-8涵盖全球所有国家,民族的文字和大量图形字符3制作有非汉字文字的网页
gb2312(gbk)收录所有汉字字符,包括简体和繁体,和英语,少量韩文,日语和少量图形字符2制作只有汉语和英语的网页,由于一个汉字仅占2字节,网页文件尺寸明显减少

注意:无论使用哪种字符集,一定要在Vscoe编辑器中将文件也设置为相同字符集,否则会岀现乱码,然后更改meta标签

title,关键词及页面描述

title的用途

  1. title标签用来设置网页的标题,文字会显示在浏览器的签栏上
  2. title也是搜索引擎收录网站时显示的标题,为了吸引用户点击,合理设置tit1e是必要的

网页关键词和页面描述

  1. 合理设置网页的网页的关键词和页面描述,也是SEO的重要手段
    ;SEO( Search Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎內的自然排名,让网站在搜索引擎的结果中占据领先地位,获得品牌收益
  2. 使用meta标签设置网页关键词和描述,name属性非常关键,用来设置meta的具体功能
<meta name='keywords' content='慕课网,imooc,JAVA'>
<meta name='Description' content='慕课网是IT技能学习平台'>

HTML5特性

空白折叠现象

  1. 文字和文字之间的多个空格、换行会被折叠成一个空格
  2. 标签“内壁”和文字之间的空格会被忽略

转义字符

&lt; //小于号
&gt; //大于号
&nbsp; //空格(不会被折叠)
&copy; //版权符号

列表标签

三种标签

<ul> </ul> //无序列表
<ol> </ol> //有序列表
<dl>     // 定义列表
<dt></dt>
<dd></dd>
</dl>

注意:

  • li标签是不能单独使用的,它必须放到ul或ol中
  • ul和ol的子标签只能是li
  • li标签中可以放任何标签

有序列表

有序列表中的type属性

type属性值意义
a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
表示大写罗马数字编号
1表示数字编号(默认)

ol 标签的 start属性

  1. start属性值必须是一个整数,指定了列表编号的起始值
  2. 此属性的值应为阿拉伯数字,尽管列表条目的编号类型type属性可能指定为了罗马数字编号等其他类型的编号

ol标签的 reversed属性

  1. reversed属性指定列表中的条目是否是倒序排列的
  2. reversed属性不需要值,只需要写 reversed单词即可,这是HTML5的全新特性
<ol reversed>
</ol>

定义列表

  • 需要逐条给出定义描述的列表就是定义列表
  • 只要语义上有“解释说明”含义的文字,且为列表形态,应该使用定义列表。
<dl>     // 定义列表
<dt></dt> // 数据项 
<dd></dd>  // 数据定义
</dl>

---

多媒体与语义化标签

多媒体标签

img标签

  1. alt属性:由于某种原因无法加载图像,浏览器会在页面上显示alt属性中的备用文本
  2. 相对路径:描述从网页出发,如何找到图片
    如果需要回退层级,使用“../”这样的写法

./是当前目录

  1. 绝对路径:描述图片精准地址

a标签

  1. href属性:支持相对路径和绝对路径的
  2. title属性:用于设置鼠标的悬停文本
  3. 在新窗口打开网页:将target属性设置为blank
  4. 给图片设置超级链接:用a标签包裹img标签
  5. ==页面内锚点==:较长的页面,可以适当的给h系列标签添加id属性,它将成为页面的“锚点”;当网址后面添加#时,页面将自动滚动到锚点所在位置;其他页面的超级链接,可以链接到指定锚点
<a href='1.html#baoji'>baoji</a>

audio标签

<audio controls src='音频地址'> </audio>
  1. autoplay属性:声明autopaly会自动播放音乐
  2. loop属性:声明loop属性会循环播放音频

video标签

使用方法,属性和audio类似,不赘述。

语义化标签

什么是HTML语义化标签

  • 语义化的标签,旨在让标签有自己的含义。
<p>一行文字</p>
<span>一行文字</span>

如上代码,p 标签与 span 标签都区别之一就是,p 标签的含义是:段落。而 span 标签责没有独特的含义。

语义化标签的优势

  1. 代码结构清晰,方便阅读,有利于团队合作开发。
  2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
  3. 有利于搜索引擎优化(SEO)。

常见的语义化标签

<title>:页面主体内容。
<hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>:无序列表。
<li>:有序列表。
<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>:标记导航,仅对文档中重要的链接群使用。
<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<article>:定义外部的内容,其中的内容独立于文档的其余部分。
<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>:页脚,只有当父级是body时,才是整个页面的页脚。
<small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
<strong>:和em标签一样,用于强调文本,但它强调的程度更强一些。
<em>:将其中的文本表示为强调的内容,表现为斜体。
<mark>:使用黄色突出显示部分文本。
    

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption>数字表</caption> // 表格的标题
        <tr>
            <th>1</th>     // 标题单元格
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>4</th>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th>5</th>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

单元格的合并

  • colspan属性:用来设置td或th的列跨度
  • rowspan属性:用来设置td或th的行跨度

表格的其他特征

  • < thead>标签定义表头
  • < tbody>标签定义表核心内容
  • < tfoot>标签定义表脚,通常是汇总行

表单标签

表单的创建

表单用来收集信息,比如注册、登录、发送评论反馈、购买商品等等

// action属性表示表单要提交到的后台程序的网址
// method属性表示表单提交的方式,有get或post
 <form action="" method="" ></form>

基本控件

单行文本框

// value属性表示已经填写好的值

 <input type="text" value=“123”>
 // placeholder属性表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值
<input type="text"   placeholder="请输入姓名">
// disabled属性表示用户不能与元素交互,即“锁死"
 <input type="text"     disabled>

单选按钮

// 互斥的单选按钮应该设置它们的name为相同值
// 单选按钮要有 value属性值,向服务器提交的就是 value值  
// 单选按钮如果加上了 checked属性,表示默认被选中
    男<input type="radio" name='sex' value="男" >
    女<input type="radio" name='sex' value="女" checked>

label 标签

// label标签用来将文字和单选按钮进行绑定,用户单击文字的时候也视为点击了单选按钮
<label>
        男<input type="radio" name='sex' value="男" >
</label> 
<label>
        女<input type="radio" name='sex' value="女"  >
</label>

复选框

// 使用type属性值被设置为checkbox的<input>元素可以创建复选框
// 同组复选框应该设置它们的name为相同值
// 复选框要有 value属性值,向服务器提交的就是 value值
陕西<input type="checkbox">
四川<input type="checkbox">
湖北<input type="checkbox">

密码框

使用type属性值被设置为 password的 input 元素可以创建密码框

  • 下拉菜单
// <select>标签表示下拉菜单,< option>是它内部的选项
<select>
     <option value="alipay">支付宝</option>
     <option value="vx">微信</option>
 </select>

多行文本框

< textarea></ textarea>表示多行文本框;rows和cols属性,用于定义多行文本框的行数和列数

三种按钮

// 普通按钮 ,可以简写为<button></button>
<input type="button" value="普通按钮">
// 重置按钮
 <input type="reset">
 // 提交按钮
 <input type="submit">

HTML5新增表单控件

更丰富的input种类


// 颜色选择控件
color
//日期、时间选择控件
date time
// 电子邮件输入控件
email
//文件选择控件
file
//数字输入控件
number
// 拖拽条
range
// 网址输入控件
url
// 搜索框
search

< datalist>控件

<datalist>控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时,将会显示智能感应

<input type="text" list="province-list">
<datalist id="province-list">
<option value="山东"> 
<option value="陕西 ">
<option value="云南"> 
<option value="贵州" >
</datalist>
最后修改:2021 年 07 月 28 日 12 : 15 AM