HTML学习笔记(一)

HTML5语法

  1. 文档类型
    DOCTYPE声明文档类型 ,必须位于第一行。
    DOCTYPE不区分大小写以及单双引号。
    DOCTYPE会触发浏览器以标准模式显示页面。

    <!DOCTYPE HTML>
    
  2. 字符编码
    HTML5中简化了字符编码的写法,直接用 meta 即可

    <meta charset = "UTF-8">
    
  3. 布尔值
    具有bool值的属性,当只写属性不指定属性值的时候,默认为true;若想要设置为false,可以不使用checked属性:

    <!-- 只写属性,不写属性值,代表属性为true -->
    <input type = "checkbox" checked>
    <!-- 不写属性,代表属性为false -->
    <input type = "checkbox">
    <!-- 属性值 = 属性名,代表属性为true>
    <input type = "checkbox" checked = "checked">
    <!-- 属性值 = 空字符串,代表属性为true>
    <input type = "checkbox" checked = "">
    
  4. 属性值
    当属性值不包括空字符串、<、>、=、单双引号时,属性值两边的引号可以忽略。

    <input type = "text">
    <input type = 'text'>
    <input type = text>
    

HTML5的元素

根据标记类型的不同,将HTML5的元素分为6类:

标记内容类型说明
内嵌文档中嵌入其他内容,如audio, video等
文档和body中使用的元素,如form, h1, small等
标题段落标题,如h1, h2, hgroup等
交互与用户交互的内容,如 button, textarea等
元数据一般在页面的head标签里面,设置页面的表现和行为,如style,script等
短语文本及文本标记元素,如mark, sub等
  1. 结构元素
    HTML5新增的结构元素:

    元素说明
    header一个内容块或者整体页面的标题
    footer一个内容块或者整体页面的脚注
    section表示页面中一个区块,如章节、页眉等
    article表示页面中一块与上下文都不相关的内容
    asidearticle内容之外,与article内容相关的辅助信息
    nav表示页面中导航的链接
    main网页中的主要内容
    figure表示一段独立的流内容
  2. 功能元素
    根据页面内容的功能需要,HTML5新增许多功能元素:

    1. hgroup元素:对整个页面或者一个内容块进行整合
      <hgroup> ... </hgroup>
      
    2. video元素:定义视频等
      <video src = "movie.ogg" controls = "controls">video 元素</video>
      
    3. audio元素:定义音频
      <audio src = "someaudio.wav">audio 元素</audio>
      
    4. mark元素:显示高亮的文字
      <mark> ... </mark>
      
    5. dialog元素:定义对话框或窗口
      <dialog open>这是打开的对话窗口</dialog>
      
    6. bdi元素:定义文本方向
      <ul><li>Username:<bdi>Bill</bdi>80 points </li>
      </ul>
      
    7. figcaption元素:定义figure标题
      <figure><figcaption> ... </figcaption><img ... />
      </figure>
      
    8. canvas元素:表示图形、图表和其他图像。相当于提供一块画布
      <canvas id = "myCanvas" width="200" height="200"></canvas>
      
    9. summary元素:为details元素定义可见的标题
    10. details元素:用户可以得到的具体信息
    <details><summary>HTML5</summary>explanation
    </details>
    

    效果:
    在这里插入图片描述
    在这里插入图片描述

    1. datalist元素:表示可选数据的列表,与input配合,可以作出输入值的下拉列表
      <datalist> ... </datalist>
      
      与此类似的还有datagrid,它以树状列表的形式来展示。
    2. meter元素:度量给定范围的数据
      <meter value = "3" min = "0" max = "10">十分之三</meter>
      
      效果:
      在这里插入图片描述
      用图形来表示的。
  3. 表单元素
    通过type属性,HTML5为input元素新增了许多类型:

    名称格式说明
    tel<input type = "tel">表示输入电话号码的文本框
    search<input type = "search">表示搜索文本框
    url<input type = "url">表示输入url地址的文本框
    email<input type = "email">表示输入电子邮件地址的文本框
    datetime<input type = "datetime">表示输入日期和时间的文本框
    date<input type = "date">表示输入日期的文本框
    month<input type = "month">表示输入月份的文本框
    week<input type = "weekt">表示输入周几的文本框
    time<input type = "time">表示输入时间的文本框
    datetime-local<input type = "datetime-local">表示本地日期和时间的文本框
    number<input type = "number">表示必须输入数字的文本框
    range<input type = "range">表示范围文本框
    color<input type = "color">表示颜色文本框

HTML5全局元素

  1. contenteditable属性
    主要功能为允许用户在线编辑元素中的内容。它是一个bool型属性,当值为true时,允许编辑;为false时,不允许编辑。未指定true还是false时,依靠元素的父元素来决定是否可编辑。
<ul contenteditable="true"><li>列表元素1</li><li>列表元素2</li><li>列表元素3</li>

效果:
在这里插入图片描述

  1. 用户自定义数据
    data-*属性赋予HTML嵌入自定义data属性的能力
    data-*主要包括两部分:
    1. 属性名:不包括任何大写字母
    2. 属性值:可以是任意字符串
<ul><li data-animal-type="bird">猫头鹰</li><li data-animal-type="fish">鱼</li><li data-animal-type="spider">蜘蛛</li>
</ul>

data-animal-type就是用户自定义的属性。

  1. draggable属性
    该属性可以定义元素是否可以被拖动。属性取值及说明为:
    1. true:可以被拖动
    2. false:不可被拖动
    3. auto:定义使用浏览器的默认行为
  2. spellcheck属性
    该属性定义是否对元素进行拼写和语法检查
    1. true:进行拼写和语法检查
    2. false:不进行检查
  3. translate属性
    该属性定义是否应该翻译元素内容:
    1. yes:应该翻译此段内容
    2. no:不应该翻译此段内容0

初学HTML,做个笔记。。。
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ PAT 乙级 1007——素数对猜想

题目详情 让我们定义 dnd_ndn​ 为 dnpn1−pnd_n p_{n 1} - p_ndn​pn1​−pn​&#xff0c;其中 pip_ipi​ 是第 i 个素数。显然有 d11d_1 1d1​1&#xff0c;且对于 n > 1有 dnd_ndn​ 是偶数。 “素数对猜想”认为“存在无穷多对相邻且差为2的素数”&#xff0c;现给…

python实例 65,66

65.题目&#xff1a;一个最优美的图案 #65 import math class PTS:def __init__(self):self.x 0self.y 0 points []def LineToDemo():import tkinter screenx 400screeny 400canvas Canvas(width screenx,height screeny,bg white)AspectRatio 0.85MAXPTS 15h scr…

C语言for循环详解

for 循环的使用更加灵活&#xff0c;在日常的程序开发过程中我们会使用的更多一些。 使用 while 循环来计算1加到100的值&#xff0c;代码如下&#xff1a; #include <stdio.h> int main(){int i, sum0;i 1; //语句①while(i<100 /*语句②*/ ){sumi;i; //语句③}…

python基础入门(6)之列表

目录 一、Python列表 一.列表基本知识 1)创建列表 2&#xff09;列出表值 3&#xff09;列表长度 4&#xff09;列表项 - 数据类型 5&#xff09;Python 集合&#xff08;数组&#xff09; 二.访问列表 1.正常索引 2)负索引 3)索引范围 4&#xff09;负指数范围 5…

山东大学 2020级数据库系统 实验一

What’s more? 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 …

python基础入门(7)之元组

目录 Python元组 一、元组理解 1.1&#xff09;基本定义 1.2&#xff09;元组长度 1.3&#xff09;数据类型 二、访问元组 2.1&#xff09;正常访问 2.2&#xff09;负索引 2.3&#xff09;范围性索引 三、更新元组 3.1&#xff09;替换 ​3.2&#xff09;添加项目…

山东大学 2020级数据库系统 实验二

What’s more 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 20…

jupyter(Anaconda)设置默认打开文件夹

win r 输入 cmd 回车 再输入如下命令回车&#xff1a; jupyter notebook --generate-config然后&#xff1a;打开生成的文件路径 进去后&#xff1a;编辑这个py ctrl f 搜索&#xff1a;notebook_dir定位 去掉# &#xff0c;引号后改为你要打开的文件路径&#xff08;路径…

山东大学 2020级数据库系统 实验三

What’s more 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 20…

山东大学 2020级数据库系统 实验四

What’s more 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 20…

jupyter(Anaconda)打不开浏览器

问题描述 有时jupyter不能自动打开浏览器&#xff0c;jupyter notebook输入回车后&#xff0c;不能跳转&#xff0c;把输出的链接复制粘贴到浏览器后&#xff0c;写的代码页不能运行。 问题解决 不是软件什么的问题&#xff0c;而是他们的用户名为中文的问题。只要把用户名改为…

C语言数组初入

情景 实用程序输出一个 44 的整数矩阵&#xff0c;代码如下&#xff1a; #include <stdio.h> #include <stdlib.h> int main() {int a120, a2345, a3700, a422;int b156720, b299, b322, b42;int c1233, c2205, c31, c46666;int d134, d20, d323, d423006783;pri…

最全python爬虫库安装详解

目录 一、请求库的安装 1.requests 的安装 2.Selenium的安装 3.ChromeDrive 的安装 4.GeckoDriver 的安装 5.PhantomJS 的安装 6.aiohttp 的安装 二、解析库的安装 1.lxml 的安装 2.Beautiful Soup 的安装 3.pyquery 的安装 4.tesserocr 的安装 一、请求库的安装 …

山东大学 2020级数据库系统 实验五

What’s more 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 20…

C语言二维数组的使用

二维数组的定义 二维数组定义的一般形式是&#xff1a; dataType arrayName[length1][length2];其中&#xff0c;dataType 为数据类型&#xff0c;arrayName 为数组名&#xff0c;length1 为第一维下标的长度&#xff0c;length2 为第二维下标的长度。 我们可以将二维数组看…

python基础入门(8)之集合

目录 Python集合 一、集合理解 二、访问集合 2.1&#xff09;遍历集合 3.2&#xff09;检查是否存在 三、添加集合 3.1&#xff09;添加项目值 3.3&#xff09;添加任何可迭代对象 四、移除集合项 4.1&#xff09;remove方法 4.2&#xff09;iscard() 方法 4.3&…

山东大学 2020级数据库系统 实验六

What’s more 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 20…

C语言数组元素的查询

数组的查询 在日常的开发过程中&#xff0c;我们经常需要查询数组中的元素&#xff0c;这就需要我们使用数组元素查询的方法来进行查询。 对无序数组的查询 无序数组&#xff0c;就是数组元素的排列没有规律。无序数组元素查询的思路也很简单&#xff0c;就是用循环遍历数组…

山东大学 2020级数据库系统 实验七

What’s more 山东大学 2020级数据库系统 实验一 山东大学 2020级数据库系统 实验二 山东大学 2020级数据库系统 实验三 山东大学 2020级数据库系统 实验四 山东大学 2020级数据库系统 实验五 山东大学 2020级数据库系统 实验六 山东大学 2020级数据库系统 实验七 山东大学 20…

python基础入门(9)之字典

目录 Python字典 一、字典理解 1.1&#xff09;创建字典与访问 1.2&#xff09;字典长度 1.3&#xff09;数据类型 二、访问字典 2.1&#xff09;访问键名 2.2&#xff09;访问健值 三、更改字典各种方法 四、添加字典项各种方法 五、删除字典的各种方法 ​六、遍历…