Loading

HTML5学习笔记

HTML5学习笔记

一、基本标签

1.了解

<！-- 注释-->
< !DOCTYPE html > <!--告诉浏览器要用什么规范-->
<meta> 用来做SEO
<html></html>

快捷键 

1.tab键         快速补全   例：p接tab键即可打出p标签
2.ctrl+/         添加注释

2.基础标签

1.head标签
	<head></head>
2.body标签
	<body></body>
3.标题  （6级）
	<h1>一级标题</h1>
	。。。。
	<h6>六级标题</h6>
4.段落标签
<p></p>
5.换行标签
<br/>
6.水平线标签
<hr/>
7.粗体
<strong></strong>
8.斜体
<em></em>
9.特殊符号
空格    &nbsp;
大于    &gt;
小于    &lt;
版权符号 &copy;

3.图像标签

<！---->
	../   上一级目录
    
</！---->
<img src = "文件路径" alt = "加载失败文字" title ="悬停文字">

4.超链接

<!--
target 属性：
	blank 新标签页打开
	self  当前窗口打开
-->
<a href = "跳转地址" target ="表示窗口在哪打开" >显示的文字，可放图片</a>

锚链接：

1.定义一个标记，使用name做标记

2.使用 href=#name跳到指定位置

功能性链接：

邮件链接：href=mailto接邮箱地址

QQ链接：推广工具

5.列表

有序列表

<ol>
    <li>文字</li>
    ...
</ol>

无序列表

<ul> 
    <li>文字</li>
    ...
</ul>

自定义列表

<!--
dl:标签
dt：列表名称
dd：列表内容
-->

<dl>
	<dt>学科</dt>
    	<dd>语文</dd>
    	...
    <dt>位置</dt>
    	<dd>China</dd>
</dl>

6.表格

<!--
tr:行
td:列
   colspan:跨列
   rowspan:跨行
-->
<table >
    <tr>
    	<td colspan = "4">独占四列 </td>
        <td> 占一列</td>
    </tr>
</table>

7.视频和音频

<!-- 
视频元素
src
controls 控制条
autoplay 自动播放

-->
<video src=""  controls  autoplay></video>

<!-- 
src
controls
autoplay
-->
<audio src="" controls autoplay></audio>

二、页面结构分析

元素名 描述
header 头部
footer 底部
section 独立区域
article 文章
aside 侧边栏
nav 导航栏

三、iframe内联框架

<!--
可嵌入另一个网页
-->
<iframe src =""  name="" >
    
</iframe>

四、表单

1.表单

<!--
method:提交方式get/post
action：表单提交的位置，可以为网站，也可以为请求处理地址
 
表单元素格式
type   指定元素类型
name    名称
value   初始值
size  大小
maxlength 最大字符数
checked  type为radio或checkbox是，指示是否被选中
-->

<form method="get" action="1.html">
    <p>
        <input type="text" name="username">
    </p>
    <p>
        <input type="password" name="password">
    </p>
    <input type="submit" name ="提交">
    <input type="reset"  name="重置">
</form>

2.多选框和单选框

<p>
    <input type ="checkbox" value="男" name="sex">
	<input type ="checkbox" value="女" name="sex">
</p>
<p>
    <input type ="radio" value="男" name="sex">
	<input type ="radio" value="女" name="sex">
</p>

3.下拉框

<p>
    <select name ="country">
       <option value ="选项的值">中国</option> 
       <option value ="选项的值">俄罗斯</option> 
    </select>
</p>

4.文本域

<textarea name="textbook" cols="" rows="" >内容</textarea>

5.文件域

<input type="file" name="文件">

6.邮件验证

<input type="email">

7.url验证

<input type="url">

8.数字验证

<input type="num" max="100" min="0" step="2">

9.滑块

<input type="range" name ="voice" min="0" max ="100" step="10">

10.搜索框

<input type="search" name="search">

五、表单的使用

1.只读

添加readonly属性

2.禁用

disable

3.隐藏

hidden

4.表单的初级验证

常用方式

加上属性placeholder ：提示信息（请填写个人密码）

required 非空判断

pattern 正则表达式

posted @ 2021-03-13 16:55  进击的小吴同学  阅读(65)  评论(0)    收藏  举报