HTML入门

  1. body标记的常见属性:bgcolor 设置背景颜色;text 设置文本颜色;link 设置链接颜色;vlink 设置已经访问了的链接颜色;alink 正在点击的链接颜色;
  2. meta是单标记
  3. 多个空格和回车会被视为一个空格
  4. pre预格式化标记,保留预先编排好的格式,比如显示多个空格
  5. ul 无序列表  ol 有序列表,有type属性,自定义排序符号,type属性值为(1,A,a,I,i),li的value属性值,自定义起始值
  6. dl dt dd 对列表条目进行简短的说明
    <dl>
    <dt>软件说明1:</dt>
    <dd>balabalabala</dd>
    <dt>软件说明2:</dt>
    <dd>balabalaballa</dd>
    </dl>
  7. 文档标记
    1. hn 标题标记,共有六级
    2. font 字体设置标记,size属性,1-7,默认为3;face字体属性,如楷体(Kaiti),仿宋(Fangsong);
    3. b粗字体标记
    4. i 斜字体标记
    5. sub 文字下标字体标记
    6. sup 文字上标字体标记
    7. tt 打印机字体标记
    8. cite 引用方式的字体,通常是斜体
    9. em 表示强调,通常显示未斜体字
    10. strong 表示强调,通常显示为粗体字
    11. small  小型字体标记
    12. big 大型字体标记
    13. u 下划线字体标记
  8. 图像标记 <img src="文件路径" width="宽" height="高" border="边框宽度" alt="提示文字">
    宽高单位:px、em、cm、mm;
    alt属性:作用1 当网页上的图片加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字;
                   作用2 如果图像加载失败,会用文字来代替图像显示;
                   作用3 搜索引擎可以通过这个属性的文字来抓取图片)
  9. 链接标记  <a href="链接地址" target="打开方式" name="页面锚点名称">链接文字或者图片</a>
    target属性值:_blank 在一个新窗口打开链接;_self(默认) 在当前窗口打开链接;_parent 在父窗口打开页面;_top 在顶层窗口打开页面
  10. 表格
    <table width="宽,默认单位为px,可加可不加" cellspacing="单元格与单元格的间距" cellpadding="单元格与内容的间距" border="同时设置表格和单元格的边框" align="left(默认)/bottom/right">
    <caption align="top/bottom">表格标题</caption>
    <tr bgcolor="背景颜色" align="left/right/center" valign="middle/top/bottom"> *align是水平对齐方式,valign是垂直对齐方式,valign默认
    <td rowspan="设置单元格所占行数" colspan="设置单元格所占列数">第一列</td>
    <td>第二列</td>
    </tr>
    </table>
    *补充,th是表头
  11. form表单
    input输入框:size属性设置控件长度;maxlength属性设置输入框允许输入的最大字符数;
    eq:maxlength="10":表示输入框最多输入 10 个字符(中文也算一个字符),超过之后将不能再输入;

    size="5":表示输入框只显示 5 个可见的字符,但可以输入无数多的字符;

    radio 单选按钮;checkbox 复选框;两者都可以通过checked属性设置默认选中项,写法为checked="checked"或者直接checked
    textarea多行文本域:cols和rows属性
    菜单下拉文本域

    <select  name="addr" multiple>   *mutiple是多选属性
    <option value="chengdu">成都</option>
    <option value="shanghai">上海</option>
    <option value="fujian">福建</option>
    </select>
  12. 框架集frameset
    <html>
    <frameset rows="20%,10%,*" >
    <frame src="top.html" noresize> 子框架1
    <frameset cols="10%,*"> 子框架2
    <frame src="top.html" scrolling="no">
    <frame src="top.html">
    </frameset>
    <frame src="top.html"> 子框架3
    </frameset>
    </html>
    *注意:frameset不能喝body同时存在

    对于rows和cols属性,使用像素数或百分号分割窗口,*表示剩余部分,如果用“*,*,……”表示均分
    frameborder 指定是否显示边框,0不显示,1显示;
    border 设置边框宽度,默认为5个像素

    frame是子窗口标记,用src属性指定网页地址,name设置子框架名称,noresize不能调整框架大小,
    scrolling(可选值:auto/yes/no) 是否需要滚动条,frameborder 是否需要边框

  13. 补充 DOCTYPE声明:必须位于文档第一行,用来指定页面所使用的HTML的版本,html5中直接使用<!DOCTYPE html>就可以了

CSS入门

  1. 使用css的三种方式:1 内链样式表();2 嵌入式样式表();3 引入式
    1、行内样式/内链样式表(在HTML元素的内部,利用style属性直接定义样式) ,
    例: <body style="background-color: green;margin: 0;padding: 0;">
     
    2、内部样式表/嵌入式样式表(在网页<head>标签中,利用style标签定义样式)
    例:

    body{
          background-color: green;
               margin:0;
      padding: 0;
    }

    3、外部样式表/引入式样式表(将样式定义在另外一个样式表文件中)
    例:
    (a)通过<link>标签引入样式表:<link rel="stylesheet" type="text/css" href="my.css">
     
    (b)通过@import导入样式表:

    在html中
    <style type="text/css">
    @import url(CSS文件路径地址);
    </style> 在css中
    直接使用
    @import url(CSS文件路径地址);

      

  2. 选择器
    1. .myclass p{}   选择myclass类下面的p元素
    2. h1,h2,p{}    组合选择器,以逗号分隔
    3. 伪类选择器(a链接样式):a:link  正常链接的样式;a:hover  鼠标放上去的样式;a:active  链接被选中时的样式;a:visited  访问过的链接的样式
  3. CSS常见属性
    1. 颜色属性

      color:green;
      color:#ff0000; 每两位十六进制数分别表示红绿蓝的取值范围
      color:rgb(255,0,0); rgb(红,绿,蓝),每种颜色取值范围为0~255
      color:rgba(255,0,0,0.8); rgb(红,绿,蓝,Alpha透明度),每种颜色取值范围为0~255,透明度取值范围0~1,1为100%显示
    2. 字体属性

      字体大小;font-size:px 设置一个固定的值/ %父元素的百分比/ smaller 比父元素更小/ larger 比父元素更大/ inherit 继承父元素
      定义字体:font-family:serif,微软雅黑;(以逗号分隔多个字体,以确保字体不存在时直接使用下一个
      字体加粗:font-weight:normal(默认值)/bold/bolder/lighter
      字体样式:font-style:normal/italic/oblique(倾斜)/inherit
      小型大写字母显示文本:font-variant:normal/small-caps/inherit
    3. 背景属性

      body{
      /*background-color:rgb(0,0,0);*/
      background-image:url('0.jpg');
      background-repeat:no-repeat;
      background-position: left,top;
      } 1、背景颜色:background-color
      2、图片背景:background-image:url()
      3、背景重复:repeat(默认,重复平铺满)/no-repeat(不重复)/repeat-x(向x轴重复)/repeat-y(向Y轴重复)
      4、背景位置:background-position:X轴(left/right/center)、Y轴(top/bottom/center或者用数值表示)
    4. 文本属性

      text-align:横向排列(left/right/center)
      line-height:文本行高(% 基于字体大小/px固定值)
      text-indent:首行缩进(% 基于父元素/px固定值,默认为0/inherit)
      letter-spacing:字符间距(normal/px固定值,可以为负值/inherit)
      word-spacing:单词间距(normal/px固定值,可以为负值/inherit)
      direction:文本方向(ltr默认/rtl(right to left));
      text-transform:文本大小写(none 默认/capitalize 每个单词首字母大写/uppercase 全部大写/lowercase 全部小写/inherit 继承
    5. 边框属性

       border-style:边框样式(none/solid 直线/dashed 虚线/dotted 点状/double 双线……)
      还可以细分为:border-top-style,border-bottom-style,border-left-style,border-right-style
      border-width:边框宽度(px固定值/thin 细/medium 中等/thick 中等/inherit 继承
      border-color:边框颜色
      还可以细分为:border-top-color,border-bottom-color,border-left-color,border-right-color
      或者同一风格:四个值(上、右、下、左)/三个值(上、左右、下)/两个值(上下、左右)
      简写方式:border:solid 2px red;样式、宽度、颜色
    6. 列表属性

      list-style-type:标记的类型(disc 默认实心圆/none/circle 空心圆/square 实心方块/decimal 数字……
      list-style-position:标记的位置(inside 标记放置在文本以内/outside,默认值,标记放置在文本以外/inherit);
      list-style-image:url();设置图像标记
      简写方式 list-style:type position url(image); image不存在时以type方式显示
      如:ol{list-style:decimal inside url('0.jpg');}
  4. DIV+CSS布局

    1. div是块级元素,span是内联元素
      margin和padding以border为界限,其中border和padding会增加盒子的宽高,margin是直接在盒子外围扩张

    2. position定位

      position定位:relative 正常定位/absolute 相对父元素定位(注意父元素的position要为relative)
      fixed 根据浏览器窗口进行定位/static 没有定位 例如:
      div{width: 100px;height: 100px;background-color: green;color: white;border:solid 1px black;margin: 10px;}
      div.d1{position:relative;left: 20px;top: 20px;}
      div.d3{position: fixed;left: 0;top: 0;}
    3. z-index 层覆盖优先级

    4. display显示属性:none/block/inline

    5. float浮动属性

    6. clear:both;浮动(当未定义浮动的元素紧挨着浮动元素的时候会受到影响,解决办法是专门定义一个清除浮动的div作为间隔)

      <style type="text/css">
      .main{width: 600px;height: 500px;border:solid 1px red;margin: 0 auto;}
      .top{height:100px;background-color: pink;}
      .left{height:100px;background-color: yellow;float: left;}
      .right{height:100px;background-color: orange;float: right;}
      .bottom{height:100px;background-color: blue;}
      .clear{clear: both;}
      </style>
      </head>
      <body>
      <div class="main">
      <div class="top">top</div>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="clear"></div>
      <div class="bottom">bottom</div>
      </div>
      </body>
    7. overflow溢出处理:hidden/scroll 无论是否超出都添加滚动条/auto 当内容溢出时添加滚动条

  5. 兼容问题及高效开发工具

    1.   测试工具:IE Tester、Multibrowser

        

        

       

  

div是块级元素,span是内联元素
margin和padding以border为界限,其中border和padding会增加盒子的宽高,margin是直接在盒子外围扩张

00_HTML入门第一天的更多相关文章

  1. JAVA入门第一季(mooc-笔记)

    笔记相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第一季 ...

  2. Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter

    前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...

  3. Asp.Net Web API 2(入门)第一课

    Asp.Net Web API 2(入门)第一课   前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...

  4. ElasticSearch入门 第一篇:Windows下安装ElasticSearch

    这是ElasticSearch 2.4 版本系列的第一篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  5. Docker 入门 第一部分: 定位和设置

    目录 Docker 入门 第一部分: 定位和设置 Docker概念 镜像和容器 容器和虚拟机 准备你的Docker环境 测试 Docker 的版本 测试 Docker 安装 回顾 总结 Docker ...

  6. leetcode 入门第一题 4ms? 8ms? Two Sum

    今天开启leetcode 入门第一题 题意很简单,就是一个数组中求取两数之和等于目标数的一对儿下标 1.暴力 n^2 两个for循环遍历 用时0.1s 开外 代码就不用写了 2.二分 nlogn 我们 ...

  7. [MVC.NET] Asp.Net MVC3 简单入门第一季

    转自:http://www.cnblogs.com/fly_dragon/archive/2011/10/12/2208042.html 初识Asp.Net MVC2.0 初识Asp.Net MVC2 ...

  8. Django入门第一步:构建一个简单的Django项目

    Django入门第一步:构建一个简单的Django项目 1.简介 Django是一个功能完备的Python Web框架,可用于构建复杂的Web应用程序.在本文中,将通过示例跳入并学习Django.您将 ...

  9. JMeter入门 | 第一个并发测试

    JMeter入门 | 第一个并发测试 背景 近期我们组新来了一些新同事,之前从来没有用过JMeter做个并发测试,于是准备了一系列小教程去指引新同事,本章主要是新人入门体验教程,快速实现第一个接口并发 ...

随机推荐

  1. squid介绍及其简单配置

    squid的简单介绍 squid的概念 squid是一种用来缓存Internet数据的软件.接受来自人们需要下载的目标(object)的请求并适当的处理这些请求.也就是说,如果一个人想下载一web界面 ...

  2. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  3. 简单的NHibernate学习笔记

    NHibernate是.NET平台下的ORM框架,与ADO.NET一样实现项目中数据库与项目系统的交互. .首先要用NHibernate框架就要有第三方的dll库来作为支持,附上百度云下载地址:(链接 ...

  4. ExecuteScalar 要求已打开且可用的 Connection。连接的当前状态为已关闭。

    本人遇到的一个小问题,希望能帮助大家 出现这个问题就是在此操作之前已经被的程序关闭了连接,比如在执行这块代码之前不幸执行了存储过程..,就会导致这个问题发生

  5. 如何解决Bluetooth系统设计的棘手问题

    我们若想设计一套完善的蓝牙 (Bluetooth) 系统,就必须充分掌握其中的技术知识,例如协议堆栈.射频设计及系统集成等方面的专门知识.LMX9820 芯片的面世令蓝牙系统的设计工作变得更为容易.以 ...

  6. spingMVC aop不生效的解决方式

    从网上搜索了一些资料,参考了下面的这个解决方案 http://blog.csdn.net/mmm333zzz/article/details/16858209

  7. [译]ASP.NET Core 2.0 路由引擎

    问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(ISe ...

  8. Linux下MongoDB安装和配置详解

    1.下载安装包 将解压到/usr/local/mongodb 文件夹下 # mkdir /usr/local/mongodb # tar zxvf mongodb-linux-x86_64-3.2.9 ...

  9. MT【267】第一次很重要

    \begin{equation*}\textbf{已知}x_1,x_2<\pi,x_{n+1}=x_n+\left\{ \begin{aligned} sin x_n &,x_n> ...

  10. C++11新特性之四——nullptr

    1. 引入nullptr的原因 引入nullptr的原因,这个要从NULL说起.对于C和C++程序员来说,一定不会对NULL感到陌生.但是C和C++中的NULL却不等价.NULL表示指针不指向任何对象 ...