html总结
2017-09-11 12:02
267 查看
网站开发包括三部分:前端,数据库,后端
前端包括:html(网站的内容),css(网站的外观),js(网页的效果)
前端部分的内容都是静态写死的。动态页面:有数据交互。
一、html的结构
html5与html的关系:
html 4.01:文档声明有三种方式:http://www.w3school.com.cn/tags/tag_doctype.asp
xhtml 1.0">(wsc组织规定必须按照xml标准):这个的文档声明有三种:例如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
html 5:在之前的html版本上添加了很多新的内容
二、html标签(html4.01)
1、<p>:段落
<br/>:换行
:空格
<pre>:预文本标签,对上面三种标签有用
2、<hn>:权重比较高,具有语义化
3、<body>:有属性bgcolor,background,text;(尽管有一些标签的属性可以更改这个标签的外观,但是一般不通过属性去更改标签的外观,而是通过css)
4、列表
<ol><li>:有序列表
<ul><li>:无序列表
<dl><dt><dd>:定义列表(一问一答,解释)
5、特殊文字样式
<b>粗体
<i>斜体
<u>下划线
<s>删除线
<sup>将文字以上标字体的方式显示
<sub>将文字以下标字体的方式显示
6、<table>表格:比较有规格的,几行几列的会用table;属性:cellpading:文字距离边框的距离;cellspacing:边框之间的距离
<caption>表格的标题 属性:align(标题的位置)
<tr>
<th>标题
<td> rowspan:跨行;colspan:跨列 这两个属性是html特有的,无法用css实现,牢记
7、<img src=" ">
(src="/img/1.jpg" /表示更目录,运行在服务器上,可以找到图片,本地则打不开
src="~/img/1.jpg 只能在后端才可以)
属性:height.width,border
lowsrc="低分辨率图片的位置“:网络阻塞时,读取低分辨率的图片;alt=“该图片不能显示”:当浏览器不能显示图片时,用文字替代显示;这两个是html特有的属性
8、超链接 <a href="javascript:;" target="_blank" title=“aa"> href,target,title也是html特有的属性(title:鼠标放上去时显示)
9、表单<form action="1.ashx"method=“post”>:和后端的交互,整个表单都提交
method="get":get提交是静将数据显示在地址栏,没有安全性,有字节现在限制,较小的字节;method="post":提交较多的数据,安全性较高
通过form提交到后台,元素必须写name属性
form元素:除了submit和reset必须写在form中,其他可以单独使用
10、fieldset 元素可将表单内的相关元素分组
11、iframe元素会创建包含另外一个文档的内联框架
12、abbr缩写
<abbr title="Hyper textMarkup Lnguage">HTML</abbr>
13、版权符
©
三、新增html5标签
1、audio,video
2、canvas(需要js)
3、主体结构标签(html4.01都是用div+css,语义化不好,但是兼容性比h5好)
hgroup:当元素有多个层级时,该元素可以将
figure:标签规定独立的流内容
4、非主体结构标签
detalist 定义选项列表(可以自己输入,也可以进行选择)
menu定义菜单列表
address地址标签
progress进度条标签
mark高亮显示
time定义时间日期
新增的表单元素
5、新增的全局属性
contenteditable="true":可编辑元素的内容
hidden="hidden":对元素进行隐藏
前端包括:html(网站的内容),css(网站的外观),js(网页的效果)
前端部分的内容都是静态写死的。动态页面:有数据交互。
一、html的结构
<!DOCTYPE html> <!--文档声明:告诉浏览器html的版本html5--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--xmlns即是XHTML namespace的缩写,也就是所谓的“命名空间”,xmlns也属于一种声明。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容--> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--编码方式:乱码一般是由于编码方式不统一-->
<meta name="description" content="" /> <!--对网站的描述-->
<meta http-equiv="X-UA-Compatible" content="IE-edge" /> <!--强迫浏览器以最新的ie版本进行渲染-->
<link rel="shortcut icon" href="img/mm.png" /> <!--网站的图标--> <title></title> <!--一个网站title的权重最高,title:百度限制30个中文,60个字符--> </head> <body> </body> </html>
html5与html的关系:
html 4.01:文档声明有三种方式:http://www.w3school.com.cn/tags/tag_doctype.asp
xhtml 1.0">(wsc组织规定必须按照xml标准):这个的文档声明有三种:例如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
html 5:在之前的html版本上添加了很多新的内容
二、html标签(html4.01)
1、<p>:段落
<br/>:换行
:空格
<pre>:预文本标签,对上面三种标签有用
2、<hn>:权重比较高,具有语义化
3、<body>:有属性bgcolor,background,text;(尽管有一些标签的属性可以更改这个标签的外观,但是一般不通过属性去更改标签的外观,而是通过css)
4、列表
<ol><li>:有序列表
<ul><li>:无序列表
<dl><dt><dd>:定义列表(一问一答,解释)
5、特殊文字样式
<b>粗体
<i>斜体
<u>下划线
<s>删除线
<sup>将文字以上标字体的方式显示
<sub>将文字以下标字体的方式显示
6、<table>表格:比较有规格的,几行几列的会用table;属性:cellpading:文字距离边框的距离;cellspacing:边框之间的距离
<caption>表格的标题 属性:align(标题的位置)
<tr>
<th>标题
<td> rowspan:跨行;colspan:跨列 这两个属性是html特有的,无法用css实现,牢记
7、<img src=" ">
(src="/img/1.jpg" /表示更目录,运行在服务器上,可以找到图片,本地则打不开
src="~/img/1.jpg 只能在后端才可以)
属性:height.width,border
lowsrc="低分辨率图片的位置“:网络阻塞时,读取低分辨率的图片;alt=“该图片不能显示”:当浏览器不能显示图片时,用文字替代显示;这两个是html特有的属性
8、超链接 <a href="javascript:;" target="_blank" title=“aa"> href,target,title也是html特有的属性(title:鼠标放上去时显示)
9、表单<form action="1.ashx"method=“post”>:和后端的交互,整个表单都提交
method="get":get提交是静将数据显示在地址栏,没有安全性,有字节现在限制,较小的字节;method="post":提交较多的数据,安全性较高
通过form提交到后台,元素必须写name属性
form元素:除了submit和reset必须写在form中,其他可以单独使用
<input type="text" name="username"/> <input type="password"/> <input type="button"/> <input type="reset"/> <input type="submit"/> <input type="image"/> <input type="checkbox"/> <input type="radio" name="sex" id="male"/><label for="male">男</label> <!--单选按钮:name相同才能单选;设置label可以实现点击文字即选中-->
<input type="radio" name="sex" id="female"/><label for="female">女</label> <input type="file"/> <input type="hidden"/>
<texarea name="njcd" cols="10" rows="3"></texarea>
<select>
<option value="apple">苹果</option>
<option value="orange">橘子</option>
</select> <!--下拉菜单:加属性multiple="multiple"可以复选-->
10、fieldset 元素可将表单内的相关元素分组
<fieldset> <legend align="top">图书分类</legend> </fieldset> <!--<legend> 为 fieldset 元素定义标题-->
11、iframe元素会创建包含另外一个文档的内联框架
12、abbr缩写
<abbr title="Hyper textMarkup Lnguage">HTML</abbr>
13、版权符
©
三、新增html5标签
1、audio,video
<audio src="1.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio><!--controls显示; autoplay自动播放;loop循环次数-->
2、canvas(需要js)
3、主体结构标签(html4.01都是用div+css,语义化不好,但是兼容性比h5好)
hgroup:当元素有多个层级时,该元素可以将
h1到
h6元素放在其内,譬如文章的主标题和副标题的组合
figure:标签规定独立的流内容
4、非主体结构标签
detalist 定义选项列表(可以自己输入,也可以进行选择)
<input type="text" list="taglist" /> <datalist id="taglist"> <!--id必须与上面的list一致--> <option>苹果</option> <option>橘子</option> <option>西红柿</option> </datalist>details定义文档细节:说明
<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>
menu定义菜单列表
address地址标签
progress进度条标签
mark高亮显示
time定义时间日期
新增的表单元素
<input type="email" required="required"/> <!--required属性:判断内容不为空--> <input type="url" autofocus="autofocus"/> <!--autofocus属性:页面加载时获取焦点--> <input type="tel" pattern="[1-9][0-9{10}"/> <!--pattern:自定义验证,用正则表达式--> <input type="number" min="1" max="20" step="4" /> <input type="range" min="1" max="20" step="4" /> <input type="search" placeholder="请输入用户名"/> <!--placeholder属性:默认内容提示--> <input type="color" /> <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" />
5、新增的全局属性
contenteditable="true":可编辑元素的内容
hidden="hidden":对元素进行隐藏
相关文章推荐
- 问题总结php、html、js、css、java、python、vue、spring等
- 学习HTML:iframe用法总结收藏
- Html常用标记总结
- Html 标签简单总结
- HTML第一课总结
- ASP.net对URL网址重写成.html格式、RSS、OPML的知识总结
- js高级程序设计(第三版)这一遍的总结——第二章在html中使用js
- HTML总结——3
- Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下) .
- html知识点总结积累
- 总结项目开发中用到的一些css\html技巧
- 总结-svn,redis,html,nginx
- HTML重要标签总结
- 什么是html总结
- 自我学习总结2:在各个网页基本上一致时,通过URL传一个值就可以实现一个html实现多个页
- 迷茫小左 HTML表单提交总结
- html&css总结
- HTML标签学习总结(1)
- HTML-个人总结
- HTML设置超链接字体颜色和点击后的字体颜色(总结)