html不能忘得基础知识

最新推荐文章于 2024-05-25 11:25:03 发布

yu851293483

最新推荐文章于 2024-05-25 11:25:03 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

文章标签： html border css 浏览器 table class

本文链接：https://blog.youkuaiyun.com/yu851293483/article/details/6970150

本文概要介绍了网页设计的基本元素，包括链接、文档内导航、邮件发送、图片作为链接、图片区域链接及样式伪类应用。此外，详细阐述了表格、表单和CSS在网页布局和设计中的关键作用，以及如何熟练使用框架技术实现网页结构的高效组织。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）基本语法

target属性确定链接页面显示的窗口

_blank(新窗口), _self(原窗口)

（2）文档内导航

（3）发送邮件

（4）图片作为链接

（5）图片区域产生链接

</map>

当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时，

为各顶点值; 当shape="circle"（圆形）时，为圆心坐标值和半径值。 coords值依照图片大小的不同

和所希望链接区域的不同而有所不同

</map>

（6）链接中的伪样式

a:link { color: red} 没有访问时

a:visited { color: blue} 访问后

a:active { color: lime} 鼠标点击但还没有放开时

a:hover { color: aqua} 鼠标指向时
4、掌握表格的使用

table元素定义表格

tr元素定义行

td元素单元格

单元格间隔和单元格填充

table的cellspacing属性定义单元格之间的间距.

table的cellpadding属性定义单元格边界与单元格中内容的间距.

单元格的对齐方式

align属性用于指明横向对齐方式：left center right

valign属性纵向对齐方式：top middle bottom

单元格的合并

td的colspan用于指定单元格所占的列数, 用于横向合并单元格.

td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.

5、熟练掌握表单的使用

表单的作用

常用属性

action

method

input

text checkbox radio submit reset image button

select textarea

6、了解css，掌握一些比较核心（程序员应该掌握）的css知识

（1）什么是css

Cascading Style Sheets(层叠样式表)。标准网页设计中CSS负责网页内容的表现。

（2）css的基本语法

selector {property:value; property:value; …}

（3）css选择器

简单选择器

例如: h1{color:blue} 针对所有的h1元素

类选择器

例如:.msg {color:red} 针对class属性为msg的元素.

p.msg {color: blue} 只针对class属性为msg的p元素.

ID选择器

例如:#err {background-color:#blue} 针对id属性为err的元素.

派生选择器

例如: #content p {color:blue} 针对id是content元素中的p元素.

li span { font-color: red}针对li中的span元素

（4）选择器分组

可以对选择器进行组合, 这些选择器就可以共享样式,例如:

h1,h2,h3 {color:green}

（5）css继承

子元素将继承父元素的样式而不需要另加指定

（6）样式表的引入与优先级

1. 浏览器缺省设置

2. 外部样式表

3. 内部样式表（位于 <head> 标签内部）

4. 内联样式（在 HTML 元素内部）

（7）css定位

diplay属性

display：none 不显示

display：block 块级元素

display: inline 行内元素

position属性

static 默认的选项, 按照浏览器默认的方式摆放。

absolute 相对于父元素, 按top和left值指定的值摆放。

relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移

（8）盒模型

内容(content)、填充(padding)、边框(border)、边界(margin)

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也

具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西

（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆

放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

内边距相关CSS属性

例如：

h1 {padding: 10px 20px 30px 20%;}

相当于

h1 {

padding-top: 10px;

padding-right:20px;

padding-bottom:30px;

padding-left: 20%;

}

其中padding属性的书写顺序为从top开始顺时针旋转，既top、right、bottom、left；设置为百分数意为相对于父元素的width的百分比。

外边距相关CSS属性

例如：

h1 {margin : 10px 0px 15px 5px} 和padding类似

p {margin : 10%} 相对于父元素的width

body{margin: 0}

边框相关CSS属性

border-style 针对所有边框的样式

border-width 针对所有边框设置宽度

border-color针对所有边框中可见部分的颜色。

也可这样设置：

border:宽度、样式（ashed/solid）、颜色

border-bottom

border-bottom-color

border-bottom-style

border-bottom-width

7、框架

<html>

<head>

</frameset>

</head>

</html>