3 标签

3.1 div

div 标签表示一个区块或者区域，你可以把它看成是一个容器，比如说一个 竹篮

作用：用来把网页分块 并且里面可以装任意的html元素

<div>这里是一个div容器</div>

3.2 span

span：可以表示一个小区块，比如一些文字，span和div的不同就是 span能够在一行内显示 而 div独占一行

<span>一周热门排行榜</span>

3.3 h1-h6

h1 到 h6 这6个标签表示 6级标题，表现出来的效果就是 从h1开始 文字大小 逐渐变小

<h1>创于心，兑于行</h1>

<h2>创于心，兑于行</h2>

<h3>创于心，兑于行</h3>

<h4>创于心，兑于行</h4>

<h5>创于心，兑于行</h5>

<h6>创于心，兑于行</h6>

3.4 p

p标签是段落标签，通常用来装一整段文字,在一篇文章中常用

<p>

新华社北京2月6日电 中共中央总书记、国家主席、中央军委主席、中央全面深化改革领导小组组长2月6日上午主持召开中央全面深化改革领导小组第三十二次会议并发表重要讲话。他强调，党政主要负责同志是抓改革的关键，要把改革放在更加突出位置来抓，不仅亲自抓、带头干，还要勇于挑最重的担子、啃最硬的骨头，做到重要改革亲自部署、重大方案亲自把关、关键环节亲自协调、落实情况亲自督察，扑下身子，狠抓落实。

</p>

3.5 ul li

ul 为无序列表标签 li为里面的每个列表项目,这个标签非常实用，例如：各种菜单、各种新闻排行 都可以用无序列表来实现

<h1>奇葩新闻</h1>

<ul>

    <li>三人花20万人民币造出17万假币。</li>

    <li>英国马拉松仅一人完成比赛，第二名带着五千人跑错路。</li>

    <li>在曹操墓发现一具小孩尸骨，砖家说是小时候的曹操!!</li>

    </li>女子为吓男友报警称其是逃犯，警方调查后发现真的是逃犯</li>

</ul>

3.8 i em strong hr br

i、em 标签表示斜体 strong标签表示加粗 hr表示一根水平分割线 br表示换行

<i>床前明月光</i>

<em>床前明月光</em>

<strong>床前明月光</strong>

<hr>

<p>床前明<br>月光</p>

3.9 img

img 标签表示图像 可以引入一张图片

<img src='img/1.png' >

相对路径和绝对路径 img标签有个src的属性 后面给图片的地址，可以是网络地址也可以是本地地址，如果是本地路径的话，就要区分是相对路径还是绝对路径

绝对路径：在硬盘上的具体位置  例如：E:\www\html\google.png

相对路径： 相对于当前的html文件来说 图片的具体位置 可以分几种情况讨论

1、如果图片在html文件的上级 用  ../ 表示  如果上很多级  就用多少个 ../

2、如果图片在html文件的下一级  就根据文件夹 一层一层的找

 例如： html同级的文件夹img下有google.png的图片 ，写成 ./img/google.png

   ./ 表示同级

3、如果是同级  就用 ./表示    或者直接写 图片名字   如： google.png


<img  src='./google.png' >  同级

<img src='./img/google.png' > 下一级

<img src='../img/google.png' >  上一级

alt 属性和 title属性

<img src='./google.png'  alt='谷歌搜索'>

alt表示当图片没有被正确加载的时候显示的文字

<img src='./google.png'  title='谷歌搜索' >

 title 表示当鼠标移动到图片的时候显示的文字

3.10 a

a标签表示超链接

<a href='http://www.baidu.com'>百度一下</a>

target属性 值__blank 如果加上这个属性 每次点击的时候 会新开一个浏览器标签页来显示链接的内容

<a  href='http://www.baidu.com' target="__blank">百度一下</a>

4 CSS简介

4.1 CSS 是什么，CSS 用来干嘛

CSS（Cascading Style Sheet，可以译为“层叠样式表”或“级联样式表”），是一组格式设置规则，用于控制web页面的外观。

4.2 如何让一个标签具有样式

第一步，必须保证引入方式正确 第二步，必须让css和html元素产生关联，也就是说得先找到这个元素 第三步，用相应的css属性去修改html元素的样式

4.3 css的3种引入形式

4.3.1 将css内嵌到HTML文件中,这种方式写的CSS又叫内联样式表,例如：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style type="text/css">

			#box{

				width: 100px;

				height: 100px;

				background: red;

			}

		</style>

	</head>

	<body>

		<div id="box"></div>

	</body>

</html>

4.3.2 将一个外部样式链接到HTML文件中这种方式书写的CSS又叫链接样式表，例如：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<link rel="stylesheet" type="text/css" href="index.css"/>

	</head>

	<body>

		<div id="box"></div>

	</body>

</html>

4.3.3 将样式表加入到HTML文件中，这种方式写入的css样式又叫行内样式表

<h1>css 样式测试</h1>

<div style="width:200px;height:200px;background:red;"></div>

总结：css的基本语法 CSS语法由三个基本部分构成：选择符（Selector）、属性（Properties）和属性的取值（Value） 格式：Selector｛Properties:Value｝(选择符｛属性：值｝)

 #box{

    width:100px;

    height:100px;

    border:red solid 1px;

}

螺钉课堂视频课程地址：http://edu.nodeing.com

html+css快速入门教程（2）的更多相关文章

  1. html+css快速入门教程（5）

    练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...

  2. html+css快速入门教程（4）

    练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型 网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...

  3. html+css快速入门教程（3）

    练习: 1.画盒子 2.相框 5 基础选择器 5.1 id选择器 ID选择器与类选择器的定义与引用方式类似,只是定义的符号不一样.ID通常表示唯一值,因此,ID选择器在CSS 中通常只出现一次.如果出 ...

  4. html+css快速入门教程（6）

    9 综合实例 仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...

  5. html+css快速入门教程（1）

    1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...

  6. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  7. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  8. EntityFramework6 快速入门教程

    EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...

  9. Apple Watch开发快速入门教程

     Apple Watch开发快速入门教程  试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

随机推荐

  1. jchdl - GSL实例：HalfAdder

    https://mp.weixin.qq.com/s/Y97bIro7UlPPFCoPlzgmOQ 半加器电路是指对两个输入相加,输出一个结果位和,没有进位输入的电路. 是实现两个一位二进制数的加法运 ...

  2. Rocket - decode - Term

    https://mp.weixin.qq.com/s/CbBWdTlc_DESlUzd8KFcSg   介绍Term类各方法的实现.     ​​   1. prime   表示一个项是否是质项,即这 ...

  3. ASP.NET中IHttpHandler与IHttpModule的区别（带样例说明）

    IHttpModule相对来说,是一个网页的添加 IHttpHandler相对来说,却是网页的替换 先建一个HandlerDemo的类 using System; using System.Colle ...

  4. Java 第十一届 蓝桥杯 省模拟赛 小明植树（DFS）

    小明植树 题目 问题描述 小明和朋友们一起去郊外植树,他们带了一些在自己实验室精心研究出的小树苗. 小明和朋友们一共有 n 个人,他们经过精心挑选,在一块空地上每个人挑选了一个适合植树的位置,总共 n ...

  5. Java实现 LeetCode 680 验证回文字符串 Ⅱ（暴力）

    680. 验证回文字符串 Ⅱ 给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: " ...

  6. Java实现 LeetCode 58 最后一个单词的长度

    58. 最后一个单词的长度 给定一个仅包含大小写字母和空格 ' ' 的字符串 s,返回其最后一个单词的长度. 如果字符串从左向右滚动显示,那么最后一个单词就是最后出现的单词. 如果不存在最后一个单词, ...

  7. java中ThreadLocal类的详细介绍（详解）

    ThreadLocal简介 变量值的共享可以使用public static的形式,所有线程都使用同一个变量,如果想实现每一个线程都有自己的共享变量该如何实现呢?JDK中的ThreadLocal类正是为 ...

  8. Java实现LeetCode_0013_RomanToInteger

    package javaLeetCode.primary; import java.util.HashMap; import java.util.Map; import java.util.Scann ...

  9. 曹工说JDK源码（3）--ConcurrentHashMap，Hash算法优化、位运算揭秘

    hashcode,有点讲究 什么是好的hashcode,一般来说,一个hashcode,一般用int来表示,32位. 下面两个hashcode,大家觉得怎么样? 0111 1111 1111 1111 ...

  10. 局域网访问电脑中VMware虚拟机

    场景 你在自己的台式机或笔记本中使用VMware Workstation搭建了一个虚拟机系统,如Debian.Fedora等Linux系统.现在你希望使用局域网中另一台电脑访问你电脑上的虚拟机系统,怎 ...