HTML+CSS通识内容

心已赠人 2023-10-14 20:28 28阅读 0赞

## 一、WEB基础知识(了解) ##

### 1、WEB与Internet ###

#### （1） Internet ####

全球性计算机互联网络  
因特网、国际互联网、网际网

#### （2）Intenet提供的服务 ####

Email:电子邮件  
WWW:万维网  
www.baidu.com  
BBS:电子公告板(论坛)  
Telnet:  
FTP:

#### （3）实现技术 ####

分组交换原理：将信息拆分成若干小数据包  
TCP/IP ：协议簇

#### （4）WEB程序 ####

**什么是WEB**  
WEB就是Internet上的应用之一-网页应用  
WEB所谓的WWW(World Wide Web)  
W3C:World Wide Web Consortium(万维网联盟)  
WEB : 应用程序，将信息和各项服务实现无缝连接

### 2、WEB的工作原理 ###

#### （1）基于B/S模式的程序(Web) ####

B/S :  
B : Browser 浏览器  
S : Server 服务器

#### （2）基于C/S模式的程序 ####

C/S :  
C : Client 客户端  
S : Server 服务器

#### （3） WEB服务器、浏览器和通信协议组成 ####

WEB服务器：  
PC：Personal Computer  
Server：服务器  
通信协议：http(Hyper Text Transfer Protocal)超文本传输协议，规范了 互联网上的数据 是如何打包以及如何传递

### 3、服务器与浏览器 ###

#### （1）服务器 ####

##### 主要功能 #####

1、存储 WEB 信息，提供管理环境  
2、响应浏览器的请求，执行服务器端程序  
3、安全功能

##### 主要产品 #####

TOMCAT  
IIS  
APACHE

##### 实现技术 #####

JSP  
PHP  
ASP.NET  
ASP

#### （2）浏览器 ####

##### 主要功能 #####

1、提交请求  
User Agent(UA) :用户代理  
2、作为 HTML 和 脚本的解释器  
3、以图形化方式显示HTML文档

##### 主要产品 #####

1、Microsoft IE  
2、Mozilla Firefox 火狐  
3、Google Chrome  
4、Apple Safari  
5、Opera 欧朋

##### 实现技术 #####

1、HTML  
2、CSS  
3、Javascript

## 二、HTML快速入门 ##

### （1）HTML概述 ###

**什么是HTML**  
Web页或Web应用，就是互联网上的一个网页程序，通常以 .html或.htm作为后缀的文件  
WEB页是由HTML编写而成  
HTML：(Hyper Text Markup Language),超文本标记语言  
超文本a:超链接的功能  
超文本b:给文字加粗  
Markup :标记，规定了超文本的组成形式，是由标记组成超文本

### （2）HTML基础语法 ###

#### 1、标记语法(Markup) ####

##### 作用 #####

HTML用于描述功能的符号称之为"标记"

##### 语法 #####

标记 必须用 尖括号"<>" 括起来

<a></a>：超链接
    <b></b>: 加粗文本显示
    <p></p>: 段落

##### 标记分类： #####

**1、封闭类型标记-双标记**  
必须成对出现  
<标记>内容</标记>  
注意：封闭类型标记，有开始，必须有结束，否则会有意想不到的效果  
**2、非封闭类型标记-单标记**  
也称之为 空标记  
<标记>  
或  
<标记/>

<br>:换行
    <hr>:一条横线
    <img>:图像

#### (3)元素 ####

元素即标记  
测试文本

##### 元素嵌套 #####

元素(标记)中又嵌套元素(标记)，形成更复杂的语法结构  
编写嵌套代码时，一定要注意嵌套顺序和格式

#### （4） 属性 和 值 ####

**作用**  
用来修饰元素  
让 p 标记的文本水平居中对齐

<p>Hello World</p>

**语法**

1、属性的声明必须位于开始标记里 <标记 属性></标记>  
2、属性都可以有值，属性和值得表现方式 属性=“值” <标记 属性=“值”></标记>  
3、一个元素中允许出现多属性和值，中间用 空格 隔开，并且排名不分先后  
<标记 属性=“值” 属性=“值”></标记>  
给 一对 p 标记 设置 align属性，值为 center

**标准属性**  
每个元素都有自己的特有属性  
有些属性是所有元素都支持的，称为标准属性  
1、id:元素在页面中的唯一标识  
2、title:鼠标移入到元素时所提示的文本内容  
3、class：元素引用的类选择器(与样式相关)  
4、style:元素定义的内联样式(与样式相关)

#### （5）注释 ####

**作用**  
在编辑文档下可见，在浏览器展示页面时并不显示的内容  
**语法**

**注意**

注释不能嵌套
    
    -->
    以上结构-错误
    注释不能位于<>中
    <p>
    以上结构-错误

#### (6)HTML文档结构 ####

###### 6.1、文档类型声明 ######

作用：指定使用的HTML版本和风格  
<!doctype html>

###### 6.2、html标记 ######

位置 位于 doctype 之下  
包含以下两对子元素

###### head标记 ######

网页头部内容  
**作用**  
定义页面全局信息  
**包含以下子元素**

<title>标题</title>页面标题
    <meta>定义页面元数据
    <meta charset="utf-8">

注意：设置网页编码的同时，保证网页文件的编码也为utf-8

###### body标记 ######

网页显示的主体内容  
**属性：**  
1、text  
控制网页文本的颜色  
2、bgcolor  
控制网页的背景颜色

#### (7)文本标记 ####

通过文本标记，改变文本的默认样式

##### 特殊字符(转译字符) #####

< 表示 <
    > 表示 >
      表示 一个空格
    © 表示 ?
    ¥ 表示 ￥

##### 文本样式 #####

<b>...</b> : 加粗
      <i>...</i> : 斜体
      <u>...</u> : 下划线
      <s>...</s  : 删除线
      <sup></sup>:上标
      <sub></sub>:下标

##### 标题元素 #####

在页面中完成标题效果的显示(突出显示大小和加粗效果)  
<h\#></h\#>  
\#:1~6  
一级标题(最大)~六级标题(最小)  
**特点：**  
1、每个标题 独占一行  
2、每个标题 都具备上下垂直空白  
**属性：**  
align：文本水平对齐方式  
**取值：**  
1、left ：左对齐  
2、center ：居中对齐  
3、right ：右对齐

##### 段落元素 #####

特点：  
1、独占一行  
2、上下垂直空白  
语法：

<p></p>

##### 换行 #####

语法：

<br/>

##### 分割线元素 #####

语法：

<hr/>

属性：  
1、size:尺寸,取值是一个以px(像素)为单位的数字,单位可以省略  
2、width：宽度，取值数字，同上  
3、align ：分割线的水平对齐方式left,center,right  
4、color ：颜色

#### （8）块分区元素-div ####

语法:

特点：独占一行  
作用：布局

#### （9）行分区元素-span ####

语法：

注意：多个span会在一行内显示  
作用：包裹文本，并设置文本样式

#### （10）块级元素与行内元素 ####

1、块级元素
     默认情况下，会独占一行的元素就是块级
     <h#>,<p>,<div>
     作用：布局
    2、行内元素
     不换行，多个行内元素都在一行内显示
     i,b,s,u,sub,sup,span
     作用：处理文本显示效果

#### （11）预格式化 ####

作用：保留原文档中的格式，即保留文档中的回车和换行  
语法：

### 常用专业术语 ###

#### 1、图像和链接 ####

### 1、URL ###

#### 1、目录 & 目录结构 ####

目录：WEB站点中文件夹的名称
                          目录结构：由目录以及子目录形成复杂结构

#### 2、URL ####

URL(Uniform Resource Locator)
                          统一资源定位符
                          作用：用来标识网络中资源的位置
                                   资源：图片，网页，音视频...
                          俗称：路径(地址)
    
                          URL在WEB页面上有三种表现形式:
                           1、绝对路径
                          2、相对路径
                          3、根相对路径

#### 3、路径详解(重点) ####

##### 1、绝对路径 #####

文件从最高级目录下开始的完整路径

###### 访问网络资源 ######

由以下四个部分组成  
1、协议名  
https  
2、主机名(域名)  
www.baidu.com  
3、目录路径  
img  
4、文件名  
bd\_logo1.png

##### 2、相对路径 #####

资源文件为止是相对于当前文件的位置开始进行查找的完整路径表现形式。 相对路径是通过 文件之间的 位置关系 来查找文件  
2、具体表现形式  
1、资源文件和当前文件在同目录  
直接通过资源文件名称 进行引用  
2、资源文件 在 当前文件的 相当于是子目录中  
想进入到目录中，再查找  
3、资源文件 在 当前文件的 父层结构下  
通过 …/ 向上返回，再引用文件

#### （12）图像 ####

1、语法
            <img>
            <img/>
    2、属性
            1、src
                     指定要显示的图像的URL
            2、width
            3、height
                     注意：等比缩放

#### （13）链接 ####

1、语法
          <a>内容</a>
    2、属性
          1、href
                   链接文件URL
          2、target
                   目标，打开新网页的方式
                   取值：
                            1、_self
                                     默认值
                            2、_blank
                                     新标签页打开
    3、链接4种表现形式
          1、目标文档为下载资源
                   <a href="xxx.rar/zip">xxx</a>
          2、电子邮件链接
                   <a href="mailto:xxx@xxx.com">xxxx</a>
          3、返回页面顶部空链接
                   <a href="#">xxx</a>
          4、链接到JS
                   <a href="javascript:js代码">xxx</a>
    4、锚点
          1、定义锚点
                   1、通过任何标记的 id 属性
                   2、通过a标记的 name 属性
          2、链接到锚点
                   <a href="#锚点名称"></a>
                   <a href="页面URL#锚点名称"></a>

#### （14）表格 ####

1、作用
     将数据 按照 从左到右，从上到下的顺序进行显示
    2、语法
     1、标记
             1、创建表格
                      <table></table>
             2、创建表行
                      <tr></tr> -- table row
             3、创建列(单元格)
                      <td></td> -- table data
     2、属性
             1、table
                      width,height,align,border,cellspacing,cellpadding,bgcolor
             2、tr
                      align,valign,bgcolor
             3、td
                      align,valign,bgcolor,width,height,colspan,rowspan
     3、表格其他标记
             1、标题
                      <caption></caption>
             2、行标题或列标题
                      <th></th>
     4、表格复杂应用
             1、行分组
                      表头：<thead></thead>
                      表主体：<tbody></tbody>
                      表尾:<tfoot></tfoot>
             2、不规则表格
                       通过 td 的 colspan和rowspan 属性来设置
                      colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除
                      rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除
    
             3、表格嵌套
                      一个表格中又出现一个表格
                      表格中的所有内容，只能出现在td中

#### （15）列表 ####

1、什么是列表
        按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
    2、列表的组成
        主要由 列表类型 和 列表项 来组成
    3、语法
        1、有序列表
             标记:<ol></ol> -- Order List
              列表项：<li></li>
    
              <ol>
                       <li>内容</li>
                       <li>内容</li>
                       ... ...
              </ol>
                属性：
                    1、type
                           作用：列表项前的标识
                           取值：
                              1、1 数字，默认值
                               2、a 小写字母
                               3、A 大写字母
                               4、i 小写罗马数字
                               5、I 大写罗马数字
                      2、start
                               指定 列表项 从第几个字符开始显示
        2、无序列表
                标记：<ul></ul> -- Unorder List
                列表项：<li></li>
                属性：
                1、type
                   1、disc，实心圆（默认值）
                    2、circle，空心圆
                    3、square，实心方块
                    4、none，没有
        3、列表的嵌套
                通过列表嵌套，可以实现多层列表
                被嵌套的内容，必须放在li中
    4、定义列表
        1、作用
                定义列表用于给出一类事物的定义情形
        2、语法
                <dl></dl>:定义一个定义列表
                <dt></dt>:定义列表中要解释的名词或术语
                <dd></dd>:定义列表中对名词或术语的解释
    
    
        3、使用场合
                图文混排 时

#### （16）结构标记 ####

1、作用
    用于表示页面中的布局，目的是为了提升标记的语义化
    2、结构标记
    1、<header>元素
        1、语法
                 <header></header>
        2、作用
                 定义文档的页眉
                 用于取代：<div id="header"></div>
    2、<nav>元素
       1、语法
                 <nav></nav>
       2、作用
                 用于表示页面中的导航部分
    3、<section>元素
       1、语法
                 <section></section>
       2、作用
                 用于表示 页面中的 主体部分
    4、<article>元素
      1、语法
                <article></article>
      2、作用
            用于表示独立于文档的其他部分的内容
              比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等
    5、<footer>元素
            1、语法
                     <footer></footer>
            2、作用
                     用于表示 网页 底部信息
    6、<aside>元素
            1、语法
                     <aside></aside>
            2、作用
                     表示网页 内容 中的边栏信息

#### （17）表单 ####

**表单作用**  
用于显示、收集用户信息，并将信息提交给服务器

**表单组成：**  
1、表单元素-负责将用户数据提交给服务器  
2、表单控件-负责接收用户的数据(与用户进行数据交互)  
2、表单元素  
**标记**

##### 属性 #####

**1、action**  
定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL  
默认 是提交给本页  
**2、method**  
指定表单数据提交的方式

取值：
    get(默认值)
             向服务器端要数据时使用
             特点：
             1、显示提交：用户数据是可以显示在地址栏上的
             2、提交数据长度限制：2KB
    post
             向服务器传递数据时使用
             特点：
             1、隐式提交：所提交的数据是看不见的-安全性较高
             2、无数据大小限制
    
    enctype(非重点)
             表单数据进行编码的方式
             取值：
             1、application/x-www-form-urlencoded(默认值)
             2、multipart/form-data
                      使用场合：上传文件时使用
             3、text/plain

##### 表单控件 #####

**作用**  
提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据  
表单控件分类  
input组元素，textarea，选项框(select和option)，其他元素

**语法**
    <input>或<input/>
    **属性**：
        1、type
                根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等
        2、value
                值，要提交给服务器的值
        3、name
                控件的名称，服务器端使用，没有名字，无法提交
        4、disabled
                禁用控件，该属性无值，只要出现在控件中就表示禁用
                <input disabled>
    ```
    #### 表单控件分类
    ```
    1、文本框与密码框
    文本框：type="text"
    密码框：type="password
    
    属性：
            1、maxlength
                     限制输入的字符数
            2、readonly
                     只读
            3、name
                     以控件的缩写+功能名称组成
                     文本框和密码框的缩写：txt
            4、value
    2、单选按钮 和 复选框
    单选按钮：type="radio"
    复选框：type="checkbox"
    
    属性：
            1、name
                     名称以及分组，一组单选按钮或复选框的话，名称必须一致
                     单选按钮:rdo
                     复选框：chk
            2、value
                     值
            3、checked
                     设置默认被选中
    3、按钮
        提交按钮：type="submit"
                负责提交数据到服务器
        重置按钮：type="reset"
                将表单元素恢复到默认值
        普通按钮：type="button"
                执行客户端脚本(JS)
        属性：
                1、name
                         缩写：btn
                2、value
                         按钮上的显示文本
    4、隐藏域和文件选择框
        1、隐藏域
                不想给用户看，但是要提交给服务器的数据
    
                <input type="hidden">
                属性：
                         1、name 名称,缩写 txt
                         2、value 值
        2、文件选择框
                提交(上传)文件时使用
                <input type="file">
                属性：
                         1、name
                                  缩写 ：txt
                注意：
                         1、保证 form 的 method 属性 必须为 post
                         2、保证 form 的 enctype 属性 必须为 multipart/form-data

##### textarea 元素 #####

多行文本框
    1、语法
    <textarea>文本</textarea>
    2、属性
    name
        控件的名称，缩写 txt
    readonly
        只读
    cols
        指定文本域的列数
        变相设置宽度
    rows
        指定文本域的行数
        变相设置高度
    ```
    #### 选项框
    ```
    两种：
    1、下拉选项框
    2、滚动列表
    语法
    1、<select></select>
        功能：创建选项框(滚动列表)
        属性：
        1、name
                缩写：sel
        2、size
                默认显示的选项数量，如果取值大于1的话，则为滚动列表
        3、multiple
                设置多选
    2、<option></option>
        选项框中的选项
        属性：
                1、value
                         值
                2、selected
                         预选中

##### 其他元素 #####

1、label 元素
    作用
        关联 文本 与表单控件。
    语法
        <label>文本</label>
        属性：
                for ：表示与该元素相关联的表单控件的ID值
    2、fieldset 元素
    作用
        为控件分组
    语法
        1、<fieldset></fieldset>
                为控件分组
        2、<legend></legend>
                为分组指定标题
    3、button 元素
    语法:
        <button>内容</button>
    注意：
        <button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)

#### （18）其他标记 ####

1、浮动框架
              1、作用
                      可以在一个浏览器窗口中同时显示多个页面文档
              2、语法
                      <iframe>内容</iframe>
                      注意：
                               1、必须是成对标记
                               2、当浏览器不支持<iframe>元素时，将显示"内容"作为该处的 内容
                      属性
                               1、src
                                        浮动框架中的网页URL
                               2、width
                               3、height
                               4、frameborder
                                        浮动框架的边框，设置为0，则取消边框
     2、摘要与细节
              1、作用
                      允许将页面某部分内容进行展开或收缩
              2、语法
                      <details>
                               <summary>标题</summary>
                      </details>
     3、度量元素
              1、作用
                      用于显示静态比例的信息
              2、语法
                      <meter>文本</meter>
                      属性：
                               1、min
                                        度量范围的最小值，默认为0
                               2、max
                                        度量范围的最大值，默认为1
                               3、value
                                        当前显示的度量值，默认为0
     4、时间元素
              1、作用
                      用于关联时间的不同表现形式
              2、语法
                      <time>时间文本</time>
                      属性：
                               datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割
     5、高亮文本显示
              1、作用
                      将页面中的某部分文本，以特殊的背景颜色显示出来
              2、语法
                      <mark>高亮文本显示</mark>