# day 1 # HTMl学习

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 在自己的网页中打开

锚链接

1. 需要一个标记

2. 跳转到标记

   <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>