前端之常用标签和CSS初识

外层div的宽度是100%，就是视口的大小，当视口被拉窄到小于内层div的宽度980px时，比如800px，此时
外层div宽度为800px，内层div宽度依然为980px，而css中只设置了外层div有背景色，所以说只有800px那一部分会显示背景色，而超出视口的部分是属于内层div的，内层没有设置背景色，所以是空白！

标准规范介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个商城</title>
    <style>	
    </style>
</head>


告诉浏览器文档使用哪种 HTML 或者 XHTML 规范。

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

lang属性规定元素内容的语言

  1. 简体中文页面：html lang=zh-cmn-Hans
  2. 繁体中文页面：html lang=zh-cmn-Hant
  3. 英语页面：html lang=en

需要了解更多请点击-->
[网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？](http://www.zhihu.com/question/20797118?utm_source=weibo&utm_medium=weibo_share&utm_content=share_question&utm_campaign=share_sidebar "网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？")

meta标签

http-equiv = "X-UA-Compatible"这个是IE8专有的设置

优先使用IE最高版本渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

页面关键词 keywords

<meta name="keywords" content="your keywords">

页面描述内容 description

<meta name="description" content="your description">

定义网页作者 author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式

robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
<meta name="robots" content="index,follow">

标签分类

    - 自闭合标签
        <meta charset="UTF-8">
    - 主动闭合标签
        title>老男孩</title>

常用标签

  •  空格
  • &gt 大于
  • &lt 小于
  • p标签 段落
  • br 换行

所有标签分为：

   块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
   行内标签： span（白板）

标签存在的意义，css操作，js操作

input系列 + form标签

input type='text'     - name属性，value="你好" 
input type='password' - name属性，value="你好" 
input type='submit'   - value='提交' 提交按钮，表单
input type='button'   - value='登录' 按钮

input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest'     - 重置

name 和value是一对 提交到server端，用来调用， value还可以做默认值，比如type='text'

<textarea >默认值</textarea>  - name属性

select标签

- name,内部option value, 提交到后台，size，multiple
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
</select>

又来一波常用标签

a标签

- 跳转
- 锚     href='#某个标签的ID'    标签的ID不允许重复

img

src
alt
title

列表

ul
    li
ol
    li
dl
    dt
    dd

表格

table
    thead
        tr
            th
    tbody
        tr
            td
colspan = '' //列
rowspan = '' //行

label

用于点击文件，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

fieldset

legend

css

在标签上设置style属性：

background-color: #2459a2;
height: 48px;
...

编写css样式

  1. 标签的style属性

  2. 写在head里面 style标签中写样式

     - id选择区
   #i1{
     background-color: #2459a2;
     height: 48px;
   }
   
 - class选择器 ******
 
   .名称{
     ...
   }
   
   <标签 class='名称'> </标签>

 - 标签选择器
     div{
         ...
     }
     
     
     所有div设置上此样式

 - 层级选择器（空格） ******
 .c1 .c2 div{
         
    }
 - 组合选择器（逗号） ******
     #c1,.c2,div{
         
    }

 - 属性选择器 ******
    对选择到的标签再通过属性再进行一次筛选
    .c1[n='alex']{ width:100px; height:200px; }

优先级，标签上style优先，编写顺序，就近原则

css样式也可以写在单独文件中

<link rel="stylesheet" href="commons.css" />

注释

/*   */

边框

宽度，样式，颜色  (border: 4px dotted red;)
- border-left

高度和字体颜色

height， 高度 百分比
width，  宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、     字体颜色
font-size、 字体大小
font-weight 字体加粗

float

让标签浪起来，块级标签也可以堆叠
老子管不住：
    <div style="clear: both;"></div>

display

display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
         具有inline,默认自己有多少占多少
         具有block，可以设置无法设置高度，宽度，padding  margin
******
行内标签：无法设置高度，宽度，padding  margin
块级标签：设置高度，宽度，padding  margin


	padding  margin(0,auto)
posted @ 2016-11-09 18:06  Dus  阅读(434)  评论(0)  编辑  收藏  举报