恶补web之一:html学习(1)
发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦!
html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),html使用标记标签来描述网页.
html标记标签称为html标签(html tag);html tag是由 包围的关键词,其是成对出现的,比如 b 和 /b ,分别称为开始(开放)标签和结束(闭合)标签.
html文档 == 网页;html文档描述网页,其包含html标签和纯文本,html文档也称为网页;web浏览器作用是读取html文档,以网页形式显示.浏览器不会显示html标签,而用标签来解释页面的内容.
html /html 之间的文本描述网页
body /body 之间文本是可见的页面内容
h1 /h1 之间的文本被显示为标题
p /p 之间的文本被显示为段落
a /a 之间文本定义链接 : a href="xxx" this is a link /a
img /img 之间文本定义图像: img src="x.jpg" width="110" height="110" / ,图像的名称和尺寸是以属性形式提供的.
html文档是由html元素定义的.html元素指的是从开始标签到结束标签的所有代码.元素内容是开始标签与结束标签之间的内容;某些html元素具有空内容(empty content),空元素在开始标签中进行关闭: br/ ,大多数html元素可拥有属性;大多数html元素可以嵌套.
html标签对大小写不敏感;W3C在html4中推荐使用小写,而在未来(X)html版本中强制使用小写.
html标签可以拥有属性;属性以名称/值对的形式出现:name="hopy";属性总是在html元素的开始标签中规定:
h1 align="center" xxx /h1 , body bgcolor="yellow" /body , table border="1" /table
属性值应该始终被包括在引号内,单双引号皆可.若属性值本身含有双引号,则必须使用单引号.
网页中标题是通过 h1 - h6 等标签定义的, h1 定义最大的标题, h6 定义最小的标题;默认情况下,html会自动在块级元素前后添加一个额外的空行,比如段落,标题元素前后;搜索引擎使用标题为网页的结构和内容编制索引.
hr / 标签在html页面中创建水平线.
可将注释插入html代码中,浏览器会忽略注释: !-- comment --
br / 表示插入一个空行.
对于html,无法通过在html代码中添加额外的空格或换行来改变输出效果:当页面显示时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行对会被当做一个空格来显示.段落的行数依赖于浏览器窗口的大小,若改变窗口的大小,将改变段落中的行数.
b 定义粗体文本
big 定义大号字
em 定义着重文字
i 定义斜体字
small 定义小号字
strong 定义加重语气
sub 定义下标字
sup 定义上标字
ins 定义插入字
del 定义删除字
pre 定义预格式文本,它保留了空格和换行.
bdo 控制文字显示的方向
q /q 短引用
blockquote /blockquote 长引用
通过使用html4.0,所有的格式化代码均可移出html文档,然后移入一个独立的样式表:
html head style type="text/css" h1 {color: red} p {color: blue} /style /head body h1 header 1 /h1 p A paragraph. /p /body /html
当浏览器读到一个样式表,就会按照该样式表来对文档进行格式化,有三种方式插入样式表:
1:外部样式表.当样式需要被很多页面应用时,通常采用外部样式表;通过外部样式表可以更改一个文件来改变整个站点的外观.
head link rel="stylesheet" type="text/css" href="mystyle.css" /head
2:内部样式表.单个网页需要特别样式时,可以使用内部样式表:
head style type="text/css" body {background-color: red} p {margin-left: 20px} /style /head
3:内联样式.当特殊的样式需要应用到个别元素时,可以使用内联样式.方法是在相关的标签中使用样式属性.样式属性可以包含任何css属性:
p This is a paragraph
style 定义样式定义
link 定义资源引用
div 定义文档中的节或区域(块级)
span 定义文档中的行内小块或区域
font 定义文本的字体,字体大小,字体颜色(不赞成使用,请使用样式)
center 对文本进行水平居中(不赞成使用,请使用样式)
html使用超链接与网络上另一个网页相连.超链接可以是字符也可以是一幅图像,点击这些内容跳转到新的文档或当前文档中的某个部分.通过 a 标签在html中创建链接,有2种方式:
1.通过href属性,创建指向另一个文档的链接
2通过name属性,创建文档内的书签
使用target属性,可以定义被链接的文档在何处显示.下面一行代码在新窗口打开链接,如果用_top则表示跳出框架:
a href="http://www.w3school.com.cn/" target="_blank" Visit W3School! /a
name属性规定锚(anchor)的名称.可以使用name属性创建html页面中的书签.书签对读者是不可见的.命名锚的语法:
a name="tips" 基本的注意事项 - 有用的提示 /a锚的名字任意,可以使用id属性代替name属性,效果相同.
跳转到当前页面中的命名锚
a href="#tips" 有用的提示 /a
跳转到其他页面中的命名锚
a href="http://www.w3school.com.cn/html/html_links.asp#tips" 有用的提示 /a
请始终将正斜杠添加到子文件加后面,如果这样写链接:href=http://www.csdn.net/doing,就会想服务器产生2次http请求,这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求.
假如浏览器找不到已定义的命名锚,则会定位到文档顶端而不会有错误发生.
还可以创建一个邮件链接:
html body 这是邮件链接: a href="mailto:someone@microsoft.com?subject=Hello%20again" 发送邮件 /a b 注意: /b 应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。 /body /html
使用html可以在文档中插入图像:
p 来自另一个文件夹的图像: img src="/i/ct_netscape.jpg" / 来自 W3School.com.cn 的图像: img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /
图像由 img 定义,该tag是空标签. img src="url" / alt属性用来为图像定义一个可替换的文本,当无法载入图像时,浏览器将显示该替换文本:
img src="boat.gif" alt="Big Boat"
如果某个网页包含10个图像,则显示该网页需要加载11个文件.
map 定义图像地图
area 定义图像地图中的可点击区域
每个表格由 table 开始,表格每行由 tr 开始,每个表格项由 td 开始。td指table data,内容可以包括文本,图片,列表,段落,表单,水平线,表格等。使用边框属性来显示表格边框: table border="1" 表格头使用 th 标签定义。为了避免空td的边框不显示,可以在空td中添加一个空格占位符: nbsp;
caption 定义表格标题
thead 定义表格页眉
tbody 定义表格主体
tfoot 定义表格页脚
col 定义用于表格列的属性
colgroup 定义表格列的组
无序列表是一个项目的列表,使用粗体圆点进行标记;无序列表始于 ul 标签,每个列表项始于 li
ul li Coffee /li li Milk /li /ul
有序列表和无序列表类似,不过使用数字进行标记;有序列表始于 ol 标签,么个列表项始于 li
自定义列表以 dl 开始,每个自定义列表项以 dt 开始,每个自定义列表项的定义以 dd 开始。
可以通过 div 和 span 将html元素组合起来。html块元素(block level element)通常会以新行开始和结束;html内联元素(inline element)通常不会以新行开始。 div 是块级元素,可作为组合其他html元素的容器。若与css一同使用,可以对大的内容块设置样式属性。 div 的另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。 span 元素是内联元素,可作为文本容器,当与css一同使用时,可为部分文本设置样式属性。
表单是一个包含表单元素的区域,表单元素允许用户在表单中(文本域,复选框等等)输入信息的元素。表单使用表单标签 form 定义。
文本域 input type="text" ...
单选按钮 input type="radio" ...
复选框 input type="checkbox" ...
当单击确认按钮时,表单内容会被传送到另一个文件;表单动作属性定义了目的文件的名称,由动作属性定义处理方法。
textarea 定义文本域
label 定义控制标签
fieldset 定义域
legend 定义域的标题
select 定义一个选择列表
optgroup 定义选项组
option 定义下拉列表中的选项
button 定义按钮
使用框架你可以在同一个浏览器窗口中显示不止一个页面。每个html文档称为一个框架,且每个框架都独立于其他框架。使用框架的坏处:
1.开发人员必须同时跟踪更多html文档
2.很难打印整张页面
框架结构标签 frameset 定义如何将窗口分割为框架,每个frameset定义了一系列行或列。frame标签定义了放置在每个框架中的html文档。用户可以拖动框架边框来改变其大小,可以在 frame 加入noresize="noresize"固定框架大小。还可以为不支持框架的浏览器添加 noframes 标签。
Web前端技术学习经验谈 整个web前端技术,非常繁杂,知识点极其多,如果要分层次的话,我想应该分为四层: 第一层:Html+CSS 第二层:Javascript+JQuery+Ajax+Bootstrap 第三层:SVN+Git+Webpack 第四层:Vue.js+React+AngularJS
相关文章
- 恶补web之一:html学习(2)
- 一个简单的web服务器
- 活字格发布新版本,插件公开,引领Web开发新潮流
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API
- 在 Web 级集群中动态调整 Pod 资源限制
- [Web component] Using Custom Events as a web component API
- Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modules
- [Web component] Using Custom Events as a web component API
- [HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components
- Atitit web 之道 艾龙著 Atitit web 之道 艾龙艾提拉著v2 saa.docx Atitit web开发之道 attilax著 Web应用 1. 第1章 Web编程基础知识 (
- Atitit 2016 技术趋势与没落技术 目录 1.1. 离线优先Web应用程序(Offline first web applications)1 1.2. 依照产品而不是项目(product
- web前端jQuery,jsp,jstl等开发小细节分享
- Walle 瓦力 web部署系统
- Web登陆实例-—同步username
- atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
- python web py入门(33)- 在HTML网页里嵌入JavaScript脚本
- python web py入门(10)- 实现论坛注册
- 【汇总】Windows linux 敏感目录 路径汇总——主要是主机配置文件、web配置文件
- 【WEB前端进阶之路】 HTML 全路线学习知识点梳理(上)
- Web前端 | HTML表单form