外层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. Java Web之Servlet

    Servlet参考文献: 1.http://www.cnblogs.com/luoxn28/p/5460073.html 2.http://www.cnblogs.com/xdp-gacl/p/376 ...

  2. win10系统点击关机按钮后无法关机的解决办法

    先吐槽下:我越发的发现我现在成了修电脑的了,我的职位是linux运维,现在干的活很蛋疼,公司只有我一个运维,修电脑.搞网络.抬服务器.弄监控,搭环境.搞自动化发布.弄虚拟化都我一个人哇.好了,打住. ...

  3. swiper超出部分出现滚动条

    html代码 <div class="wrap swiper-container"> <div class="swiper-wrapper"& ...

  4. 缺少索引导致的服务器和MYSQL故障。

    故障现象: 网站访问缓慢. 数据库RDS: CPU满,连接数满,其他值都是空闲. apache服务器:CPU正常,IO正常,流量报警,内存爆满. 解决思路: 一.没遇到过此情况,一脸懵逼. 二.请教大 ...

  5. StringUtils

    StringUtils.hasText(字符串) 如果字符串里面的值为null, "", "   ",那么返回值为false:否则为true

  6. 解决label点击事件触发两次问题

    问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...

  7. nanosleep() -- 更精确的延迟 -----一个使用用例

    [常规] nanosleep() -- 更精确的延迟 [复制链接]     beyes 4220 主题 5152 帖子 3万 积分 GROAD 曲径通幽,安觅芳踪. 积分 30607 发消息 电梯直达 ...

  8. Linux下的文件及文件后缀名

    Linux下的文件及文件后缀名 2013-03-14 15:34 6969人阅读 评论(0) 收藏 举报 ++++++++++++++++++++++++++++++++++++++正文+++++++ ...

  9. windows下vmware10.0 安装centos7

    centos7.0-1506, 1511, 是指2015年, 06月份, 11月份. 这是rhel ubuntu发布新版本的时间. centos7.0 只提供了64位的系统下载: x86_64: we ...

  10. Apache ab参数--压力测试

    Apache附带的ab,它非常容易使用,ab可以直接在Web服务器本地发起测试请求.这至关重要,因为我们希望测试的服务器的处理时间,而不包含数据的网络传输时间以及用户PC本地的计算时间. 需要清楚的是 ...