Html的学习
标题标签
<title>标题标签</title>
段落标签
<p>
段落标签
</p>
换行标签
第一行</br>
第二行</br>
第三行</br>
水平线标签
<hr>
字体样式
<strong>粗体</strong>
<en>斜体</en>
特殊符号
空格
© 版权符
图像标签
<img src = "../x.jpg" alt = "图片名称" title = "悬停文字" width = "300" height = "300" />
-
src(必填项):图片地址
- 相对地址 绝对地址
- …/表示上一级
-
alt(必填项):图片名称(当图片无法加载时,显示图片名称)
-
title:悬停文字
-
W-H:宽高
链接标签
页面间链接
<a href = "网址" target = "_blank/_parent/_self/_top" >点击跳转</a>
<a href = "URL">
<img src = "../x.jpg" alt = "图片名称" title = "悬停文字" width = "300" height = "300" />
</a>
- href(必填项):跳转页面的地址
- target:表示窗口在哪里打开
- _blank 在新标签中打开
- _self 在自己的网页中打开
锚链接
-
需要一个标记
-
跳转到标记
<a name = "menu">目录</a> <a href = "#menu">点击跳转到目录</a>
功能性链接
邮箱链接:moilto
<a href = "804614217@@qq.com">点击联系我</a>
QQ链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击加我QQ" title="点击加我QQ"/></a>
行内元素和块元素
- 块元素
- 无论内容多少,该元素独占一行
- (p,h1-h6…)
- 行内元素
- 内容撑开宽度,左右都是行内元素会在一排显示
- (a,strong,em…)
列表
列表分类
- 有序列表
- 无序列表
- 自定义列表
有序列表
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
无序列表
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
自定义列表
<dl>
<dt>小标题</dt>
<dd>第一行</dd>
<dd>第二行</dd>
<dt>小标题</dt>
<dd>第一行</dd>
<dd>第二行</dd>
<dl>
表格标签
<table border = "1px">
<tr>
<td colspan = "4">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan = "2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
视频和音频
-
视频
-
video
-
<video src = "URL" contols autopaly></video>
-
-
音频
-
audio
-
<audio src = "URL" contols autopaly></audio>
-
页面结果分析
元素名 | 描述 |
---|---|
header | 标记头部区域内容 |
footer | 标记脚部区域内容 |
section | Web页面中的一块独立区域 |
article | 独立的文字内容 |
aside | 相关内容或应用 |
nav | 导航类辅助内容 |
iframe内联框架
<iframe src = "URL" frameborder = "0" width = "1000px" height = "800px"> </iframe>
通过a标签跳转到iframe标签
<iframe src = "" name = "hello" franmeborder = "0" width = "1000px" height = "800px">
</iframe>
<a href = "https://www.baidu.com" target = "hello">点击在页面内打开百度</a>
表单
<from action = "URL" method = "get">
<p>
<input type = "text" name = "username">
</p>
<p>
<input type = "password" name = "pwd">
</p>
</from>
- action:表单提交的位置,可以是网站,也可以是一个请求处理地址
- method:post,get,提交方式
- get方式提交,可以在URL中看到我们提交的信息,不安全,高效
- post:比较安全,输出大文件
表单元素格式
input属性 | 说明 |
---|---|
type | 指定元素类型。text,password,checkbox,radio,submit,reset,file,hidden,image,button,默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio是必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password是,输入的最大字符数 |
checked | type为radio会checkbox是,指定按钮是否被选中 |
单选框
- type = radio
- value = 单选框的值
- name = 表示组
<p>
<input type = "radio" value = "boy" name = "sex" checked>男
<input type = "radio" value = "girl" name = "sex">女
</p>
多选框
- type = checkbox
- value = 值
- name = 组
- chceked 默认选择
<p>
<input type = "checkbox" vaule = "seelp" name = "hobby">睡觉
<input type = "checkbox" vaule = "game" name = "hobby" checked>游戏
<input type = "checkbox" vaule = "chat" name = "hobby">聊天
</p>
按钮
- button 普通按钮
- image 图片按钮 点击会直接提交表单
- submit 提交按钮
- reset 重置按钮
<p>
<input type = "button" name = "btn1" value = "点击按钮">
<input type = "image" src = "URL">
</p>
<p>
<input type = "submit" value = "发送">
<input type = "reset" value = "清空">
</p>
文件域
<p>
<input type = "file" name = "files">
<input type = "button" name = "upload" value = "删除">
</p>
下拉框
<p>
<select name = "列表名称">国家
<option value = "value1">中国</option>
<option value = "value2"selected>印度</option>
<option value = "value3">瑞士</option>
</select>
</p>
文本域
<p>
<textare name = "textarea" cols = "50" rows = "10">文本内容</textare>
</p>
邮件验证
<p>
<input type = "email" name = "email">
</p>
URL验证
<p>
<input type = "url" name = "url">
</p>
数字验证
<p>
<input type = "number" name = "num" max = "100" min = "0" step = "1">
</p>
滑块
<p>
<input type = "range" name = "voice" min = "0" max = "100" step = "2">
</p>
搜索框
<p>
<input type = "search" name = "search">
</p>
表单的属性
- 只读 readonly
- 禁用 disabled
- 隐藏 hidden
增强鼠标可用性
<p>
<label fro = "username">用户名</label>
<input type = "text" id = "username">
</p>
当点击用户名时会锁定用户名的输入框
表单初级验证
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
<p>
<input type = "email" name = "email" pattern = "\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"
</p>