博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html常用的知识点以及混合框架
阅读量:5754 次
发布时间:2019-06-18

本文共 4599 字,大约阅读时间需要 15 分钟。

html中:
 
<hr/> 在页面中创建水平线
例如:

 
<p> p标签是定义段落
 
>
alt 作为可预备可替换信息,在无法加载图片时显示文字信息
 
定义html表格
定义表格
定义表格标题。
定义表格的表头。
定义表格的行。
定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
定义表格列的组。
 
Table with frame="box":四周边框
Month Savings
January $100
Table with frame="above":上边框线
Month Savings
January $100
Table with frame="below":下边框线
Month Savings
January $100
Table with frame="hsides":上下边框线
Month Savings
January $100
Table with frame="vsides":左右边框线
Month Savings
January $100
 
使用 HTML5 的网站布局
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
HTML框架
 
<html>
 
<frameset rows="25%,50%,25%">
 
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
 
</frameset>
 
</html>
<html>
 
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
 
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
 
</frameset>
 
</html>
 
混合框架结构
<html>
 
<frameset rows="50%,50%">
 
<frame src="/example/html/frame_a.html">
noresize="noresize"
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_b.html" noresize="noresize">
<frame src="/example/html/frame_c.html">
加入noresize="noresize"框架不可移动改变大小
</frameset>
 
</frameset>
 
</html>
 
 
导航框架
 
<html>
 
<frameset cols="120,*">
 
<frame src="/example/html/
html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
 
</frameset>
 
</html>
内联框架
<html>
 
<body>
 
<iframe src="/i/eg_landscape.jpg"></iframe>
 
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>
 
 
</body>
</html>
 
内联框架iframe
 
添加 iframe 的语法
URLIframe - 设置高度和宽度
实例
 
 
Iframe - 删除边框
实例
 
 
<!DOCTYPE html>
<html>
<body>
 
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
 
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
 
<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
 
</body>
 
 
<noscript> 标签
Your browser does not support JavaScript!
HTML实体名
HTML 中有用的字符实体
注释:
显示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
分(cent) &cent; &#162;
£ 镑(pound) &pound; &#163;
¥ 元(yen) &yen; &#165;
欧元(euro) &euro; &#8364;
§ 小节 &sect; &#167;
© 版权(copyright) &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷      
 
html中颜色名
 
 
HTML5 表单元素
 
HTML5 <datalist> 元素
listid 实例
 
 
 
 
<input type="password">密码字段
输入限制
属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。
 
type=date
 
<form action="action_page.php">
Birthday:
<input type="date" name="bday">
</form>
 
 
可以输入添加限制
 
<form action="action_page.php">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>
 
常见的输入
输入类型:range
<input type="range">实例
<form> <input type="range" name="points" min="0" max="10"> </form>
输入类型:month
<input type="month">实例
<form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>
输入类型:week
<input type="week">实例
<form> Select a week: <input type="week" name="week_year"> </form>
输入类型:time
<input type="time">实例
<form> Select a time: <input type="time" name="usr_time"> </form>
输入类型:datetime
<input type="datetime">实例
<form> Birthday (date and time): <input type="datetime" name="bdaytime"> </form>
输入类型:datetime-local
<input type="datetime-local">实例
<form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>
输入类型:email
<input type="email">实例
<form> E-mail: <input type="email" name="email"> </form>
输入类型:search
<input type="search">实例
<form> Search Google: <input type="search" name="googlesearch"> </form>
输入类型:tel
<input type="tel">实例
<form> Telephone: <input type="tel" name="usrtel"> </form>
输入类型:url
<input type="url">实例
<form> Add your homepage: <input type="url" name="homepage"> </form>
 
 
 
readonly 属性
readonly
disabled 属性
disabled
maxlength 属性
maxlength实例
 
 
autocomplete 属性
 
autofocus 属性 页面加载自动获得焦点
 
form 属性
实例
 
 
formaction 属性
实例
 
 
height 和 width 属性仅用于 <input type="image">。
实例
 
 
multiple 属性
实例
 
 
pattern 属性
<form action="/example/html5/demo_form.asp" method="get">
国家代码:<input type="text" name="country_code" pattern="[A-z]{3}"
title="三个字母的国家代码" />
<input type="submit" />
</form>
 
placeholder 属性
实例
 
required 属性
 
step 属性
示例
 
HTML5 浏览器支持
 
 

转载于:https://www.cnblogs.com/lihaolh/p/6774657.html

你可能感兴趣的文章
【Android游戏开发之十】(优化处理)详细剖析Android Traceview 效率检视工具!分析程序运行速度!并讲解两种创建SDcard方式!...
查看>>
微信小程序之wx.navigateback往回携带参数
查看>>
陌陌和请吃饭之类的应用,你要是能玩转,那就厉害了
查看>>
递归的运行机制简单理解
查看>>
汉字转阿斯克马值
查看>>
Java 栈与堆简介
查看>>
【supervisord】部署单进程服务的利器
查看>>
zabbix oracle监控插件orabbix部署安装
查看>>
python3 通过qq 服务器 发送邮件
查看>>
java 多线程踩过的坑
查看>>
部署Replica Sets及查看相关配置
查看>>
倒序显示数组(从右往左)
查看>>
LeetCode2_Evaluate Reverse Polish Notation评估逆波兰表达式(栈)
查看>>
文献综述二:UML技术在行业资源平台系统建模中的应用
查看>>
阿里云服务器 linux下载 jdk
查看>>
Swift 学习 用 swift 调用 oc
查看>>
第三章 Python 的容器: 列表、元组、字典与集合
查看>>
微信小程序开发 -- 点击右上角实现转发功能
查看>>
问题解决-Failed to resolve: com.android.support.constraint:constraint-layout:1.0.0-alpha7
查看>>
与MS Project相关的两个项目
查看>>