HTML学习笔记NO.1

最新推荐文章于 2022-01-15 17:54:58 发布
最新推荐文章于 2022-01-15 17:54:58 发布
阅读量736 收藏
点赞数
分类专栏： 网页开发 文章标签： html intellij idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zs2538596/article/details/43448137
版权
HTML：
是用来描述网页的一种语言
超文本标记语言Hyper Text Markup Language
不是编程语言，是一种标记语言


新特性：
用于绘画的canvas标签
用于媒介回放的video和audio元素->视音频文件
对本地离线存储的更好支持
新的元素内容：如article、footer、header、nav、section
新的表单控件：如：calender、date、time、email、url、search
浏览器的支持：chrome、firefox以及Opera和IE9


开发工具：
常用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver等
推荐：Intellij IDEA

需要掌握的技能：
HTML5 XHTML CSS3 JavaScript jQuery：jQuery-Ui jQuery-Mobile

HTML基础讲解：

声明：<!DOCTYPE>
html也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确
地显示出HTML页面。这就是<!DOCTYPE>的用处

不同版本的HTML有不同的HTML声明
到HTML5直接使用：<!DOCTYPE html>

常用标签属性：
<h1>:align对齐方式
<body>:bgcolor背景颜色
<a>:target规定在何处打开连接

通用属性：
class : 规定元素的类名
id    : 规定元素唯一ID
style : 规定元素的样式
title : 规定元素的额外信息

格式化：
<b>粗体文本
<big>大号字------html5过时通常使用css来代替
<em>着重文字
<i>斜体字
<small>小号字
<strong>加重语气
<sub>下标字
<sup>上标字
<ins>定义插入字
<del>定义删除字

HTML5样式、连接和表格

标签：
<style>样式定义
<link>资源引用----如引入CSS样式

属性：
rel="stylesheet":外部样式表
type="text/CSS":引入文档的类型
margin-left：边距----距离左边或者右边的距离

三种样式表插入方法：

外部样式表：reference link ->rel http refernece link ->href
<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表：
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
</style>

内联样式表：
<p style="color:red">

连接属性及其使用：

1、连接数据：
文本连接
图片连接

2、属性：
href属性：指向另一个文档的连接
name属性：创建文档的连接

3、imag标签属性：
alt：替换文本属性
width：宽
height：高

HTML表格
<table>定义表格
<caption>表格标题
<th>表格的表头
<tr>表格的行
<td>表格的单元
<thead>表格的页眉
<tbody>表格的主体
<tfoot>表格的页脚
<col>表格的列属性

HTML列表：
<ol>有序列表
<ul>无序列表
<li>列表项
<dl>列表
<dt>列表项
<dd>描述

无序列表使用标签：<ul>、<li>
属性：disc、circle、square

有序列表使用标签：<ol>、<li>
属性：A、a、I、i、start

嵌套列表使用标签：<dl>、<dt>、<dd>

HTML块：

块元素：
块元素在显示时，通常会以新行开始,如：<hl> <p> <ul>

内联元素：
内联元素通常不会以新行开始，如:<b> <a> <imag>

<div>元素：也被成为块元素，其主要是组合HTML元素的容器

<span>元素：是内联元素，可作为文本的容器

HTML布局：
div或者table来进行布局

HTML表单：
表单用于获取不同类型的用户输入

常用标签：
<form> 表单
<input> 输入域
<textarea>文本域
<label>控制标签
<fieldset>定义域
<legend>域的标题
<select>选择列表
<optgroup>选项组
<option>下拉列表中的选项
<button>按钮


这个是以上知识点的实践练习源代码：http://pan.baidu.com/s/1qWNW86S点击打开链接  （新增）

Quant_1989
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《DW学习笔记》 模块一 ：初识网页设计
小陈的博客
03-23 3045
模块一 ：初识网页设计 任务1：网页设计相关概念 一、网页与网站 什么是网页 （web page）？ 网站中的一页，一个网站中的网页通过“超链接”的方式被组织在一起。 什么是网站（web site）？ 互联网上用于展示特定内容的相关网页的集合。 二、网页的构成元素 1、构成网页的元素，主要包括：文字、图像、音频视频、动画、样式、各类脚本等 （1）文字 文字是网页最基本的组成元素之一。文字在网页中的表现形式主要涉及到字体、字号和编码。 （2）图像 图像也是网页中最常见的元素之一，比文字的效果形象、生动。常
Dreamweaver学习笔记
12-24
网页设计的专业工具以及辅助网站管理工具，应用十分广泛
git学习笔记，入门指南以及常用git指令
12-03
git学习笔记常用git指令 一．创建或clone版本库 1.在本地创建一个新的版本库 $git init（cd至需要用到的地址，文件夹，用git init初始化版本库） 2.克隆一个已经存在的版本库 $git clone [email protected]:SourireG/gitskills.git（clone github上的远程库gitskills.git至当前目录下） 二.本地改变 1.命令用于显示工作目录和暂存区的状态。 $get status 2.查看文件在工作目录与暂存区的差别。 $git diff <filename> Git diff及其子命令详解：https://www.cnblogs.com/xuxiuxiu/p/8522594.html 3.将工作目录的文件添加至缓存区 git add <filename> 4.git add 拓展 git add -u/--update [<path>] 提交所有文件的删、改状态，不包含新建文件 git add ./-A/--all 提交所有文件增、删、改状态 git add --no-all/--ignore-removal 添加所有文件增、改状态，不包括删除 git add -p/--patch 交互式选择提交代码块 git add -i/--interactive 暂存区交互式操作面板，比 -p 功能更多 5.git commit a.git commit -a -m可以将所有已跟踪文件中的执行修改或删除操作的文件都提交到本地仓库，即使它们没有经过git add添加到暂存区（一般不建议使用-a） b.git commit -m “”将暂存区的文件提交到仓库，“”中是本次提交的说明 c.git commit --amend 追加提交，它可以在不增加一个新的commit-id的情况下将新修改的代码追加到前一次的commit-id中。
Lotus Domino WEB详细 学习笔记
04-14
Lotus Domino WEB 开发技术积累-DOC(313页) 1. 选取视图的列的内容 @Trim @DbColumn 6 2. 隐藏判断常用的命令 6 3. 判断当前用户是否是“某个组”的成员，然后来显示和隐藏 6 4. 在Lotus Domino 中显示图 6 5. 链接JS文件 6 6. 删除文档的方法 7 7. $$return 域的使用 8 8. 将表单设计为视图或导航器模板 9 9. 为 Web 定制“表单已处理”确认信息 10 10. 定制出错信息 11 11. $$HtmlHead几种常用的技巧 11 12. Domino Designer 模板表 12 13. 角色判断 13 14. 判断文档是否正在被修改 13 15. 在只读的方式下返回（$$return 13 16. 刷新表单 14 17. 怎样在文档里存照片？ 14 18. 后台lotusscript如何取得前台表单中复选框所选择的项目列表（b/s结构） 15 19. 试图的列公式：附件下载 15 20. 有没有好一点的分页处理代码 16 21. 同一用户重复登录 18 22. Return to sender 19 23. Agent to copy values from 1 form to another 在同一个数据库中进行 22 24. 超越OLE – 通过COM结合MS Office与Notes应用 23 25. 读写关系数据库资料 28 26. 视图---excel,表单---word 32 27. 关于Web上的检索问题 35 28. 如何使用Notes与关系数据库进行信息交互？ 37 29. 如何在IE里面实现notes中的 对话框列表？ 39 30. LotusDomino环境下编写Web浏览器多数据库检索程序 40 31. WINAPI函数 44 32. 用PowerBuilder访问Lotus Notes数据库 55 33. 如何在表单中加入计数器 58 34. 实现两个数据库间的数据追加 C/S 结构 60 35. 如何防止他人使用旧id和旧口令访问Domino服务器？ 61 36. 在你的WEB站点上使用DOMINO群集 62 37. 在你的DOMINO WEB站点中插入.SWF文件 73 38. DOMINO R5的域搜索功能在WEB上的实现 77 39. Display Rich Text fields in a view 86 40. Auto-Launch a file attachment 87 41. Showing a response count without showing the responses 89 42. 常用的几个按钮收集 91 43. 在WEB上从视图删除文档技巧 93 44. 在Domino Designer中使用XML数据 96 45. 在Domino Designer上执行XML 100 46. Show single category view, the next stage 107 47. Checkboxes in a list box 108 48. Formatting a Notes view in HTML table for WEB 109 49. Jump to the end of a view (web agent) 111 50. Disabling actions until a page finishes loading 114 51. Web-based, fully customizable search 115 52. 从复选框中删除文档Deleting selected docs on Web 120 53. Debugging LotusScript Agents 121 54. Displays the contents of the Subject field in the first document in theExamples view. 124 55. Example: GetLastDocument method 125 56. Examples: GetNextDocument method 125 57. Example: GetFirstDocument method 126 58. Examples: FTSearch method 127 59. Examples: DeleteDocument method 128 60. Example: Deleting a document 129 61. Example: Creating a document 129 62. Examples: Locating documents within a view or folder 130 63. Example: Adding a document 135 64. Export to Excel 136 65. 连接ODBC 138 66. 特效 140 67. notes和Excel交换数据 141 68. NOTES的ODBC：（LS：DO） 142 69. Managing JavaScript "popup" windows 第一稿 144 70. HEAD元素使用集锦 147 71. 主页javascript特效19则 148 72. 关于创建、删除、编辑、打开和保存文档的 URL 命令 156 73. Domino URL 命令 158 74. 在打开有下面这段代码的页面时将会跳出一个468x60大小的小窗口 160 75. javascript的容错脚本 161 76. Web search with JavaScript 162 77. 如何防止他人使用旧id和旧口令访问Domino服务器 164 78. Fixing the Domino CheckBox Bug 165 79. Managing JavaScript "popup" windows 172 80. Quick, easy, foolproof field level help 175 81. Quick edit document link 176 82. Managing JavaScript "popup" windows 178 83. Svg: Pie-Eyed 181 84. Recebt Entries 182 85. Xin Calendar Mods 183 86. 答复文档 186 87. 公式语言 187 88. Resuable way to get URL parameters into fields 199 89. JSHeader 使用 201 90. JavaScript 帮助 201 91. Examples: Collecting documents by searching 207 92. 关于DOcumentContext 的属性 209 93. About data types 关于lotus Domino 的数据类型 210 94. CLng function 212 95. Using the DOM to replace "No documents found" 213 96. What you need and want to know about errors 217 97. Processing multiple documents from a view 221 98. Forcing attachments to always download 225 99. ODBCExample: GetValue method 247 100. ODBCResultSet class 248 101. Create a "Login" anchor link 251 102. 分类视图的开发技巧 253 103. 公式语言 255 104. Copy documents from one database to another 267 105. 定制搜索表单 268 106. UserName的属性及使用 275 107. Dynamic Content for Popup Windows 277 108. Shortcut when printing from a Java Agent 278 109. Lotus Script: Write # statement 279 110. Lotus Script: Input # statement 280 111. 使用代理生成 XML 284 112. 使用视图生成 XML 286 113. 执行算术运算 288 114. Keep URLs simple by making them relative 292 115. Quick, easy, foolproof field level help 294 116. Hiding attachments (without noscript tag!) 295 117. Listing search results in groups 296 118. 如何在表单中加入计数器？ 300 119. 怎样限制一个WEB用户只有登陆才能使用数据库 302 120. Complete control when printing HTML from an agent 304 121. Simple multi-lingual forms using Domino 306 122. Stop double form submissions 308
LotusDomino学习笔记.doc
02-15
1. 选取视图的列的内容 @Trim @DbColumn 6 2. 隐藏判断常用的命令 6 3. 判断当前用户是否是“某个组”的成员，然后来显示和隐藏 6 4. 在Lotus Domino 中显示图 6 5. 链接JS文件 6 6. 删除文档的方法 7 7. $$return 域的使用 8 8. 将表单设计为视图或导航器模板 9 9. 为 Web 定制“表单已处理”确认信息 10 10. 定制出错信息 11 11. $$HtmlHead几种常用的技巧 11 12. Domino Designer 模板表 12 13. 角色判断 13 14. 判断文档是否正在被修改 13 15. 在只读的方式下返回（$$return 13 16. 刷新表单 14 17. 怎样在文档里存照片？ 14 18. 后台lotusscript如何取得前台表单中复选框所选择的项目列表（b/s结构） 15 19. 试图的列公式：附件下载 15 20. 有没有好一点的分页处理代码 16 21. 同一用户重复登录 18 22. Return to sender 19 23. Agent to copy values from 1 form to another 在同一个数据库中进行 22 24. 超越OLE – 通过COM结合MS Office与Notes应用 23 25. 读写关系数据库资料 28 26. 视图---excel,表单---word 32 27. 关于Web上的检索问题 35 28. 如何使用Notes与关系数据库进行信息交互？ 37 29. 如何在IE里面实现notes中的 对话框列表？ 39 30. LotusDomino环境下编写Web浏览器多数据库检索程序 40 31. WINAPI函数 44 32. 用PowerBuilder访问Lotus Notes数据库 55 33. 如何在表单中加入计数器 58 34. 实现两个数据库间的数据追加 C/S 结构 60 35. 如何防止他人使用旧id和旧口令访问Domino服务器？ 61 36. 在你的WEB站点上使用DOMINO群集 62 37. 在你的DOMINO WEB站点中插入.SWF文件 73 38. DOMINO R5的域搜索功能在WEB上的实现 77 39. Display Rich Text fields in a view 86 40. Auto-Launch a file attachment 87 41. Showing a response count without showing the responses 89 42. 常用的几个按钮收集 91 43. 在WEB上从视图删除文档技巧 93 44. 在Domino Designer中使用XML数据 96 45. 在Domino Designer上执行XML 100 46. Show single category view, the next stage 107 47. Checkboxes in a list box 108 48. Formatting a Notes view in HTML table for WEB 109 49. Jump to the end of a view (web agent) 111 50. Disabling actions until a page finishes loading 114 51. Web-based, fully customizable search 115 52. 从复选框中删除文档Deleting selected docs on Web 120 53. Debugging LotusScript Agents 121 54. Displays the contents of the Subject field in the first document in theExamples view. 124 55. Example: GetLastDocument method 125 56. Examples: GetNextDocument method 125 57. Example: GetFirstDocument method 126 58. Examples: FTSearch method 127 59. Examples: DeleteDocument method 128 60. Example: Deleting a document 129 61. Example: Creating a document 129 62. Examples: Locating documents within a view or folder 130 63. Example: Adding a document 135 64. Export to Excel 136 65. 连接ODBC 138 66. 特效 140 67. notes和Excel交换数据 141 68. NOTES的ODBC：（LS：DO） 142 69. Managing JavaScript "popup" windows 第一稿 144 70. HEAD元素使用集锦 147 71. 主页javascript特效19则 148 72. 关于创建、删除、编辑、打开和保存文档的 URL 命令 156 73. Domino URL 命令 158 74. 在打开有下面这段代码的页面时将会跳出一个468x60大小的小窗口 160 75. javascript的容错脚本 161 76. Web search with JavaScript 162 77. 如何防止他人使用旧id和旧口令访问Domino服务器 164 78. Fixing the Domino CheckBox Bug 165 79. Managing JavaScript "popup" windows 172 80. Quick, easy, foolproof field level help 175 81. Quick edit document link 176 82. Managing JavaScript "popup" windows 178 83. Svg: Pie-Eyed 181 84. Recebt Entries 182 85. Xin Calendar Mods 183 86. 答复文档 186 87. 公式语言 187 88. Resuable way to get URL parameters into fields 199 89. JSHeader 使用 201 90. JavaScript 帮助 201 91. Examples: Collecting documents by searching 207 92. 关于DOcumentContext 的属性 209 93. About data types 关于lotus Domino 的数据类型 210 94. CLng function 212 95. Using the DOM to replace "No documents found" 213 96. What you need and want to know about errors 217 97. Processing multiple documents from a view 221 98. Forcing attachments to always download 225 99. ODBCExample: GetValue method 247 100. ODBCResultSet class 248 101. Create a "Login" anchor link 251 102. 分类视图的开发技巧 253 103. 公式语言 255 104. Copy documents from one database to another 267 105. 定制搜索表单 268 106. UserName的属性及使用 275 107. Dynamic Content for Popup Windows 277 108. Shortcut when printing from a Java Agent 278 109. Lotus Script: Write # statement 279 110. Lotus Script: Input # statement 280 111. 使用代理生成 XML 284 112. 使用视图生成 XML 286 113. 执行算术运算 288 114. Keep URLs simple by making them relative 292 115. Quick, easy, foolproof field level help 294 116. Hiding attachments (without noscript tag!) 295 117. Listing search results in groups 296 118. 如何在表单中加入计数器？ 300 119. 怎样限制一个WEB用户只有登陆才能使用数据库 302 120. Complete control when printing HTML from an agent 304 121. Simple multi-lingual forms using Domino 306 122. Stop double form submissions 308
HTML流式布局是什么,什么是流式布局？流式布局是什么意思?
weixin_42310891的博客
06-23 2667
在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度 下面通过一个...
HTML5 新标签section使用
huzijia888的博客
11-12 2813
section{ width:600px; height:300px;        font-family:"楷体"; } 岳阳楼记 庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。 予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千。此则岳阳楼之大观也，前人之述
DW学习笔记（1）——安装、简单了解
FFA(Frighting for Ambition!)
01-28 1734
今天做跟进bbs项目的时候用到了DW——也就是  dreamweaver，突然发现法这是个好软件。想起以前大一的时候用记事本写静态网页的时候，一个字一个字的敲，花了几个周做一个三层网页，效果还很难看。  现在发现如果用这个DW会是一件多么简单的事情。你可以从网上随便找一个网页，保存下来，把其中喜欢的东西挪为己用，很简单很方便也很美观。 学习网页这个确实是不可缺少的东西。下面总结一下安装和以
《Dreamweaver CS6 完全自学教程》笔记 第十一章：模板和库
大家好~我是SP_FA~
08-16 2175
文章目录第十一章：模板和库11.1 模板和库的概念11.1.1 模板的概念技术专题：模板的优点11.1.2 库的概念11.1.3 资源面板11.2 使用模板11.2.1 创建模板11.2.2 设计模板11.2.3 设置模板文档的页面属性11.2.4 定义模板区域11.3 定制库项目11.3.1 创建库项目11.3.2 库项目属性面板11.3.3 编辑库项目11.3.4 添加库项目 第十一章：模板和库 11.1 模板和库的概念 11.1.1 模板的概念 模板是制作其他网页文档时使用的基本文档，一般在制作统
HTML5那些事儿
zixiaonvhai的博客
01-15 120
一篇文章搞定HTML5的基础
html及Dreamweaver学习心得
youkooo的博客
10-15 6825
html学习心得
FreeMark学习笔记
05-06
string("yes", "no")} 输出结果是: yes 2.2 数字格式化插值 数字格式化插值可采用#{expr;format}形式来格式化数字,其中format可以是: mX:小数部分最小X位 MX:小数部分最大X位 如下面的例子: <#assign x=2.582/> ...
cnsuhao#MyRecords2Md#hexo-使用笔记1
07-25
title: hexo 使用笔记categories: "学习笔记"- 笔记关于博客的选型,我思索了好久，想过jpress等第三方开源，也试过php版本的、no
微信内置浏览器动态生成二维码并长按识别
全栈道路
06-07 1510
现如今围绕微信生态相关开发已经非常常见，本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别 以及 通过 html2canvas 生成图片并长按保存 说几个知识点 微信长按弹出识别选项的原理 微信客户端检测到用户长按img标签微信主动进行截屏并识别图片，二维码识别采用的是截屏而不是通过img标签微信识别成功后执行相关操作 Base64 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法.
html 左边距自适应,左边定宽，右边自适应布局的几种方法
weixin_42511587的博客
06-18 2139
实际的页面开发中经常会遇到左边定宽，右边自适应的需求，特别是一些管理系统，比如左边显示信息或操作列表，右边显示详情，如下所示：、针对这种布局，首先抽象出页面结构如下：1 2 3 4 5 Document6 7 * {8 padding: 0;9 margin: 0;10 color: #...
HTML学习笔记（三）
bear_huangzhen的专栏
11-13 1194
1．改变dreamweaver的快捷键：《编辑》——>《快捷键》——>《编辑》——>《代码提示》——>《更改》——>《确定》——>《编辑》——>《代码提示》——>在按键后面的文本框中输入你想设置的快捷键组合（组合里面必须要包含ctrl）——>《更改》——>《确定》。 2.  embed标签是用来在网页上播放多媒体文件。 3.  fieldset标签是分组标签，它会将它所包含的内容在网页上面用实
DW学习笔记（2）——div+css布局初识
FFA(Frighting for Ambition!)
01-29 3312
   和标签的区别：定义表头，字体将加粗；普通单元格                                                   div+css布局  良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如， 原先的代码， 现在可以只在HTML中写，所有控制表现的东西都写到CSS中去，在结构 化的HTML中，table就是表格，而不是其他什么
dreamweaver学习笔记
篱笆小院
05-27 282
   做开发,觉得web页面设计的好坏相当重要。    一个系统的基本功能完成以后,如果页面设计的好,将给用户体验添加无限加分，此为其好处之一。最近在做一个项目的demo设计,更是感觉web页面之重要性:一个好的demo不仅仅能够让用户体验得到提升,还能够帮助程序员梳理系统的设计开发。 以下是自己做demo过程中的一些体验：（使用的是dreamweaver cs5）1） 实现页面和代码...
不刷新页面的PHP与Jquery AJAX文件上传
求知欲
03-16 2140
这里只拿图片上传做例子： 前端页面 多文件上传 提交 js代码 $(document).ready(function(){ $('#sub_btn').click(function(){ var pic_data = new
机器学习学习笔记.pdf
最新发布
07-05
《机器学习学习笔记.pdf》是一本关于机器学习的学习笔记的电子书，其内容涵盖了机器学习的基本概念、算法原理和实践应用等方面。 该电子书的主要内容包括但不限于以下几个方面： 1. 机器学习基础：介绍了机器学习的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值