外层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)

前端之常用标签和CSS初识的更多相关文章

  1. 前端 HTML 常用标签 head标签相关内容

    HTML常用标签 head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方 ...

  2. HTML常用标签与CSS基础知识

    一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  3. 前端 HTML 常用标签 head标签相关内容 link标签

    link标签 引入CSS样式文件 href="./index.css" CSS文件的路径 <!-- 引入CSS样式文件 --> <link rel="s ...

  4. 前端 HTML 常用标签 head标签相关内容 style标签 定义内部样式表

    styple标签 <!-- 定义内部样式表 --> <style type="text/css"></style>

  5. 前端 HTML 常用标签 head标签相关内容 meta标签

    meta标签 Meta标签介绍: <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词. <meta>标签位于文档的 ...

  6. Web前端——Html常用标签及属性

    html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan ...

  7. 前端 HTML 常用标签 head标签相关内容 script标签

    script标签 定义JavaScript代码 <!--定义JavaScript代码--> <script type="text/javascript"> ...

  8. 前端 HTML 常用标签 head标签相关内容 title标签 网页的标题信息

    title标签 <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中. 可以把它看成是一个网页 ...

  9. 运用html常用标签和css定位等学做模仿百度导航页面

    导航部分文字链接,鼠标触碰变颜色,除百度logo引用图片外,其它均代码编写.注释部分是一开始用的百度一下截图做的按钮,后来用div填充颜色写了一个按钮.效果图如下. HTML代码如下: <!DO ...

随机推荐

  1. Eclipse查看hadoop源代码出现Source not found,是因为没有添加.zip

    在我们hadoop编程中,经常遇到像看看hadoop的某个类中函数的功能.但是我们会遇到一种情况就是Source not found.遇到这个问题,该如何解决.因为我们已经引入了包,为什么会找不到.如 ...

  2. Bindless Textures

    http://shikihuiku.wordpress.com/2014/02/10/openglのtextureについて/

  3. ecshop 订单-》设置默认收货地址,或者删除

    设置位置:ecs_users标的   country字段,默认是0,默认地址是 users_address 的address_id 设置默认收货地址 /** * 设置默认地址 * * @access ...

  4. MSSQL数据库索引的应用

    一.索引的概念 索引就是加快检索表中数据的方法.数据库的索引类似于书籍的索引.在书籍中,索引允许用户不必翻阅完整个书就能迅速地找到所需要的信息.在数据库中,索引也允许数据库程序迅速地找到表中的数据,而 ...

  5. VS2015 推荐插件

    VS2015 推荐插件 //////////////////////////////////////////////////////////////////////////////////////// ...

  6. MongoDB学习笔记(索引)(转)

    一.索引基础:    MongoDB的索引几乎与传统的关系型数据库一模一样,这其中也包括一些基本的优化技巧.下面是创建索引的命令:    > db.test.ensureIndex({" ...

  7. org.apache.commons.lang.StringUtils中常用的方法

    org.apache.commons.lang.StringUtils中常用的方法,这里主要列举String中没有,且比较有用的方法: 1. 检查字符串是否为空: static boolean isB ...

  8. css使 同一行内的 文字和图片 垂直居中对齐?

    设置父容器, 使 父容器 div 下的所有元素 都 垂直对齐: father-container *{ vertical-align:middle 找回密码

  9. JavaScript日期集合(今日,昨日,本周一,周末 ,月初,月末)

    闲聊:新年第一天上班,看着自己15年年底写的代码,真心觉得很烂,因为年底没时间去写,一想着做后台管理需要获取一周的开始和结束日期,就慌了,项目赶着测试呢,还有好多事情未做,就直接抄袭了网上的一段错误代 ...

  10. 在windows7 上安装 Sublime Text 3 及其插件

    1.下载地址:http://www.sublimetext.com/3 请根据你的平台,选择适当的安装版本 安装完毕后,设定TAB键为4个空格( Preferences——>Setings-Us ...