900字范文 > 黑马程序员-HTML学习笔记

黑马程序员-HTML学习笔记

时间：2022-04-22 21:10:36

相关推荐

黑马程序员-HTML学习笔记

<a href=""target="blank">+Android+IO开发S</a>、<a href=""target="blank">.Net培训</a>、期待与您交流！

一、超文本标记语言。

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

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

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

在该范围中可以定义两部分内容，一部分是头<head></head>，一部分是体<body></body>。

<html>

</html>

head:网页的一些属性信息。比如：标题。

body:网页显示的数据

标签特点：对于数据进行封装，那么就要开始标签和结束标签。

但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部结束。

如：<br/> <hr/> <img /> <input />

标签格式：<标签名属性名="属性值" >数据</标签名>

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

------------------------------------------------

二、常见标签：

1、字体：<font>

特殊部分：如果要在页面显示一些特殊符号，需要进行转义。

<: < >:> &: & 空格: &nbsp

标题标签：<h1>~~~<h6>

段落标签：<p>有勇气就会有奇迹</p>

范围标签：<div></div>

行内范围标签：<span></span>

水平线标签：<hr/>（该标签没有结束标签）

2、列表标签：<dl></dl>

上层项目:<dt>

下层项目:<dd>

项目符号标签:

<ol></ol>：有序的列表标签。

<ul></ul>：无序的列表标签。

这两个标签中的列表项都由<li>标签封装。

示例：

1、游戏名称

a.星际

b.红警

2、游戏内容

a.攻略

b.秘籍

3、图像标签：<img>

src属性：该属性指定图片文件所在的位置，可以是相对路径或者绝对路径。

alt属性：指定替代文本，表示图像无法显示时（例如：图片路径信息错误或网速太慢等），替代显示的文本。Titile属性，可以提供额外的提示或者帮助信息。

4、表格标签：<table>

<table>标签中常用属性：

Cellpadding：指定单元格内容和单元格边框之间的距离。该属性可以是象素值，也可以是百分比。

Cellspacing：指定单元格之间的距离。可以是像素值或者百分比。

Width：指定表格的宽度。可以是像素值或者百分比。

表格由行组成，行由单元格组成。

表格中默认都由一个tbody标签

<table border="1" bordercolor="red" width="60%" cellpadding="10" cellingspacing="0">//代表表格

<tr>//代表行

<th></th>//<th>中内容是加粗并居中的效果

<th></th>//单元格

</tr>

<tr>

<td></td>//单元格

</tr>

</table>

表格式最常用的标签，用于对数据进行格式化。

表格的高级标签：

<caption>年终数据报表</caption>：用于描述整个表格的标题

<th>姓名</th><th>年龄</th>：用于定义表格的表头

<thead></thead>：对应表格页眉，即表格的表头部分如：

<tr>

</tr>

<tbody></tbody>：对应表格的数据主体，通常内部封装<tr></tr>

<tfooter></tfooter>：对应表格的页脚，即各分组数据进行汇总的部分。

<td colspan="2">单元格内容</td>：表示此单元格由两个单元格合并而来（跨列合并）

<td rowspan="2">单元格内容</td>：表示此单元格由两个单元格合并而来（跨行合并）

5、超链接：<a>

href：表示链接地址的路径

target：制定链接在哪个窗口打开，_self（自身窗口）、_blank（新建窗口）等

当被点击后，会启动引擎所对应解析程序。

去查找指定主机。

1、先找本地主机的hosts文件。如果没有找到该主机对应的ip地址

2、去公网DNS服务器上找对应的ip地址。

当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook。

超链接的三种用法：

a、页面间的链接：A页到B页，最常用于网站导航

b、锚链接：A页面甲位置到A页面（本页）的乙位置或A页面的甲位置到B页面的乙位置，称为锚链接。示例如下

<a name="top">一个位置</a> //定义一个位置

<a href="#top">获取那个位置</a>//单击转到"top"位置。

c、功能性链接：单击链接时不是打开某个网页，而是启动本机自带的某个应用程序，例如常见的电子邮箱、qq等。示例如下：

6、表单标签：<form></form>

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

表单标签中元素：

<input>:该标签因为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、下拉式菜单：<select>

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

</select>

12、hidden：type属性设置为"hidden"隐藏类型即可创建一个隐藏域。

13、readonly和disabled：设置只读和禁用属性。

文本区域：<textarea>

表单组件<input>元素的属性。

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样式：当页面有多个标签有相同样式时，可以进行复用。

<style>

css代码

</style>

3、导入外部样式单：当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。

通过在每个页面中定义

<style>

@import url("1.css");

</style>

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中的每一个标签名

标签名{属性名1：属性值1；属性名2：属性值2；………… }如：

li{

color：red；

font-size：20px；

}

</style>

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伪类鼠标悬浮其上的效果。示例如下：

<body>

<ul>

<li><a href="#">黑马程序员</a></li>

</ul>

</div>

</body>

在定义这些状态时，有一个顺序：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

包含选择器和子选择器的区别：对于包含选择器，只要目标选择器位于外部选择器对应元素内部，即使是其"孙子元素"也可。对于子选择器，要求目标选择器必须作为外部选择器对应的元素的直接子元素才行，即"儿子元素"

<a href=""target="blank">+Android+IOS开发</a>、<a href=""target="blank">.Net培训</a>、期待与您交流！ ----------------------

详细请查看：<ahref="" target="blank"></a>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。