前端之HTML5学习笔记

最新推荐文章于 2020-02-23 19:32:47 发布

〔秉烛夜游〕

最新推荐文章于 2020-02-23 19:32:47 发布

阅读量243

点赞数 1

本文链接：https://blog.csdn.net/qq_46026740/article/details/104194475

版权

文章目录

一.Html简介
二.Html基本元素（初步）
三.Html表格元素
四.列表元素（上）
五.表单元素（中）
六.表单的元素（下）
七.嵌入图片与创建分区响应图

一.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值

未完待续……