当前位置：移动技术网 > IT编程>网页制作>CSS > HTML/CSS快速入门

HTML/CSS快速入门

2019年02月27日 | 移动技术网IT编程 | 我要评论

web概念

javaweb
- 使用java语言开发基于互联网的项目
软件架构
- c/s架构:client/server 客户端/服务器
  - 用户本地有一个客户端程序,在远程有一个服务端程序
  - 如qq,英雄联盟.......
  - 优点
    - 用户体验好
  - 缺点
    - 开发,安装,部署,维护麻烦
- b/s架构:browser/server 浏览器/服务器端
  - 只需要一个浏览器,用户通过不同的网址(url),客户端访问不同的服务器端程序
  - 优点:
    1. 开发,安装,部署,维护简单
  - 缺点:
    1. 如果应用过大,用户体验可能受到影响
    2. 对硬件要求过高
b/s 架构详解
- 资源分类:
  1. 静态资源:
    - 使用静态网页开发技术发布的资源
    - 特点:
      - 所有用户访问,得到的结果是一样的
      - 如:文本,图片,音频,视频,html,css,javascript
        
        html:用于搭建基础网页,展示页面的内容
        
        css:用于美化页面,布局页面
        
        javascript:控制页面的元素,让页面有一些动态的效果
      - 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置了静态资源引擎
  2. 动态资源:
    - 使用动态网页实时发布的资源
    - 特点:
      - 所有用户访问,得到的结果可能不一样
      - 如:jsp/servlet,php,asp.....
      - 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发给浏览器

html

概念:是最基础的网页开发语言
- hyper text markup language 超文本标记语言
  - 超文本:
    - 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
  - 标签语言:
    - 由标签构成的语言.<标签名> 如html,xml
    - 标记语言不是编程语言
快速入门:
- 语法:
  1. html文档后缀名.html或者.htm
  2. 标签分为
    1. 围堵标签:有开始标签和结束标签.如
    2. 自闭和标签:开始标签和结束标签在一起.如
  3. 标签可以嵌套:
    - 需要正确嵌套,不能你中有我,我中有你
    - 错误:
    - 正确:
  4. 在开始标签中可以定义属性.属性是由键值对构成,值需要引号(单双都可)引起来
  5. html中不区分大小写,建议小写
标签学习
1. 文件标签:构成html最基本的标签
  - html:html根标签
  - head:头标签
  - title:标题标签
  - body:体标签
2. 文本标签:
  - 注释:<!-- 注释内容--!>
  - to
    :标题标签
  - :段落标签
  - :换行标签
  - :水平线
    - color:颜色
    - size:大小
    - width:宽度
    - align:对齐方式
      - center:居中;
      - left: 左对齐
      - right: 右对齐
  - :加粗
  - :斜体
  - :字体标签
    - color:颜色
    - size:大小
    - face:字体
  - :文本居中
  - 属性定义:
    - color:
      1. 英文单词:red,green,blue;
      2. rgb(值1,值2,值3):值的范围:0~255,如rgb(0,0,255);
      3. 值1值2值3:值的范围:00~ff之间.如#ff00ff
    - width:
      1. 数值:width='20',数值的单位,默认为px(像素);
      2. 数值%;占比相对于父元素的比例;
3. 图片标签
  - img:展示图片
    - 属性:
      - src:指定图片的位置
        
        相对路径:以.开头的路径
        
        ./:代表当前目录
        
        ../:代表上一级目录
4. 列表标签
  - 有序列表:
    - ol:
    - li:
  - 无序列表:
    - ul:
    - li:
5. 链接标签
  - a:定义一个超链接
    - 属性:
      - href:指定访问资源的url
      - target:指定打开资源的方式
        
        _self:默认值:在当前页面打开
        
        _blank:在空白页面打开
6. div和span标签
  - div:每一个div占满一行,块级标签
  - span:文本信息在一行展示,行内标签,内联标签
7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签
  - :
8. 表格标签
  - table:定义表格
    - width:宽度
    - border:边框
    - cellpadding:内容和单元格之间的距离
    - cellspacing:单元格之间的距离
    - bgcolor:背景色
    - align:对齐方式
- tr:定义行
  - bgcolor:背景色
  - align:对齐方式
- td:定义单元格
  - colspan:合并列
  - rowspan:合并行
- th:定义表头单元格
- :表格标题
- :表格的头部分
- :表格的体部分
- :表格的脚部分
表单标签
- 表单:
  - 概念:用于采集用户输入的数据,用于和服务器进行交互.
  - form:用于定义表单,可以定义一个范围,范围代表采集用户数据的范围.
  - 属性:
    - action:指定提交数据的url;
    - method:指定提交方式
      - 分类:一共有7种,2种比较常用
        
        get:
        
        请求参数会在地址栏中显示
        
        请求参数大小有限制
        
        不太安全
        
        post:
        
        请求参数不会在地址栏中显示,,会封装在请求行中
        
        请求参数的大小没有限制
        
        较为安全
    - 表单项中的数据要想被提交,必须指定其name属性
- 表单项标签:
  - input:可以通过type属性值,改变元素展示的样式
    - type属性:
      - text:文本输入框,默认值
        
        placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
      - password:密码输入框
      - radio:单选框
        
        注意:
        
        要想让单选框实现单选的效果,则多个单选框的name属性值必须一样
        
        一般会给每一个单选框提供value属性指定其被选中后提交的值
        
        checked属性,可以指定默认值
      - checkbox:复选框
        
        注意:
        
        一般会给每个单元框提供,指定其被选中后提交的值
        
        checked属性,可以指定默认值
      - file:文本选择框
      - hidden:隐藏域,用于提交一些信息
      - 按钮:
        
        submit:提交按钮
        
        button:普通按钮
        
        image:图片提交按钮
        
        src属性指定图片提交的路径
        
        date
        
        datetime-local
        
        email
        
        number
    - label:指定输入项的文字描述信息
      - 注意:
        
        label的for属性一般会和input的id属性值对应,如果对应了,则点击label区域会让input输入框获取焦点
    - seelct:下拉列表
      - 子元素:option,指定列表项
    - textarea:文本域
      - cols:指定列数,每一行有多少个字符
      - rows:默认多少行

css

概念:cascading style sheets层叠样式表
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
好处:
1. 功能强大
2. 将内容和样式控制分离
  - 降低耦合度
  - 让分工合作更容易
  - 提高开发效率
3. css使用:css与html结合方式
  1. 内联样式
```
<div style="color: red;">aaa</div>
```
  1. 内部样式
```
     <style>
     div{
     color:gray;
     }
     </style>

   <div>aaa</div>
```
  1. 外部样式
    - 定义css资源文件
    - 在head标签中定义link标签,引入外部的资源文件
```html
aa.css
div {
color:red;
}
```
            <link rel="stylesheet"                                                type="text/css" 
                href="css/aa.css" />
                   或
                  <style>
                   @import url("css/aa.css");
                  </style>
      
                      <div>aaa</div>
```
```
  2. css语法:
    - 格式:
      选择器{
      属性名1:属性值1;
      属性名2:属性值2;
      ....
      }
    - 选择器:筛选具有相似特征的元素
    - 注意:
      - 每一对属性需要使用;隔开,最后一对属性可以不加
  3. 选择器:筛选具有相似特征的元素
    - 分类:
      1. 基础选择器
        
        id选择器:选择器具有的id属性值的元素,建议在一个html页面中id值唯一
        
        语法:#id属性值{}
        
        元素选择器:选择具有相同标签名称的元素
        
        类选择器:选择具有相同的class属性值的元素
        
        语法:.class属性值{}
        ###### 注意:
        优先级:id选择器>类选择器>元素选择器
      2. 扩展选择器
        
        选择所有元素
        
        语法:*{}
        
        并集选择器:
        
        语法:*{}
        
        子选择器:筛选选择器1的父元素选择器2
        
        语法:选择器1 选择器2 {}
        
        父选择器:筛选选择器2的父元素选择器1
        
        语法:选择器1>选择器2 {}
        
        属性选择器:选择元素名称.属性名=属性值的元素
        
        语法:元素名称[属性名="属性值"]{}
        
        伪类选择器:选择一些元素具有的状态
        
        语法:元素.状态{}
        
        如:
        
        状态
        
        link:初始状态
        
        visited:被访问状态
        
        active:正在访问状态
        
        hover:鼠标悬浮状态
  4. 属性
    1. 字体、文本
      - font-size
      - text-align
      - line-height
    2. 背景
      - background
    3. 边框
      - border
    4. 尺寸
      - width
      - height
    5. 盒子模型
      - margin:外边距
      - padding:内边距
        
        默认情况下内边距会影响整个盒子的大小
        
        box-sizing:border-box;设值盒子的属性,让width和height就是盒子最终的大小
      - float:浮动
        
        left
        
        right

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

使用css样式，制作表格（小程序）

效果图：wxml:<view class="table-wrap"><view class="... [阅读全文]
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框

今天在chrome浏览器上测试项目时，突然发现所有的表单控件都被加上了一个奇怪的黑色边框，翻了半天css文件后，... [阅读全文]
4.3 人脸融合应用程序的设计

文章目录4.3 人脸融合应用程序的设计4.3 人脸融合应用程序的设计ManyMasks软件打开之后,将展现一个实... [阅读全文]
LeetCode解析------155.最小栈-设计

题目：设计一个支持 push ，pop ，top 操作，并能在常数时间内检索到最小元素的栈。push(x) ——... [阅读全文]
4.复杂选择器、权重计算、css基础属性

CSS权重!importantInfinity行间样式1000id100class/属性/伪类10标签/伪元素1... [阅读全文]
荐 20200714——git/mac配置/项目运行步骤/一些报错

分布式：GIT工作模式下，每个开发者（安装了git客户端）的电脑就等同于传统SVN服务器svn工作模式：co... [阅读全文]
antd 菜单组件使用时报错：Cannot read property ‘isRootMenu‘ of undefined

项目中使用了antd ui框架，在使用Menu组件得SubMenu组件时报出以下错误：Uncaught Type... [阅读全文]
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来

div的style="background-image: url(img/a.bmp)图片显示不出来首先我的di... [阅读全文]
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）

WHQL提交账户建立指南建立Microsoft 帐户如果你有hotmail，outlook，OneDriver，... [阅读全文]
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系

前些天在开发中遇到了关于浏览器cookie的一些小细节问题。例如：我创建的一个小购物车的web项目。用ngi... [阅读全文]