HTML_02(html+css的学习)

最新推荐文章于 2024-03-14 20:49:58 发布

my_kudy

最新推荐文章于 2024-03-14 20:49:58 发布

阅读量964

点赞数

分类专栏： 2.【—Html/css/javaScript/Dom—】文章标签： html css class 正则表达式语言 dreamweaver

本文链接：https://blog.csdn.net/my_kudy/article/details/7977327

版权

2.【—Html/css/javaScript/Dom—】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Html 内容

1. Html就是超文本标记语言的简写，是最基础的网页语言。

2. Html是通过标签来定义的语言，代码都是由标签所组成。

3. Html代码不用区分大小写。

4. Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

5. 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

6. 体部分是真正存放页面数据的地方。

l 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

l 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

l 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

l 格式：<标签名属性名='属性值'> 数据内容 </标签名>

<标签名属性名='属性值' />

l 操作思想：

为了操作数据，都需要都数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

常用标签的使用

字体

1. 字体标签：<font>

例：<font size=5 color=red>字体标签示例</font>

注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。

2. 标题标签：<h1><h2>…..<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

3. 特殊字符：

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

<	<	>	>	&	&
"	“	®	®	©	©
™	™		空格

注：在Dreamweaver8中都具有联想功能。

列表

4. 列表标签：<dl>

<dt>：上层项目

<dd>：下层项目

例：

<dl>

</dl>

效果：

列表中项目符号对应的标签

<ol>：数字标签（a A 1 i I）

<ul>：符号标签（○●■）

<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。

图像

5. 图像标签：<img>

例：<img src=”1.jpg” align=” middle” border=”3” alt=”图片说明文字”/>

align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件

6. 图像地图：<map>

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。

map标签要和img标签联合使用。Href是超连接

<map >

</map>

表格

7. 表格标签：<table>

组成：标题标签：<caption>，给表格提供标题。

表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

行标签：<tr>

单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

格式：

</tr>

</tr>

</table>

效果：

<tr>

个人信息

</th>

</tr>

</tr>

</table>

效果：

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。

THEAD、TFOOT包含关于表格列的信息。

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。

超链接

8. 超链接标签：<a>

两种用法：

一、超链接<a href=””>

例：

二、定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

例：

<a href=”#标记”>返回标记位置</a>

注：使用定位标记时一定在href值的开始加入#标记名。

框架

9. 框架标签：<frameset>

注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

例：

</frameset>

这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html

注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

10. 画中画标签：<iframe>

很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。

</iframe>

框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。

ø表单ø

11. 表单标签：<form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签：接收用户输入信息。

其中的type属性指定输入标签的类型。

l 文本框 text。输入的文本信息直接显示在框中。

l 密码框 password。输入的文本以原点或者星号的形式显示。

l 单选框 radio 如：性别选择。

l 复选框 checkbox 如：兴趣选择。

l 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

l 提交按钮 submit 用于提交表单中的内容。

l 重置按钮 reset 将表单中填写的内容设置为初始值。

l 按钮 button 可以为其自定义事件。

l 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

l 图像 image 它可以替代submit按钮。

<select>：选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

<textarea>：多行文本框。如：个人信息描述。

<label>：用于给各元素定义快捷键。

for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。

例：

表单提交：

1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。

2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

get和post这两种最常用的提交方式的区别：

1．get提交将数据现在地址栏，对于敏感信息不安全。

post提交不显示在地址栏。

2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。

post可以提交大体积数据。

3．对提交数据的封装方式不同：

get：将提交数据封装到了消息的前，请求行中。

post：将提交的数据封装到消息头后，数据体中。

注意：通常表单使用post提交，因为编码方便。

对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。

通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。

如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。

头标签

头标签都放在<head></head>头部分之间。包括：title base meta link

12. <title>：指定浏览器的标题栏显示的内容。

13. <base>：

href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。

target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。

14. <meta>：

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

例：

表示打开此页面3秒后自动转到新浪页面。

15. <link>：

rel 属性：描述目标文档与当前文档的关系。

type 属性：文档类型。

media：指定目标文档在哪种设备上起作用。

例：

Other

16. <marquee> 让内容动起来。

direction 属性：left right down up

behavior 属性：scroll alternate slide

17. <pre>：可以将文本内容按在代码区的样子显示在页面上。

XHTML XML

XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。

l XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。

l XHTML的代码结构更为严谨，是基于XML的一种应用。

XML是可扩展标记语言（Extensible Markup Language）

l XML是对数据信息的描述。HTML是数据显示的描述。

l XML代码规定的更为严格，如：标签不结束被视为错误。

l XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。

l 各个服务器，框架都将XML作为配置文件。

css部分:

CSS介绍

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

那么CSS和Html是如何在网页代码中相结合的呢？

通过四种方式

1. style属性方式：

利用标签中style属性来改变每个标签的显示样式。

例：

p标签段落内容。

</p>

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

2. style标签方式：（内嵌方式）

在head标签中加入style标签，对多个标签进行统一修改。

<head>

p { color:#FF0000;}

</style>

</head>

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

3. 导入方式：

前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。

例：
<style type="text/css">

@import url(css_3.css);

div { color:#FF0000;}

</style>

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

4. 链接方式：

通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。

例：

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

5. 样式优先级：

由上到下，由外到内。优先级由低到高。

6. 总结CSS代码格式

选择器名称 { 属性名：属性值；属性名：属性值；…….}

7. 选择器：

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

选择器共有三种：

a) html标签选择器。

b) class选择器。

c) id选择器。

每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。

在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

8. class选择器：

在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置。

例：

相同标签设置不同样式的时候，用class进行区分。

p.pclass_1 {color:#FF0000;}

p.pclass_2 {color:#0000FF;}

<p class=”pclass_1”>P标签样式</p>

<p class=”pclass_2”>P标签样式</p>

不同标签进行相同设置的时候，用class进行统一定义。

.classname {color:#00FF00;}

<p class=”classname”>P标签样式</p>

<div class=”classname”>DIV标签样式</div>

9. id选择器：

与class选择器类似，但格式不同，选择器的名称为：#id值。

例：

#pid { color:#0000FF;}

<p id=”pid”>P标签样式</p>

注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。

10. 扩展选择器：

a) 关联选择器

标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。

例：

p { color:#00FF00;}

p b { color:#FF000;}

<p>P标签段落</p>

b) 组合选择器

对多个不同选择器进行相同样式设置的时候应用此选择器。

p,div { color:#FF0000;}

<p>P标签显示段落。</p>

<div>DIV标签显示段落</div>

注：多个不同选择器要用逗号分隔开。

c) 伪元素选择器

其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。

格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。

a:link 超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态（未点击）。

a:active 点击超链接时的状态。

使用顺序 L – V – H - A

p:first-line 段落的第一行文本。

p:first-letter 段落中的第一个字母。

:focus 具有焦点的元素。IE浏览器不支持，在FireFox中可以看到效果。

学习笔记:

回顾正则表达式:

是一种专门用于操作字符串的规则,通过一些特定的符号来表示,简化对字符串的复杂操作.

弊端: 阅读性差

常用的操作:

1,匹配:boolean matches(String regex);

2,获取(查找):Pattern p = Pattern.compile(regex);

Matcher m = p.matcher(String);

While(m.find())

{

System.out.println(m.group());

}

3,切割:String split(regex);

4,替换:String replaceAll(regex,String);

Mail邮箱的正则表达式:

Stirng mailreg = “[a-zA-Z0-9_]{6,12}@[a-zA-Z0-9]+(\\.[a-zA-Z]+)+”;

一.html:超文本标记语言.

html语言中是由标签组成的.

html中的数据都会封装在标签中,因为可以通过标签中里面的属性可以改变对封装内部的数据进行操作.

确定html代码的范围<html></html>

在该范围内可以定义两个内容,一个部分是头,一部分是体.

<html>

<head>

</head>

<body>

主题的内容

<body>

</html>

head:网页中的一些属性信息,比如:标题.

body::网页中显示出来的数据

二.标签特点:对于数据的进行封装,有开头标签就有结尾标签.但是有一些标签是没有结尾的标签的.也就是只有单一的功能.所以不需要结束的标签.规范中要求标签必须要有结束,所以在结束后加一个/号

如:

<br/>

<img/>

标签中的属性:

<标签名属性名=”属性值”> 数据</,标签名>

< 标签名/>

<标签名属性名=”属性值”/>

常见的标签:

1.字体<font> <font size = “7”> 这是我的第一个网页小程序</font>

2.特殊的部分:如果要是在网页中显示出来一些特点的字符,我们需要转义

i. <:<

ii. >:>

iii. &:&

iv. 空格:

3.标题:<h1><h2><h3><h4>....字体标签

4,列表的标签:

<dl></dl><ul></ul><ol></ol>*(后面两个标签中的列表都是由<li>标签封装)

上层项目:

下层项目:

简单的例子:

<dl>

</dl>

5.图形的标签:<img src=”图片的路径” alt=”图形的说明文字”/>

6.表格标签<table>

i. 表格中由行所组成的,行由单元格组成(没有列的概念,只有多少个单元格的概念哦)

ii. 表格中的默认都有一个tdoby标签.

iii. 标题标签:<caption>

iv. <th>代表头标签居中加粗的效果</th>

v. 表格是最常用的标签,用于对数据进行格式化.

演示:

<caption>我的计划表</caption>:

<tr>

</tr>

</table>

7.表单标签:

i. 该标签是可以和服务端进行交互的.

表单标签中的元素:

<input/>该标签是因为type属性的值不同,所对应的组件也会不同.

type:属性:

1,text:文本框,输入的文本可见

2,password:密码框,输入的文本可见

3,radio:单选框,注意:要被选中,必须要给单选框定义一个name属性..当有多个单选框时,只能有一个别选中的,那么这个单选框的name值必须相同.

4,checkbox:复选框,当对多个数据进行同时选中.

5,file:可以进行文件选择的组件,通常用于附件,或者文件上传.

6,hidden:隐藏组件,该组件的不会显示在页面上,但是期定义的name和value可以提交到服务端.

7,button:按钮组件,自定义一个按钮默认是没有任何效果的,可以通过注册事件并加入自定义效果.

8,reset:重置按钮,将组件被操作的效果还原到原始.

9,submit:提交按钮,将组件中添加的数据提交到指定的地方.

10:image:图像组件,为了避免提交按钮的难看,可以通过image的src属性连接一个比较好看的提交按钮的图片完成提交的效果.

下拉菜单:<select name = “select”>

每一个下拉菜单项都是由option进行封装

</select>

文本区域: <textarea>

服务组件通常都是需要定义name和value属性,因为要将数据发送到服务端,

服务端只有知道了该name的值才可以对提交的数据进行分别获取.

form标签中常用的属性:

action:指定数据提交的目的地,method:提交的方式.两种常用值:get和post.get为默认

get和post区别:

1.get:会将提交的数据显示在地址栏上.

2.post:不会将数据显示在地址栏上.

3.get:提交到的数据受限制于地址栏.

4.post:可以提交大面积的数据

5.get:对于敏感的信息不安全

6.post:对于敏感的信息安全

7:get会将提交到的数据放在请求行里面,也就是http消息头.

8:post:会将提交信息封装在数据体中,也就是http消息头之后的空白地方.

对于服务端而言:

表单提交尽量使用post,因为涉及到编码的问题,因为tomcat服务端默认的解码是:iso08859-1..

在服务端可以直接使用setCharacterEncoding(“geb”)就可以进行解码

对于get提交的中文,在服务端只能通过:iso08859-1将数据再进行编码一次,再通过指定的码表如gbk进行解码

使用表单中的组件不一定需要定义from标签,只有需要将数据进行服务端的提交的时候才会使用form的标签.

简单测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--p的name属性名字的--
<!--p,cnPerson 相当于组合了-->
<!--font b 关联-->
<style type="text/css">
	p.name
	{
		color:#FF0000;
	}
	#say
	{
		color:#33CCCC;
	}
	
	p,cnPerson
	{
		color:#FFFF00;
	}
	font b
	{
		color:#FFFF00;
	}
	div b
	{
		background-color:#99FF00
	}
	a:link{
		background-color:#0099FF;
		color:#FF0000;
		font-size:18px;
		text-decoration:none;
	}
a:visited{
	background-color:#FF0000;
	color:#FFFF00;
	font-size:9px;
		text-decoration:none;
	}
a:hover{
	background-color:#000000;
	color:#FFFFFF;
	font-size:99px;
	}

a:active{
	background-color:#666699;
	color:#FF3366;
	font-size:24px
p:first-line
{
	background-color:#66FFCC;
}
	}
</style>
<!--注意是以,隔开的  组合选择器.可以用逗号跟开一起使用-->
<body>
	<p><b class="cnPerson">我是中国人</b></p>
    <p><b class="name" id="say">垃圾jb日本狗</b></p>
    <p class="name">美国吵你妈个JB</p>
    <hr/>
    <font><b>我是一只小小鸟,我想要飞得飞得更高</b></font>
    <b>哈哈</b>
    <div><b>好好学习</b></div>
    
    <a href="http://www.sina.com.cn" target="_blank">新浪点我</a>
    <p>我来也</p>
</body>
</html>

my_kudy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML_02(html+css的学习)

Html 内容1. Html就是超文本标记语言的简写，是最基础的网页语言。2. Html是通过标签来定义的语言，代码都是由标签所组成。3. Html代码不用区分大小写。4. Html代码由开始结束。里面由头部分和体部分两部分组成。5. 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。6. 体部分是真正存放页
复制链接

扫一扫

专栏目录