您的位置:首页 > Web前端 > HTML5

前端之HTML5学习笔记

2020-03-04 23:50 831 查看

文章目录

一.Html简介

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
HTML 标签是由尖括号包围的关键词,比如 < html >
HTML 标签通常是成对出现的,比如 < b >和 < /b >
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页

二.Html基本元素(初步)

超链接:
格式;< a href=“所要打开的链接” target=“链接怎么样去打开” >所要加上超链接的语言< /a >
我们通过使用 < a > 标签在 HTML 中创建链接;通过使用 href 属性 - 创建指向另一个文档的链接;通过target属性来控制所打开的链接是新建一个窗口(多一个窗口;_blank),还是本地刷新(跟先前的窗口一样多;默认(即不设定target)或者_self)

粗体:
格式: < b >所要加粗的文字 < /b >

斜体:
格式:< em >所要变斜的文字< /em >

下划线:
格式:< u >所要加下划线的文字< /u >

删除线:
格式:< s >所要删除的文字< /s >

换行符:
格式:< br > < /br >

三.Html表格元素

表格三大元素:< table > < tr >(行)< td >(列)
一些小东西:< thead >(表头)< tbody >(表身)< tfoot >(表脚)
表头会自动居中并且加粗

如何合并单元格:
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan=“2”,它的下一行tr会少一列;合并列的时候 colspan=“2”,此行的列会少一列。代码演示:
四 .列表元素
< ol >有序列表(属性:type(设置样式修改各列表旁的编号类型),reversed(降序))
< ul >无序列表
< li >表示列表里的项

四.列表元素(上)

1.什么是表单?
表单是用来获取用户输入的手段
2.表单元素
< form >
属性:method action
< input >
属性:type name……

<!DOCTYPE>
<html>
<head>
<mate charset="UTF-8">
</head>
<body>
<form>
<input type="text">//单行文本框
<input type="text" value="学习不易请坚持">//占位符
<input type="text" placeholder="密码">//不占文本框内的;文本内的提示
<input type="text" placeholder="密码" maxlength="8">//最大能输入的字符
<input type="text" placeholder="密码" size="50">//拓宽单行文本框
<input type="text" value="密码" readonly>//只读
<input type="pastword" placeholder="密码">
</form>
</body>
</html>

五.表单元素(中)

1.按钮属性
type=“button“
< button >< /button >

<input type=button value="按钮">
<button>按钮</button>//js合作并且绑定事件的
<input type="submit" value="提交">//提交所输入的内容

适用范围:button>input button >input submit

2.range型input元素

<input type="range" min="-100" max="500" step="100" value="-100">//滑动的数字

解释:range类型的是可以滑动的长度条;min=“-100”最小值是-100;max=“100”最大值是500;step=“100”,每次滑动所能调的数值就是100;vale="-100"为起始值是-100,若没有定义value则默认起始值为中间。

3.number型input元素

<input type="number">//手动输入数字

4.checkbox型input元素

<input type="checkbox">选择//复选框允许用户在有限数量的选项中选择零个或多个选项。

5.radio型input元素

<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
//单选按钮让用户在有限的选择中只选择一个

6.生成选项列表(select)和数据列表(datalist)

<select>
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>//表示一个控件,提供一个可以向下拉出的选项菜单

<input type="text" list="datelist">
<datalist id="datalist">
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</datalist>	//表示一个控件,提供一个可以向下拉出的选项菜单而且可以进行输入填写

六.表单的元素(下)

1.用input元素获取有规定格式的字符串

  • email
    < input type=“email” > 用于应该包含电子邮件地址的输入字段。
    根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。

  • tel
    < input type=“tel”> 用于应该包含电话号码的输入字段。

  • url
    < input type=“url” > 用于应该包含 URL 地址的输入字段。

2.用input元素获取时间
date
< input type=“date” > 用于应该包含日期的输入字段。

3.用input元素获取颜色值
< input type=“color”> 用于应该包含颜色的输入字段。

4.用input元素获取搜索用词
< input type=“search”> 用于搜索字段(搜索字段的表现类似常规文本字段)。

5.用input元素生成隐藏的数据项(hidden)
浏览器不应显示已规定 hidden 属性的元素。

6.用input元素上传文件
< input type=“file” >
属性:
multiple(一次允许上传多个文件)
required(只能上传一个文件)
(不添加这个属性默认也是只能上传一个文件)

七.嵌入图片与创建分区响应图

1.< img >元素
属性:
src:设置图片的位置(显示图片)
eg:< img scr=“Download1.png”>
它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。

width:设置图片的宽度
height:设置图片的高度
< img scr=“Download1.png” width=“128px” height=“200px”>

alt:设置图片的备用内容
< img src=“Download1.png” alt=“嘿嘿嘿” >
如果无法显示图像,浏览器将显示替代文本。
2.在超链接里嵌入图像
结合a标签创建一个基于图像的超链接
格式:< a href="链接 ">< img src="图片的路径 " >< /a >
3.创建客户端分区响应图
原理:通过点击图片上的不同区域让浏览器到不同的URL(路径)上。
元素:
< map >:客户端分区域响应图的关键元素

< area >:可以有多个,每个各自代表图像上课被点击的一块区域
第一类属性:点击后导航到指定URL
herf:该区域被点击时浏览器应该加载的URL
alt:定义图片的备用内容
第二类属性:shape和coords属性,要共同起作用
标明用户可以点击的各个图像区域

shape值 coords属性的值解析
rect 这个值代表一个矩形区域。用四个逗号分隔的整数组成,四个整数分别代表:图像的左,上,右,下边缘
cricle 这个值代表一个圆形区域。用三个逗号分割的整数组成,三个整数分别代表:图像左边缘到圆心的距离;图像右边缘到圆心的距离;圆的半径
roly 这个值代表多边形,至少包含六个逗号分隔的整数组成。每一个数字各代表多边形的一个顶点
dafault 代表默认区域,也就是说覆盖整张图片,不需要coords值

未完待续……

  • 点赞
  • 收藏
  • 分享
  • 文章举报
叶落知多少 发布了5 篇原创文章 · 获赞 0 · 访问量 106 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: