***定义字符编码：一般为UTF-8（年国际通用编码）

***响应式界面：可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局，可以兼容多个终端。

在webstorm中给代码加注释：ctrl+shift+/

***img 标签：单标签。

<img src="17.JPG" alt="xiezheng" width="1000px "/>

1.src：图片路径
  2.alt：图片名称，描述或摘要。①鼠标放上去有提示②图片未加载出现文字代替
  3.width,height：图片大小。①对有形状的图片尽量只给一个尺寸，另一个自动变（防止变形）②可以以百分比来确定
***a标签：超链接-实现一个页面到另一个页面的跳转
<a href="http://www.baidu.com" target="_blank">百度</a>

1.href：跳转的目标地址

2.target：目标窗口（-blank：在新窗口中打开 -parent：在原窗口中打开 不写默认原窗口）

3.标签中间写提示文字

***表单：

<form action="#"method="get" ></form>

1.form中间内容作为一个整体提交

2.action:提交的目标地址

3.method：提交方式（get/post）不写默认get。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。get仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据。POST表示可能修改服务器上的资源的请求。GET请求的数据会附在URL之后，POST把提交的数据则放置在是HTTP包的包体中。（详解见hyddd博客）

***表单元素：p*6可以出现6个p标签

<form action="">
<p>用户名：<input type="text"/></p> 文本框
<p>密码：<input type="password"/></p>  密码框
<p>性别：<input type="radio" name="sex"/>男  单选框
    <input type="radio" name="sex" checked/>女</p>  默认选框
<p>爱好：<input type="checkbox"/>吉他  复选框
    <input type="checkbox"/>游泳
    <input type="checkbox"/>轮滑</p>
<p> 其他：<textarea name="" id="" cols="30" rows="10"></textarea></p>  多行文本框
<p><input type="submit"  value="提交"/> <input type="reset" value="重置"/></p>  按钮
    <p>时间：<select name="" id="">  
        <option value="">2007</option>
        <option value="">2008</option>
        <option value="">2009</option>
   </select></p>  下拉选框

</p> 照片:<input type="file"/></p>  文件域
</form>

***换行标签：<br>      分隔线标签：<hr>

***css样式：

<title></title>
    <style>
        p{color:yellow}  ②页面内样式

        @import url(css.css);  ③导入式
    </style>
    <link rel="stylesheet" href="css.css"/> ④ 链接式
</head>
<body>
<p style="color:green">cssssss</p>①行内样式：优先级最高
<p>sun</p>
<p>night</p>

***选择器：

<style>
   p{color:red}   ①标签选择器
    .xx{color:green;}        ②类选择器
        #xxj{color:yellow;}          ③ id选择器
    </style>
</head>
<body>
<p>ffff</p>
<p class="xx">sun</p>
<p id="xxj">night</p>

④伪类选择器（超链接设置）

<style>
       a{color:black}      代表四种状态
        /*a:link{color:red}*/    访问前
        a:hover{color:green}    鼠标悬停
        a:active{color:yellow}      点击激活
        a:visited{color:darkgrey}      访问后
    </style>
</head>
<body>
<a href="#">日月星辰</a>

⑤后代选择器：见下文无序列表后

background:url("../image/bg.gif")

***背景：url（地址）

repeat-x: 水平重复          left:水平左对齐

repeat-y: 垂直重复          bottom:垂直下对齐

no_repeat: 不重复

***<1>：倾斜<em>：倾斜     <b>：加粗

***去掉下划线：text-decoration:none

去掉下划线：text-decoration:underline

***三种列表：

<ul type="square">  --无序列表:Type属性值：
<li>sun</li>                  circle：空心圆                   disc： 圆点
 <li>sun</li>               square： 正方形
 <li>sun</li>                默认状态：disc： 圆点

</ul>

<ol type="a" start="3">       --有序列表-->

<li>hello </li>             --type="编号样式" start="编号起始值"
<li>hello </li>
    <li>hello </li></ol>

Type属性：
      1 阿拉伯数字
      a 英文小写
      A 英文大写
      i 罗马小写数字
      I 罗马大写数字

<dl>                       --自定义列表
    <dt>毛猪</dt>          一对：作解释
    <dd>洋娃娃</dd>
</dl>

后代选择器：
.news li{
    line-height: 30px;  /*行高*/
    list-style: none;    /*去除列表默认的点*/
    text-indent: 12px;      /*首行缩进*/
    border-bottom:dashed 1px #aaa;

***同页面跳转：

hello<a name="bottom"></a>    单击返回顶部跳转到hello

<p><a href="#bottom">返回顶部</a></p>

<a href="#di">news</a>    单击news跳转到di所在处

<a name="di"></a>

***表格：

<body>
<table border="2" width="30px" cellspacing="0" cellpadding="50px">
    <thead>
<tr>
    <th>rr</th>

<th>rr</th>    标题写在thead标签中，标题行用<th>

<th>rr</th></tr></thead>
    <tr>
        <td colspan="3">rr</td></tr>  合并列
</table>

***div：

div{
    width:900px;
    height:500px;
    background:#E9FBFF url(../images/img1.jpg) no-repeat right bottom;
    margin:100px auto;    边距（四边）
    border:double 8px red;   
    color:purple;
    padding:10px;       填充（四边）

一个：padding-left

两个：上下   左右

三个：上    左右     下

四个：上    右      下     左

Word-spacing：词与词间距

Letter-spacing：字母或汉字间距

position:absolute:绝对定位:参考点：浏览器左上角

relative：相对定位：参考点：它的父元素（有定位的父元素）

溢出隐藏：overflow:hidden

清空浮动：给空的div调用样式——clear:both

html&css基础知识的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  4. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. Web学习篇之---css基础知识（一）

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

  9. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  10. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

随机推荐

  1. 11.12模拟考T1（可持续优化）PS：神奇的东西

    1．数列操作   (array.pas/c/cpp) [问题描述] 现在有一个数列,最初包含0个数.现在要对数列操作n次,操作有3类. 1) a k,在数列的最后插入一个整数k 2) s 将最近插入的 ...

  2. 使用 Fluent API 配置/映射属性和类型(摘自微软Data Access and Storage)

    使用 Fluent API 配置/映射属性和类型 使用实体框架 Code First 时,默认行为是使用一组 EF 中内嵌的约定将 POCO 类映射到表.但是,有时您无法或不想遵守这些约定,需要将实体 ...

  3. php $_SERVER中的SERVER_NAME 和HTTP_HOST的区别

    关于这个问题,搜索引擎上搜到一大片的文章,有很多问题,在这找到一篇正确的说法:http://mimiz.cn/index.php/php/php-http_host-server_name-diffe ...

  4. “System.Data.SqlClient.SqlConnection”的类型初始值设定项引发异常---解决方案

    "System.Data.SqlClient.SqlConnection"的类型初始值设定项引发异常 问题出在了 .net 的C:\WINDOWS\Microsoft.NET\Fr ...

  5. 关于python如何简单跳出多层循环

    上述代码的逻辑是,在跳出子循环之前定义一个变量flag为Ture,第一层循环跳出之后,如果要跳出第二个循环,直接调用变量flag,可以直接跳出第二层循环.这里要注意的是缩进,不然会出错误. 如果是多层 ...

  6. Unity进阶技巧 - 动态创建UGUI

    前言 项目中有功能需要在代码中动态创建UGUI对象,但是在网上搜索了很久都没有找到类似的教程,最后终于在官方文档中找到了方法,趁着记忆犹新,写下动态创建UGUI的方法,供需要的朋友参考 你将学到什么? ...

  7. iScroll知识点

    1.如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll.最好给浏览器100或者200毫秒的间隙再去初始化iScroll. 2.iScroll作用于滚动区域的外 ...

  8. cPage分页，asp.net自定义分页，url传值分页，支持datalist、gridview、Repeater等

    asp.net分页是最最常用的功能,实现方式也很多,使用不同的控件有不同的分页方式. 下面分享一个我们团队内部使用了多年的一个分页控件cPage,是自己设计编写,没有冗余,简单.快速. cPage,现 ...

  9. linux eclipse c++

    几年前使用过eclipse c++,最近两年没有怎么使用.其中细节,忘的差不多了.最近费很大劲,总算找了回来.真是好记性,不如烂笔头啊! 现在将使用过程中的一些细节,总结如下: 1.安装eclipse ...

  10. Turn off Debug Logging in Quartz .Net

    Quartz.net uses Common.Logging, so something like this in your App.config/Web.config: <configSect ...