HTML5
HTML5自学笔记
纯情小码哥
越努力,越秃飞猛进,就能猥琐欲为!
展开
-
HTML基础知识
把代码渲染成页面,浏览器内核;【浏览器内核】(1)Trident(IE内核)(2)Gecko(fireFox)(3)webkit(Safari)(4)blink(其实也是wekit的分支)(5)Presto(Opera)不同的浏览器内核,解析出来的东西就不一样,所以Web标准就出来了;【Web标准的好处】1、让Web的发展前景更广阔2、内容能被更广泛的设备访问3、更容易...原创 2019-10-01 10:10:08 · 88 阅读 · 0 评论 -
HTML设置字符集
HTML设置字符集<meta charset = "UTF-8">GBK 包含简体中文和繁体字charset:字符集:UTF-8 全世界所有国家需要用到的字符gb2312 简单中文BIG5 包含了繁体字...原创 2019-10-01 10:10:48 · 1356 阅读 · 0 评论 -
常用标签
HTML常用的标签[排版标签]主要和CSS搭配使用,显示网页结构的标签,是网页布局最常用的标签;标题标签:h1至h6<h1><h2><h3><h4><h5><h6>语义:作为标题使用,并且依据重要性递减;代码如下:<!DOCTYPE html><html lang="en"><...原创 2019-10-01 10:11:51 · 113 阅读 · 0 评论 -
段落标签
段落标签:paragraph 段落语法:<p> 文本内容 </p>说明:默认情况下,文本在一个段落中会根据浏览器窗口大小自动换行;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset = "UTF-8"> <title>Docume...原创 2019-10-01 10:12:49 · 505 阅读 · 3 评论 -
水平线标签
水平线标签:horizontal 横线语法:<hr />说明:在网页中常常看到一些水平线将段落之间分隔开,使得文档结构清晰,层次分明.这些水平线可以通过插入图片实现,也可简单地通过标记来完成.代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset = "UTF-8"...原创 2019-10-01 10:13:38 · 2266 阅读 · 0 评论 -
换行标签
换行标签:break 打断,换行语法:<br />说明:一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset = "UTF-8"> &...原创 2019-10-01 10:14:22 · 1053 阅读 · 0 评论 -
段落与换行的区别
br标签与p标签的相同点:都有换行的作用;br标签与p标签的区别:br标签默认是换行后没有间隙的,而p标签是有间隙的;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></...原创 2019-10-01 10:15:01 · 2827 阅读 · 0 评论 -
div span标签
div span标签语义:它们是没有语义的,是网页布局主要的2个盒子,非常重要;语法:<div>内容</div><span>内容</span>div是divsion的缩写,分隔,分区的意思;span,跨度,跨距;范围;代码如下:<!DOCTYPE html><html lang="en"><hea...原创 2019-10-01 10:15:36 · 659 阅读 · 0 评论 -
文本格式化标签
文本格式化标签语法:<b></b>说明:粗体,不建议使用语法:<strong></strong>说明:粗体语法:<i></i>说明:斜体,不建议使用语法:<em></em>说明:斜体语法:<s></s>说明:加删除线,不建议使用语法:<del...原创 2019-10-01 10:16:43 · 170 阅读 · 0 评论 -
属性
属性语法:<标签名 属性1="属性值1" 属性2 = "属性值2" ...> 内容 </标签名>说明:1、标签可以拥有多个属性,必须写在开始标签中,位于标签名后面;2、属性之间不分先后顺序,标签名与属性、属性与属性之间均以空各分开;3、任何标签的属性都有默认值,省略该属性则取默认值;如:<hr width = "500px" color = "red"...原创 2019-10-01 10:17:09 · 128 阅读 · 0 评论 -
图像标签
图像标签语法:<img src="图像URL" />说明:src属性用于指定图像文件的路径和文件名,他是img标签的必需属性;<img />标记属性src:图像的路径alt:图像不能显示时的替换文本title:鼠标悬停时显示的内容width:设置图像的宽度height:设置图像的高度border:设置图像边框的宽度代码如下:<!DOCTY...原创 2019-10-01 10:26:19 · 301 阅读 · 0 评论 -
链接标签
链接标签anchor语法:<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>说明:href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。hypertext reference的缩写,超文本引用;target:用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,...原创 2019-10-01 11:02:10 · 1148 阅读 · 0 评论 -
锚点定位:
锚点定位:语法:1、<"a href = "#id名">链接文本 </a>2、使用相应的id名标注跳转目标的位置;说明:能够快速地跳转到当前页面的某个位置;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...原创 2019-10-01 11:24:59 · 498 阅读 · 0 评论 -
特殊字符标签
特殊字符标签语法: 说明:空格符语法:<说明:小于号语法:>说明:大于号语法:&说明:和号&语法:¥说明:人民币语法:©说明:版权语法:®说明:注册商标语法:°说明:摄氏度语法:±说明:正负号语法:&am...原创 2019-10-01 13:00:44 · 613 阅读 · 0 评论 -
列表标签
列表标签【无序列表】语法:<ul> <li>列表项1</li> <li>列表项2</li> ......</ul>说明:没有序号的标签【有序列表】语法:<ol> <li>列表项1</li> <li>列表项2</li>...原创 2019-10-01 13:18:33 · 121 阅读 · 0 评论 -
表格
表格现在还是常用的一种标签,但不是用来布局的,而是处理\显示表格式数据语法:<table> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> ...... </tr></table>说明:tr:行t...原创 2019-10-01 16:42:08 · 98 阅读 · 0 评论 -
合并单元格
合并单元格将多个内容合并的时候,就会有多余的东西,把它删除.跨行合并:rowspan跨列合并:colspan语法:rowspan = "合并行数"colspan = "合并列数"说明:<table> <thead> <tr> <th rowspan = "合并行数"></th>...原创 2019-10-02 11:50:20 · 187 阅读 · 0 评论 -
表单
表单:一个完整的表单通常由3个部分组成的:表单域、提示文本、表单控件表单控件:包含了和我说的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示文本:说明性的文字,提示用户填写和操作表单域:相当于容器,容纳所有的表单控件和提示信息,可以通过它定义处理表单数据所有程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传递到后台服务器。i...原创 2019-10-02 11:50:55 · 1617 阅读 · 0 评论 -
label标签
label标签label标签为input元素定义标注作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点语法:<label for="male">Male</label><input type="radio" name="" value="">说明:(1)直接用label包裹即可(2)如果label有多个表单,想定...原创 2019-10-02 11:52:21 · 428 阅读 · 0 评论 -
textarea控件
textarea控件(文本域)如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法如下:<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容</textarea>代码如如下:<!DOCTYPE h...原创 2019-10-02 11:51:08 · 550 阅读 · 0 评论 -
下单菜单
下单菜单使用select控件定义下拉菜单的基本语法格式如下:语法:<select> <option>选项1</option> <option>选项2</option> ......</select>常用属性:代码如下:<!DOCTYPE html><html...原创 2019-10-02 11:59:26 · 333 阅读 · 0 评论 -
常用新标签
html5常用新标签header:定义文档的页眉头部nav:定义导航链接部分footer:定义文档或节的页脚article:定义文章section:定义文档中的节(section、区段)aside:定义其所处内容之外的内容,侧边datalist:标签定义选项列表。请与input元素配合使用该元素fieldset:元素可将表单内的相关元素分组,打包,可以与legergnd搭配使用...原创 2019-10-02 11:51:40 · 77 阅读 · 0 评论 -
datalist标签【HTML5新增】
datalist标签【HTML5新增】标签定义选项列表,请与input元素配合使用该元素,与下拉菜单很像,但更加灵活,输入一个字,就有提示。语法:<datalist></datalist>用法:<input type="text" name="" list="dinner"><datalist id="dinner"> <o...原创 2019-10-02 11:51:22 · 237 阅读 · 0 评论 -
fieldset[HTML5新增属性]
fieldset[HTML5新增属性]元素可将表单内的相关元素分组,打包可以与legend搭配使用语法:<fieldset></fieldset>代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...原创 2019-10-02 11:52:03 · 185 阅读 · 0 评论 -
input新增属性:
input新增属性:email语法:<input type="email" name="">说明:输入邮箱格式tel语法:<input type="tel" name="">说明:输入手机号码格式nember语法:<input type="number" name="">说明:输入数字格式url语法:<input type="u...原创 2019-10-02 07:02:02 · 397 阅读 · 0 评论 -
常用新属性:
常用新属性:placeholder用法:<input type="text" name="" placeholder="">说明:占位符提供可描述输入字段预期值的提示信息,即有提示信息,但当输入的时候,提示信息会清除掉,且当删除后,提示信息又会出现.autofocus用法:<input type="text" name="" autofocus="">说明:规定...原创 2019-10-02 11:52:36 · 187 阅读 · 0 评论 -
学生档案复习前面HTML5新增标签/属性/input属性
根据所学HTML5新增的标签、属性、input属性,把学生的姓名、手机、邮箱、职业、出生日期、成绩写出来代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学生档案</title></head><...原创 2019-10-02 11:53:08 · 284 阅读 · 0 评论 -
多媒体audio
多媒体audio用法:<audio src="" ></audio>说明:autoplay="autoplay",把音乐播放出来.controls:表示可以控制音频.loop循环播放.如果为-1,则是无限循环播放.兼容性做法,将一首歌的三种格式都做出来,分别是 Ogg Vorbis\MP3\Wav,ogg和MP3其实就够了;代码如下:<!D...原创 2019-10-02 13:46:17 · 127 阅读 · 0 评论 -
多媒体video和多媒体embed
多媒体embed(会使用)embed可以用来插入各种多媒体,格式 可以是Midi、Wav、AIFF、AU、Mp3等等。url为音频或者视频文件及其路径,可以是相对路径或绝对路径。语法:<embed src=""></embed>简单粗暴,去视频浏览器上,拷呗HTML5格式过来就行了。多媒体video语法:<video></video>...原创 2019-10-03 11:17:00 · 640 阅读 · 0 评论