HTML5总结

快捷键:

​ 快速注释 ctrl+/

​ 复制当行:ctrl+D

常用代码:

标题标签:<h1..hn> 段落标签:<p> 换行:<br> 水平线:<hr> 特殊: &xxx; 字体样式:粗体<strong>
图像标签:<img src=.. alt="图片替代文字" titli="图片悬停文字" width height>
视频/音乐标签:<video/audio src=".." controls(控制条) autoplay(自动播放)>
链接:<a href=".."> 锚链接:<a name="锚处"> <a href="锚处"> 邮箱链接:<a href="mailto:xx@xx">
内联框架:<iframe src=".." name=".." w/h>
表格:表格:table 行:tr 列:td 跨列:colspan 跨行:rowspan 居中:align="center"

重点:
    
表单:	  <form action="xx.html" method="post/get">  表单送到xx位置,提交方式post/get
    	<p>名字:<input type="text" name="username"></p> 文本框:用户输入名字 
    	<p>密码:<input type="password" name="psw"></p>  文本框:用户输入密码(type改为password)
    	<p><input type="submit"><input type="reset"></p> 提交与重置按钮										<form/>  都在form下<form action".." method="..">xxx</form>
表单字符限制:maxlength 表单框长度限制:size 表单默认值:value
    
表单单选项radio:  <input type="radio" value="boy" name="sex"><input type="radio" value="girl" name="sex">女
表单多选项checkbox:<input type="checkbox" value="slepp" name="hobby" >睡觉
        		 <input type="checkbox" value="game" name="hobby" >游戏
表单下拉框selecet:<select name="列表名称">
            	<option value="提交选项的值">中国</option>
            	<option value="提交选项的值">美国</option><select/>
           
按钮:input type="button/submit/reset/image" 图片也可当按钮
上传文件/文本:
    文本域(上传文本) textarea  属性cols 列 rows 行
    	<p align="center">填写其他建议:
        <textarea name="columns" cols="30" rows="10">其他信息</textarea></p>
    文件域(上传文件) input type="file"
    	<input type="file" name="files">
    	<input type="button" value="上传" name="upload">
滑块: input里的range 也可有step
    	<input type="range" name="range">
搜索框:input里的search
 		<input type="search" name="search">
验证:邮箱验证:input里的email URL验证:input里的url 数字验证:input里的number
    	<input type="email" name="email">//<input type="number" name="num" step="10">
表单其他应用属性:只读:readonly  禁用:disabled  隐藏:hidden 默认提示信息:placeholder
    		   非空判断:元素/表单不能为空:required  正达表达式:pattern
网页的基本标签
标题标签:<h1>一级标签</h1>
段落标签:<p> <p/>
换行标签:<br>
水平线标签:<hr/>
字体样式标签:<strong><strong/>粗体 <em><em/>斜体
注释:<!-- -->
特殊字符:&nbsp; 空格 (格式 &xxx;
图像标签
<img src="../statics/images/tx.jpg" alt="实例" title="测试"
     width="640" height="640" />
alt:若图片链接失效,图片的替代文字 
titles:图片悬停的文字
注意:src下文件目录 最好根据提示来 
超链接

锚链接

target:表示窗口在哪打开  _blank:在新标签打开 
	<a href="1.first.html" target="_blank">在新标签页跳转到我的第一个网页</a>
锚链接:自定义name
	<a name="top">顶部</a>  
		。。。。
	<a href="#top">回到顶部</a>

行内元素和块元素

块元素
    无论内容多少 该元素独占一行
    如 <p>2</p> <h1>1</h1>
行内元素
    内容可以撑开宽度 如
    <a href=""></a> a hrpe="" ,<strong><strong/>,<em></em>
列表

​ 有序,无序,自定义

<!--有序列表-->
<ol>
    <li>php</li>
    <li>java</li>
    <li>c++</li>
</ol>

<!--无序列表-->
<ul>
    <li>java</li>
    <li>php</li>
    <li>c++</li>
</ul>

<!--自定义列表-->
dl:标签
    st:列表名称
    dd:列表内容
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>c++</dd>
    <dd>php</dd>


    <dd>福建</dd>
    <dd>厦门</dd>
表格

​ 列,行 跨行,列

<!--表格:table
行: tr
列: td
跨列:colspan
跨行:rowspan
居中:align="center"
-->
<table border="1px">
    <tr>
        <td colspan="4" align="center"><em><strong>学生成绩表</strong></em></td>
    </tr>
    <tr>
        <td rowspan="2">卿兴</td>
        <td>语文</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td rowspan="2">超哥</td>
        <td>语文</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>不错</td>
    </tr>

</table>

媒体元素

​ 音频,视频

muted(在src前) autoplay:自动播放
control:控制条 必加

视频:<video muted src="china.mp4" controls autoplay></video>
音频:<audio src="ab410f7bbbb0955e7ae476ae89527a5d.m4a" controls></audio>
网页的简单布局

​ 头,脚部,主体

<!--header:头部footer:脚部section:主体 web中的独立区域article:文章内容aside:相关内容或应用(侧边栏)nav:导航类辅助内容--><hrader>头部</hrader><foot>脚部</foot><section>主体</section><article>文章</article><aside>侧边栏</aside><nav>导航辅助</nav>
内联框架

​ 网站内部加内别网页:iframe:farmeborder

	<iframe src="" name="hello" frameborder="0" width="1200px" height="1500px"></iframe><a href="7.列表.html" target="hello">点击跳转</a>
表单

一般格式:

	1.<form action="9.表格.html" method="get"><form\>    2. 账户:<input type="text" name="username" value="这里输入你的账号">        密码:<input type="password" name="psw" >    3.提交或重置<input type="submit" name="这是提交">        		<input type="reset" name="这是重写"> action:表单提交的位置,可以是网站、请求处理地址method :提交方式 post get           post:较为安装,可传输大文件           get:url可看提交的信息, 不安全,高效<form action>中间写表单 别超出去了<form/>账号密码 input type"text/password"按钮:submit:提交  reset:重设--><form action="7.列表.html" method="post">    <p>名字:<input type="text" name="username"></p>    <p>密码:<input type="password" name="psw"></p>    <p>        <input type="submit">        <input type="reset">    </p></form>

form[post/get] 文本框 密码框 单选框 多选框 按钮 下拉框 滑块

form[post/get]:<form action="xx页面" method="get或者post">    文本框:<input type="text" name=xx>        密码框:文本框的 "text" 改为 "password"         单选框:文本框的 "text" 改为 "radio"    	例:性别:<input type="radio" value="boy" name="sex"><input type="radio" value="girl" name="sex">女        多选框:文本框的 "text" 改为 "checkbox"    	例:<p align="center">多选:爱好        	<input type="checkbox" value="slepp" name="hobby" >睡觉       	 	<input type="checkbox" value="game" name="hobby" >游戏        	<input type="checkbox" value="code" name="hobby" checked>代码        	<input type="checkbox" value="chat" name="hobby" >聊天 </p>    多选:checkbox 单选:radio 都有value(默认值) name(组)属性checked 默认选中	按钮:button 图片也可当按钮 常见的按钮-->						input type="button"						input type="image"						input type="submit"						input type="reset"	    
表单的应用

隐藏域 只读 禁用

	只读:readonly:账号:<input type="text" name="username" value="admin" readonly>    禁用:disabled:<input type="radio" name="sex" disabled>男       			  <input type="radio" name="sex">女    隐藏:hidden:密码:<input type="password" name="psw" value="123456" hidden>
表单的初级验证

用户提示(默认提示信息) 非空判断 正则表达式

默认提示信息:placeholder:账户:<input type="text" name="usn" placeholder="admin" required>非空判断:元素/表单不能为空:required:同上。输出页面为账户默认填写admin,且不能为空正达表达式:pattern:<input type="ip"  name="diymail" pattern="网上w3c有表对应"邮箱验证:input里的email:<p>邮箱:<input type="email" name="email"></p>URL验证:input里的url:<p>URL:<input type="url" name="url"> </p>数字验证:input里的number  注意:最大最小值max/min 步进step 按多少增加     		<p>数字:<input type="number" name="num" step="10"></p>                

简单使用:

test1:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title></head><body><p align="center"><strong><em>填写信息查看表格</em></strong></p><form action="20.test.html" method="get">    <p align="center">        账号:&nbsp;<input type="text" name="usn" value="admin" required>        密码:&nbsp;<input type="password" name="psw" required>    </p>    <p align="center">性别(checked默认先选女):        <input type="radio" name="sex" ><input type="radio" name="sex" checked></p>    <p align="center">兴趣(多选框 写代码被默认选择):        <input type="checkbox" name="hobby" value="code" checked>写代码        <input type="checkbox" name="hobby" value="game">玩游戏        <input type="checkbox" name="hobby" value="sleep">睡觉    </p>    <p align="center">来自:(下拉框 英国默认先选中):        <select name="下拉框">            <option name="选项的值">中国</option>            <option name="选项的值" selected>英国</option>            <option name="选项的值">美国</option>        </select>    </p>    <p align="center">..        <select name="下拉框">喜欢的食物:            <option value="1">汉堡</option>            <option value="1" selected>pizz</option>            <option value="1">other</option>        </select>            </p>    <p align="center">其他信息:        你的邮箱:<input type="email" name="email">        你的地址:<input type="url" name="url">    </p>    <hr/>    <p align="center">(重置被禁用disable):        <input type="submit" name="提交">        <input type="reset" name="重置" disabled>    </p></form></body></html>

test2:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>跳转到的信息</title></head><body><!--表格:table行: tr列: td跨列:colspan跨行:rowspan居中:align="center"--><table border="2px">    <tr>        <td colspan="4" align="center" ><strong>学生成绩表</strong></td>    </tr>    <tr>        <td>&nbsp;&nbsp;\</td>        <td>语文</td>        <td>数学</td>        <td>英语</td>    </tr>    <tr>        <td >张三</td>        <td >100</td>        <td >60</td>        <td >B</td>    </tr>    <tr>        <td >李四</td>        <td >60</td>        <td >80</td>        <td >B</td>    </tr></table></body></html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值