ASP.Net+Android+IO开发S、.Net培训、期待与您交流!
一、超文本标记语言。
html语言中是由标签组成的。
html中的数据都会封装在标签中。因为可以通过标签中的属性值的改变对封装内数据进行操作。
确定html代码范围。
在该范围中可以定义两部分内容,一部分是头,一部分是体。
head:网页的一些属性信息。比如:标题。
body:网页显示的数据
标签特点:对于数据进行封装,那么就要开始标签和结束标签。
但是也有一些标签只体现单一功能,所以不需要结束标签,规范中要求标签必须要结束,所以这样的标签在内部结束。
如:
标签格式:<标签名属性名="属性值" >数据标签名>
<标签名属性名="属性值" />
------------------------------------------------
二、常见标签:
1、字体:
数据
特殊部分:如果要在页面显示一些特殊符号,需要进行转义。
<: < >:> &: & 空格:  
标题标签:~~~
段落标签:有勇气就会有奇迹
范围标签:
行内范围标签:
水平线标签:
(该标签没有结束标签)
2、列表标签:
上层项目:
下层项目:
项目符号标签:
:有序的列表标签。
:无序的列表标签。
这两个标签中的列表项都由标签封装。
示例:
1、游戏名称
a.星际
b.红警
2、游戏内容
a.攻略
b.秘籍
3、图像标签:
" title= ""/>
src属性:该属性指定图片文件所在的位置,可以是相对路径或者绝对路径。
alt属性:指定替代文本,表示图像无法显示时(例如:图片路径信息错误或网速太慢等),替代显示的文本。Titile属性,可以提供额外的提示或者帮助信息。
4、表格标签: Cellpadding:指定单元格内容和单元格边框之间的距离。该属性可以是象素值,也可以是百分比。 Cellspacing:指定单元格之间的距离。可以是像素值或者百分比。 Width:指定表格的宽度。可以是像素值或者百分比。 表格由行组成,行由单元格组成。 表格中默认都由一个tbody标签 表格式最常用的标签,用于对数据进行格式化。 表格的高级标签: :对应表格页眉,即表格的表头部分如:
:对应表格的数据主体,通常内部封装 href:表示链接地址的路径 target:制定链接在哪个窗口打开,_self(自身窗口)、_blank(新建窗口)等 当被点击后,会启动引擎所对应解析程序。 去查找指定主机。 1、先找本地主机的hosts文件。如果没有找到该主机对应的ip地址 2、去公网DNS服务器上找对应的ip地址。 当点击超链接时,就会出现邮件相关联的解析程序,本机默认的是outlook。 超链接的三种用法: b、锚链接:A页面甲位置到A页面(本页)的乙位置或A页面的甲位置到B页面的乙位置,称为锚链接。示例如下 c、功能性链接:单击链接时不是打开某个网页,而是启动本机自带的某个应用程序,例如常见的电子邮箱、qq等。示例如下: 6、表单标签: 该标签是可以和服务端进行交互的。 表单标签中元素: :该标签因为type属性的值的不同,所对应的组件也不一样。 type属性: 1,text:文本框,输入的文本可见。 2,password:密码框,输入的文本不可见。 3,radio:单选框,注意,要被选中,必须要给单选框定义一个属性name。 当有多个单选框时,只能有一个被选中,那么这些单选框的name值必须相同。 4,checkbox:复选框,当对多个数据进行同时选中时。 5,file:可以进行文件选择的组件。通常用于附件或者文件上传。 6,hidden:隐藏组件,该组件不会在页面上显示,但是其定义的name和value可以提交到服务端。 7,buuton:按钮组件,自定义一个按钮默认是没有任何效果的,可以通过注册事件并加入自定义效果。 8,submit:提交按钮,将组件中添加的数据提交到指定的目的地。 9,reset:重置按钮 10,image:图像组件,为了避免提交按钮的难看,可以通过image的src属性连接一个好看的按钮图片完成提交效果。 11、下拉式菜单: 每一个下拉菜单项都由option进行封装。 12、hidden:type属性设置为"hidden"隐藏类型即可创建一个隐藏域。 13、readonly和disabled:设置只读和禁用属性。 文本区域: 表单组件元素的属性。 1、 type:指定表单元素的类型,可用选项如上text、radio、submit等 2、 name:指定表单元素的名称。 3、 value:指定表单元素的初始值。 4、 size:指定表单元素的初始宽度。如果type为text或password,则表单元素的大小以字符为单位;其它输入类型以像素为单位。 5、 maxlength:指定可在text或password元素中输入的最大字符数,默认不做限制。 6、 checked:此属性只有一个值,为"checked",表示选中状态,如果不选中,则不需添加此属性。 表单组件通常都需要定义name和value属性,因为要将数据发送给服务端, 服务端只有知道了该name的值才可以对提交的数据进行分别获取。 form表单中的常见属性: action:指定数据提交的目的地。 name:指定表单的唯一名称,建议该属性值与id属性值保持一致 method:提交方式。两种常用值get和post。get为默认。 get和post的区别: get:会将提交的数据显示在地址栏上。 post:不会将数据显示在地址栏。 get:提交的数据的体积受地址栏的限制。 post:可以提交大体积数据。 get:对于敏感信息不安全。 post:对于敏感信息安全。 get:会将提交信息封装在请求行,也就是http消息头之前 post:会将提交信息封装在数据体中,也就是http消息头后的空行后。 对于服务端而言。 表单提交尽量用post,因为涉及编码问题。 对于post提交的中文,在服务端可以直接使用setCharacterEncoding("gbk")就可以解决。 对于get提交的中文,在服务端只能通过ISO8859-1将数据编码一次,再通过指定的编码表如GBK解码。 使用表单的组件不一定要定义form标签。只有需要将数据进行服务端的提交的时候才会用到form标签。 三、CSS样式表 css层叠样式表。 将网页中的样式分离出来,完全由css来控制。 增强样式的复用性以及可扩展性。 格式: 选择器{属性名1:属性值1;属性名2:属性值2;…….} css和html代码相结合的四种方式: 1,使用内联样式:每一个html标签都有一个style属性。如: 2,使用内部css样式:当页面有多个标签有相同样式时,可以进行复用。 css代码 3、导入外部样式单:当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件。 通过在每个页面中定义 @import url("1.css"); 4、引入外部样式文件:通过html中head标签中的link标签链接一个css文件。 技巧:为了提高相同样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件。 p.css,div.css....... 在一个css中使用css的import将多个标签样式文件导入。 然后在html页面上,使用link标签导入这个总的css文件即可。 1.css @import url("p.css"); @import url("div.css"); ------------------------------------------ 选择器:其实就是样式要作用的标签容器。 当样式分离后,html作用在于用标签封装数据。然后将css加载到指定标签上。 选择器的基本分类: 1、标签选择器。其实就是html中的每一个标签名 li{ color:red; font-size:20px; } 2、类选择器。其实就是每一个标签中的class属性。用"."的属性表示 只用来给css所使用,可以对不同标签进行相同样式设定。 .类名{属性名1:属性值1;属性名2:属性值2;………… } 使用标签的class属性引用类样式,即<标签名 class = "类名">标签内容标签名> 3、ID选择器。其实就是每一个标签中的ID属性。但是要保证ID的唯一性。用#来表示: .#ID表示名{属性名1:属性值1;属性名2:属性值2;………… } ID不仅可以被css所使用,还可以被javaScript所使用 行内样式表>内部样式表>外部样式表 选择器的优先级:ID>class>标签 扩展选择器: 1、关联选择器:其实就是对标签中的标签进行样式定义。 2、组合选择器:对多个选择器进行相同样式定义。将多个选择器通过","隔开的形式。如:div,.a,#abc{…………}:对div元素、class属性为a的元素、id为abc的元素都起作用的css样式。 3、伪元素选择器:其实就是元素的一种状态。 所谓伪类,就是不根据名字、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式。伪类样式的基本语法: 标签名:伪类名{…………} a:link:超链接被点前状态 a:link{color:#999;} a:visited:超链接点击后状态 a:link{color:#333;} a:hover:鼠标悬浮其上的长连接样式。a:hover{ color:#888;} a:active:鼠标单击未释放的超链接状态。a:active{ color:#666;} .nav ul{list-style:none}:“父元素+空格+子元素”限定范围。结合HTMl代码,此处表示类名为nav的div块中的ul元素。 .nav li a:hover{color:#333;}:此处表示类名为nav的div块中的ul元素中的li元素中的a伪类鼠标悬浮其上的效果。示例如下:
在定义这些状态时,有一个顺序:L V H A p:first-letter:对指定对象内的第一个字符起作用。 p:first-line:对指定对象内的第一行内容起作用 :focus:很遗憾,IE6不支持。但FF支持。 css滤镜:其实通过一些代码完成丰富了样式。 当使用到css的更多属性时,还需要查阅css api 网页设计的时候。div+css div:行级区域 span:块级区域 p:行级区域。p中不要嵌套div 选择器的简单示例说明: 1、E#idValue{…………}:定义仅对指定元素(E)起作用的ID选择器。 p#xx{………}:对id为xx的p元素起作用的css样式。 2、包含选择器:div .a{………}:对处于div之内且calss属性为a的元素起作用的css 3、子选择器:div>.a{………}:对处于div之内且calss属性为a的元素起作用的css 包含选择器和子选择器的区别:对于包含选择器,只要目标选择器位于外部选择器对应元素内部,即使是其"孙子元素"也可。对于子选择器,要求目标选择器必须作为外部选择器对应的元素的直接子元素才行,即"儿子元素" ASP.Net+Android+IOS开发、.Net培训、期待与您交流! ----------------------
标签中常用属性:
//代表表格
//代表行
// 中内容是加粗并居中的效果
//单元格
//单元格
姓名 年龄 :用于定义表格的表头
月份
收入
单元格内容 :表示此单元格由两个单元格合并而来(跨列合并)
单元格内容 :表示此单元格由两个单元格合并而来(跨行合并)
#FFFFFF;font-size:20pt;">
标签名{属性名1:属性值1;属性名2:属性值2;………… }如:
详细请查看:你可能感兴趣的:(黑马程序员-HTML学习笔记)