欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

web前端（html、css）

程序员文章站 2022-04-24 22:17:02
...
网站的类别:
静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。 是没有数据库提供数据给它。

动态网站: 动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的。

www.w3school.com.cn

html: 负责了一个页面的结构.
css: 负责了一个页面的样式。
javascript： 负责与用户进行交互。

============================================================================

html(超文本标记语言)  

html 语言是开发网页的基础语言，在一个网页中负责的事情是一个页面的结构

特点：

  1. html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
  2. html 是不区分大小写的。

html语言的基本结构：
<html>      html语言的根标签.
    <head></head>      网页的头信息
    <body></body>      网页的体部分
</html>
<!-- 注释的内容 -->

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

头信息的作用：

  1. 可以设置网页的标题。   <title>这是网页标题</title>
  2. 可以通知浏览使用指定的码表解释html页面。   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  3. 设置搜索引擎关键字。   <meta name="keywords" content="关键字1,关键字2,关键字3"/><!--一个网页的关键字最好是3-4个。seo(搜索引擎优化) -->

html标签作用：用于描述一个网页的结构。如果需要操作数据的样式要通过标签的属性操作
html常用的标签：

<h1>~<h6> 表示是一个标题

<p> 段落标签

<hr/> 水平线标签

<br/> 换行标签

<sub> 下标     <sup> 上标

<pre> 原样标签： 原样标签会保留空格和换行符。

<ol> <li> 有序的列表标签、

<ul> <li> 无序的列表标签。

项目列表标签( dl  dt  dd )

行内标签(span)

块标签<div> div标签的内容会独立占一行。

实体标签：< > 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，就要使用实体标签

常用的实体字符:
   空格      &nbsp；
   小于号      &lt；
   大于号      &gt；

媒体标签：<embed >    //由浏览器自己实现，不同浏览器兼容不同
      hidden（设置隐藏插件是否隐藏）src （用于指定音乐的路径）

图片标签：<img>   

     width（图片宽度）height（  图片高度）alt（ 如果图片资源无法找到，那么就显示对应的文字对图片进行说明）

     热点图：点击热点部分跳转链接  <map name="图片usemap" id=" "><area shape="热点形状" coords="具体坐标熟悉" href="跳转目标"/>

 飘动标签：<marquee> 

     direction（指定飘动的方向）scrollamount （指定飘动的速度）loop（指定飘动的次数）

*超链接标签：<a>  

   属性：href（用于指定链接的资源） target（设置新资源在哪打开： _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源）

     1. 可以用于链接资源。
     2. 锚点点位

   href属性值原理：

  1. a标签的href属性值如果是以http开头的，那么浏览器会启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件， 如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
  2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。    file协议（文件协议）主要是用于搜索本地机器的资源文件的 file:\\\盘符:路径\文件
  3. 如果a标签的href属性值并不是以http开始，而且其他的一些协议，那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。     邮件的协议： mailTo，迅雷的协议： thunder
  4. 锚点点位：首先编写一个锚点，格式：<a name="锚点名字">数据</a>。然后再使用a标签herf属性连接到锚点处：href="#锚点名字"，点击此标签会跳转定位到锚点

*表格标签：

   <table>    表格
   <tr>       行
   <td>    单元格
   <th>    表头 ，默认的样式是居中，加粗。
   <caption>    表格的标题
 常用属性：
   border 设置表格的边框
   width : 设置表格的宽度。height: 设置表格的高度的。
   colspan: 设置单元格占据指定的列数。
   rowspan : 设置单元格占据指定的行数。

  在过去网页只有遇到了</table>才会显示整个表格的内容，后来表格被分为3部分<thead>，<tbody>，<tfoot>。

  <thead>与<tfoot>可以不存在。<tbody>必须要存在一个或多个，每遇到一个</tbody>结束就显示这个<tbody>的内容，提供用户体验

框架标签：
     frameSet ： 一个frameSet可以把一个页面切割成多份。只能按照行或者列切割。
     frame： frame是位于frameSet中的， 不能被切割的。
     iframe：在一个网页中分隔一部分的位置显示另外一个网页的的信息。
     注意： frameSet标签不能用于body标签体内容。 不与body共存


表单标签：表单标签的作用是用于提交数据给服务器。

根标签<form>，属性：action（当提交表单时向何处发送表单数据）。method（规定用于发送 form-data 的 HTTP 方法，get或post）

get : 默认使用的提交方式。  提交的数据会显示在地址栏上，数据不能超过1kb
post ：  提交的数据不会显示在地址栏上，数据不受地址栏限制

<form>标签常用包含以下元素：

  1. <input />标签，通过type属性设置元素类型：text单行文本输入框、password密码框、radio单选框、checkbox复选框、file文件上传框、reset重置按钮、submit提交按钮
  2. 下拉框<select > <option>
  3. 文本域 <textarea>

注意： 表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值（同一组的单选、复选框name的属性值要一致）。不能输入内容的元素(如单选、复选、下拉框)实际提交的是value属性的值

============================================================================

css(层叠样式表)

 在一个网页中主要负责了页面的数据样式

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

css代码的编写方式：     /* css的注释 ..*/

第一种： 在style标签中编写css代码。 只能用于本页面中，复用性不强。

格式 ：

<style type="text\css">
编写css的代码。
</style> 

例：
<style type="text\css">
a{
color:#F00;
text-decoration:none;
}
</style>
第二种： 引入外部的css文件。

方式1： 使用link标签。   推荐使用

格式：<link href="css文件的路径" rel="stylesheet">

方式2：使用<style>标签@import引入，最多引入31次，加载慢，有兼容问题

格式：

<style type="text/css" >

@import url("css的路径");

</style>

第三种：直接在html标签使用style属性编写。 只能用于本标签中，复用性较差，不推荐使用。
例：<a style="color:#0F0; text-decoration:none" href="#">标题1</a>

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

选择器：选择器的作用就是找到对应的数据进行样式化

1.标签选择器：找到所有指定的标签进行样式化。
格式：
标签名{
样式1；样式2....
}
   例：让所有div标签为指定样式
div{
color:#F00;
font-size:24px;
}
2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值，标签设置class属性时使用样式
格式：
.class的属性值{
样式1；样式2...
}
   例：将标签的class属性值设置为two就会使用样式
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
}
<a class="two" href="#">使用.two中的样式</a>
类选择器注意事项：
1. html元素的class属性值一定不能以数字开头

2. 类选择器的样式是要优先于标签选择器的样式

3. ID选择器：使用ID选择器首先要给html元素添加一个id的属性值。

格式：

#id属性值{

样式1；样式2...

}

<a id="id属性值" >此标签使用id中的样式</a>

id选择器要注意事项：
1. ID选择器的样式优先级是最高，优先于类选择器与标签选择器。
2. ID的属性值也是不能以数字开头的。
3. ID的属性值在一个html页面中只能出现一次。

4. 交集选择器： 就是对选择器1中的选择器2里面的数据进行样式化。

选择器1 选择器2{

样式1，样式2....

}

5. 并集选择器：对指定的选择器进行统一的样式化。

选择器1,选择器2..{

样式1；样式2...

}

6. 通用选择器:

*{

样式1；样式2...

}

伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的

a:link {color: #FF0000}      /* 未访问的链接 */

a:visited {color: #00FF00}      /* 已访问的链接 */

a:hover {color: #FF00FF}       /* 鼠标移动到链接上 */

a:active {color: #0000FF}        /* 选定的链接 */

注意： 

  1. a:hover 必须被置于 a:link 和 a:visited 之后
  2. a:active 必须被置于 a:hover 之后

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

常用CSS样式：

background···      背景相关属性

text···，font···，color，line-height，letter-spacing      文本相关属性

border-collapse，border-spacing，table-layout       表格相关属性

border······         边框相关属性

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

盒子模型: 

盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者是边框与边框之间的距离。
盒子模型主要是用于操作内边距(padding)与外边距（margin）

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

css的定位：
相对定位： 相对定位是相对于元素原本的位置进行移动的。

position:relative;

top:***px;

left:***px;

绝对定位： 绝对定位是相对于整个页面而言。

position:absolute;

top:***px;

left:***px;

固定定位：固定定位是相对于整个浏览器而言。

position:fixed; 

top:***px;

left:***px;

============================================================================


上一篇： 你不知道的秘密之JS对象转化为数组的方法

下一篇： 【转载】erlang 中 socket 相关知识点

推荐阅读