HTML5基础与表单详解-优快云博客

HTML5文件的基本结构

<html>
<head>                             --\ 
     <title>我的第一个网页</title>     网页头部
</head>                            --/
<body>                             --\ 
     我的第一个网页                    主体部分
</body>                            --/
</html>

HTML常用标签

文本

段落p /p
标题h1 /h1----→h6 /h6 标题大小h1最大
换行br
分割线hr
加粗strong /strong
斜体em /em
特殊符号
大于 &gt；
小于 &lt；
引号 &quot；
空格 &nbsp；

图片

scr 路径
alt 如果图片不显示时显示的文本
title 鼠标悬停时候显示的字
width，height：宽度和高度

  <img src="img/img1.png"alt="显示失败" title="图片" height="200" width="400"/>

超链接

普通超链接

  <a href="路径”target=_self；blank；></a>  
   self 在本页面打开 blank新建页面打开

锚链接

  <a name="标记"></a>   先做标记

  <a href="#标记"></a>  找到标记

跨页面锚链接

  <a href="页面地址#标记"></a>     先跳转到页面地址再找到标记位置

块元素
无论内容多少，该元素独占一行（p、h1-h6…）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
在这里插入图片描述

列表

列表分为无序，有序，自定义列表

无序

 <ul style=list-style-type: >   disc默认圆点  circle圆圈  square正方形
 	<li>  xxx  </li>
 </ul>

有序

 <ol type> type默认123 可定义为ABC I II III
	<li>   xxx  </li> 
 </ol>

自定义列表

 <dl>
 <dt>  XXX  </dt>  dt 小标题
 <dd>  xxx  xxx  xxx</dd>  列表内容
 </dl>

表格

表格由 table 标签来定义。每个表格有若干行由tr标签定义。每行被分割为若干单元格由标签定义。
表格的表头使用th标签进行定义。th将文本居中。
带有标题caption /caption

<table>
 <caption> 一个表 </caption>
 <table border="1" border 边框
 <table border="1" cellpadding="10">   表格大小
 <table border="1" cellspacing="10">   表格间距
 <td rowspan="5">xxxx</td>    跨5列
 <td colspan="5">xxxx</td>    跨5行
</table>

多媒体

音频audio

1. <audio src="文件路径" controls></audio>  controls播放
2. <audio controls> 
   <source src="文件路径" type =“文件的格式”/>
   <audio>

视频video

1. <video src="文件路径" controls></audio>
2. <video controls> 
   <source src="文件路径" type =“文件的格式”/>
   <video>

页面布局

header 标题头部区域内容
section 页面一块独立区域
footer 标记脚步区域内容
article 独立的文章内容
aside 侧边栏
nav 导航类辅助内容

iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe>
<a href="网站地址"target="标记名称">点击此处</a>
<iframe name="标记名称" frameborder =“1” height="200px" width="200px">
</iframe>

在这里插入图片描述

表单(form)

表单：接收用户不同类型的输入
input:
文本–text
密码–password
单选框–radio （checked 首选）
复选框–checkbox
文件域–file
邮箱–email
网址–url (需要写清楚网站 http://www.xxx.com)
数字–number
滑块–range
搜索–search
链接图片–image

格式

<form method="get/post">//get/post如何方式发送表单数据 post更安全
<input type="" name="" value="">
</form>

name属性不写不会传输数据
value值不显示但实际传输的是value值
maxlength minlength 可以限制输入字符长短

提交按钮（Submit Button）
<input type="submit">
要在<form>里定义传输数据到达的地址

<form action="8.7ZY.html>

下拉列表

<select>
<option value="1998"（传输数据）>1998(显示内容)</option>
<option value="1999">1999</option>
</select>

selected 首选/预选项

文本域–textarea

文本框格式

 <textarea rows="20" cols="30">
    我是一个文本框。
    </textarea>

隐藏域

<input type="hidden" value="666" name="userid">

只读文本框

<input name="name" type="text" value="张三"  readonly>

禁用文本框

<input type="submit "  disabled   value="保存" >

placeholder
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型

   <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username"  required/>

pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />