HTML基础入门知识点总结
时间:2018-11-18
本文章向大家介绍HTML基础入门知识点总结,需要的朋友可以参考一下
1、html常用标签
- <pre>...</pre>:标识预定义文本
- <a>是anchor的缩写,<a>标签定义锚点和超链接,<a>常与href属性连用表示超链接连接地址并用target来表示打开文档的方法:_blank表示在新窗口中打开、_parent表示在父窗口中打开、_self表示在当前窗口中打开文档, _top表示在顶层窗口中打开文档
- em表示小强调,以斜体显示;strong为着重强调,以粗体显示
- abbr表示简称如dfn表示Definesa Definition Term;samp是Sample;acronym表示首字母缩写如CSS是Cascading Style Sheets的缩写
2、字符格式标签:
- <b>...</b>:标识强调文本,以加粗效果显示。
- <i>...</i>:标识引用文本,以斜体效果显示。
- <blink>...</blink>:标识闪烁文本,以闪烁效果显示。IE浏览器不支持该标签。
- <big>...</big>:标识放大文本,以放大效果显示。
- <small>...</small>:标识缩小文本,以缩小效果显示。
- <sup>...</sup>:标识上标文本,以上标效果显示。
- <sub>...</sub>:标识下标文本,以下标效果显示。
- <cite>...</cite>:标识引用文本,以引用效果显示。
3、xhtml即可扩展标记语言
- 在文档开头必须定义文档类型
- 在根元素中应声明命名空间,如<html xmlns="http://www.w3.org/1999/xhtml">
- 所有标签必须闭合
- 所有元素和属性必须必须小写
- 所有属性必须使用“”括起来
- 所有属性必须被赋值
- 所有特殊符号必须都要用编码表示"<"用"<"表示,">"用">"表示
- 不要在注释中使用"--"标记
- 废除name属性统一使用ID属性
4、meta标记表示网页的相关信息即网页元信息
<meta name="discription" content="标准网页设计专业技术资讯"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-language" content="zh-CN"/> <meta http-equiv="refresh" content="5;url="http://www.css8.cn/"/> <meta http-equiv="pragma" content="no-cache"/>
5、一般一个网页只有一个一级标题。h1、h2和h3元素比较常用,h4元素偶尔使用,h5和h6元素基本上不被使用
6、 引用blockquote、cite和q
- blockquote常用来作大段引用,一般不直接包含内容,引用的内容必须包含在一个元素中,可以与cite联合使用,此时,cite属性指定引文的地址
- q元素可直接包含引文内容,显示效果为外加“”
- cite也可与q元素通用,但不能与<span>元素同用,显示效果为斜体
<cite title="转载地址">http://article.hongxiu.com/a/2007-1-26/1674332.shtml </cite>
7、address表示地址、签名、作者和文档摘要
<address title="作者">张三</address> <address title="详细地址">中国北京</address> <address title="文章摘要">HTML元素的语义特征及其表现</address>
8、列表应该是同类、同型或同质信息的排列和组合
9、table属性summary属性表示表格摘要,不会显示,仅是为语音合成,非视觉浏览器或机器定义的。
<!--表格分组--> <colgroup> <col span="3" /> <col span="3" /> <col span="3" /> <col span="3" /> </colgroup> <thead> <tr> <td rowspan="2">排名</td> <td rowspan="2">校名</td> <td rowspan="2">总得分</td> <td colspan="3">人才培养</td> <td scope="col" colspan="3">科学研究</td> <td scope="col" colspan="2" rowspan="2">分省排名</td> <td rowspan="2">学校类型</td> </tr> <tr> <td>得分</td> <td>研究生培养</td> <td>本科生培养</td> <td>得分</td> <td>自然科学研究</td> <td>社会科学研究</td> </tr> </thead>
10、form元素
- enctype是Encase Type(包装类型)的简称
- enctype="application/x-www-form-urlencoded":将表单中的数据编码为名/值对的形式通过URL字符串的形式发送给服务器
- enctype="multipart/form-data":将表单中的数据编码为一条消息,每个表单域对应消息中的一个部分,然后通过http方式发送到服务器,使用这种方式一般常用来传递二进制信息,例如,使用表单进行 文件上传、提交图像等。
- enctype="text/plain":将表单中的数据以纯文本的形式进行编码,其中不含任何空间(即表单域的名称)的格式字符。这种方法一般很少使用,也不建议使用。
- get和post传递方法:get以ADCII字符通过URL地址栏传递,不够安全,且受地址栏长度的影响,传输数据量有限;post方法则没有字符集和容量大小的限制,且比较安全。
11、input元素
- 复选框包括value属性和checked属性,value属性设置复选框的传递值,checked属性设置默认选中状态
- 单选按钮多个name属性值必须相同,因为单选按钮实质上仅是一个开关,只有两个值,true和false,服务器仅把单选按钮的值作为一个逻辑值来处理
- type="file"当表单域包含file域时,必须设置method属性为post且enctype="multipart/form-data",否则提交操作将失败
- type="image"图像按钮,它是普通按钮的自定义样式。src指定图像URL,该按钮没有动作,需要通过脚本形式为其定义操作的动作
- type="button"普通按钮,没有动作,需要通过脚本为其定义动作
12、表单分组:legend元素必须包含在fieldset元素内部,且紧邻fieldset元素。
<form action="action.asp" name="register" id="login"> <fieldset> <legend>基本信息(必填)</legend> <ul> <li>用户名<input id="" maxlength="12" size="30" name="username" /> <span>注册用户名长度限制为3~12字节</span></li> <li>论坛密码<input type="password" maxlength="16" size="30" value="" name="psw" /></li> </ul> </fieldset> <fieldset> <legend>参考资料(选填)</legend> <ul> <li>个人网址<input maxlength="80" size="44" name="homepage" /></li> <li>QQ号码<input maxlength="20" size="44" name="OICQ" /> <span>填写您的QQ号码,方便与他人的联系 </span></li> </ul> </fieldset> <p><input name="" type="submit" value="提交" /></p> </form>
13、绑定标签和定义键盘属性
<li> <label for="username">用户名</label> <input type="text" id="username" name="username" accesskey="a" tabindex="2"/> <span>注册用户名长度限制为3~12字节</span></li> <li>
14、select选项分区
<form action="action.asp" name="register" id="login"> <p> <select name=""> <optgroup label="数字"> <option value="1">1</option> <option value="2">2</option> </optgroup> <optgroup label="字母"> <option value="a">a</option> <option value="b">b</option> </optgroup> </select> <input name="" type="submit" value="提交" /> </p> </form>
15、元素显示类型
- 块状显示
- 第一:块状元素默认宽度都是100%,即块状元素会挤满一行显示
- 第二:块状元素的头尾都会隐藏一个换行符,即块状元素前面和后面都不能再有其它块状元素和行内元素,也就是每个块状元素都单独在新行显示
- 行内显示
- 第一:行内元素没有高度和宽度,即使为它定义高度,浏览器也不会解析
- 第二:行内元素的呈现效果与块状元素存在很大差异,这不仅仅体现在宽度和高度方面,它们可以并列显示,随行移动
- 行内块状显示
- 行内块状显示是行内显示和块状显示的结合,拥有各自优势,但必须通过CSS样式申明,即元素不会默认显示为行内块状元素
- 表格显示和列表显示都是一种有其自身特点的块状元素
16、块状元素
- html、body、form、fieldset、legend、div、p、h1~h6、ol、ul、ol、dl、dt、dd、menu、col、colgroup、pre、address、blockquote、hr、title
行内元素
- span、a、area、img、abbr、acronym、b、bdo、big、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、sub、sup、tt、u、var、strong、button、select、textarea、label、object、caption、noscript
标头区域隐藏元素
- head、base、basefont、link、meta、script、style
行内块状元素
- input、optgroup、option
列表项元素
- li
结构内隐藏元素
- map、param、br
表格系列类型元素
- table、th、tr、caption、summary、tbody、thead、tfoot、td
17、结构嵌套规则
- 元素名称必须小写
- 块状元素可以包含行内元素,但是行内元素不能包含块状元素,只有ins和des两个特殊的行内元素可以包含块状元素或行内元素
- scrpt元素既能包含在head元素中也能包含在body元素中,而style元素只能包含在head元素中
- p和h1~h6可以直接包含行内元素和纯文本内容而不能直接包含块状元素,但可以间接包含块状元素
- ul和ol只能直接包含li元素,但是li元素可以包含任何其它元素
- dl只能直接包含dt和dd元素,但dt元素只能包含行内元素,不能包含任何块状元素,而dd元素可以包含任何元素
- form只能直接包含块状元素,input是行内元素,因此form不能直接包含input元素
- caption只能包含行内元素,而th和td能包含任何元素
18、局部结构的设计中尽量避免使用ID
- 第一:局部结构一般多使用语义性标签,定义ID意义不打
- 第二:局部结构可能会出现很多重复的结构,定义ID容易引发冲突
- 第三:如果要控制局部结构的样式,可以使用包含选择符来精确控制文档结构
19、HTML5语法是为了保证和之前的html语法达到最大程度的兼容而设计的。
- 文档类型声明统一定义为<!doctype html>
- meta元信息可以简化为<meta charset="utf-8"/>
- 可以省略标记的元素
- 第一:不允许写结束标记的元素有area、base、br、col、command、embed、hr、img、input、keygen、link、param、source、track、wbr
- 第二:可以省略结束标记的元素有li、dd、dt、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
- 第三:可以省略全部标记的元素有html、head、body、colgroup、tbody
- 具有布尔值的属性
- <!--只写属性,不写属性值,代表属性为true--> <input type="checkbox" checked> <!--不写属性,代表属性为false--> <input type="checked"> <!--属性值=属性名,代表属性为true--> <input type="checkbox" checked="checked"> <!--属性值=空字符串,代表属性值为true--> <input type="checkbox" checked="">
- 省略引号<input type="text"> <input type=text> <input type="“>
20、html5把元素分为六大类
- 内嵌:在文档中添加其它类型的内容,如audio、video、canvas、和iframe等
- 流:在文档和引用的body中使用的元素,如form、p和div等
- 标题:段落标题,如h1、h2和hgroup等
- 交互:与用户交互的内容,如音频和视频的控件、button和textarea等
- 元素据:通常出现在页面的head中,设置页面其它部分的表现和行为,如script、style和title等
- 短语:文本和文本结束标记,如mark、kbd、sub和sup等
21、div、section和article
- div元素关注结构的独立性,常作为一个容器布局大块。
- article元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。
- section元素用于对网站或者应用程序中页面上的内容进行分块。通常section元素用于对那些有标题的内容进行分段
- article可以看做特殊的section,article元素更强调独立性、完整性,section更强调相关性。而section元素关注内容的独立性,section元素包含的内容可以单独存储在数据库中或输出到word文档中。
22、nav和aside
- nav元素是一个可以用作页面导航的连接组。并不是所有的连接组都要放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。
- aside元素用来表示当前页面或文章的附属信息部分。
不要为没有标题的内容使用section元素,但是nav元素和aside元素没有标题是合理的。
- WCF Data Service工具包
- WordPress 文章截断方式:有more标签的优先more标签,否则截断一定字数
- 为什么要探索宇宙
- Redis的各项功能解决了哪些问题?
- WordPress.com 宣布支持Markdown 语言
- 使用Topshelf 5步创建Windows 服务
- TGM Plugin Activation:为WordPress 主题添加“插件推荐安装”功能
- [腾讯社区开放平台]介绍开放授权协议-OAuth
- HTML5规范的本地存储
- ASP.NET Web API 处理架构
- ASP.NET MVC 4中的单页面应用程序
- [信息安全] 4.一次性密码 && 身份认证三要素
- 拥抱大数据时代
- 腾讯社区开放平台.NET SDK在Mono下运行
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Kryo 入门指南
- C# 通过T4自动生成代码
- Netty 主从多线程
- 斐波那契数组-递归和循环实现
- KMP算法 C#实现 字符串查找简单实现
- elasticsearch压力测试工具之ESrally使用说明
- BitMap算法 .net实现 用于去重并且排序,适用于大型权限管理 ,大数据去重排序
- 5.FFMPEG-Qt移植ffmpeg、ffmpeg结构体介绍
- winform总结6=>线程和委托的关系
- winform总结3> 有趣的bat/winform程序完成自己的任务,然后把自己删除
- winform总结2> Action<> ,Action,func<>,委托相关的理解
- winform开发 总结1>winform程序使用线程的必要性,以及正确的使用方式
- Winform 后台将指定的控件集合添加到制定容器中
- C#微信公众平台接入示例代码
- FreeRTOS三种数据结构区别(StreamBuffer,MessageBuffer,Queue)