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）的更多相关文章

html+css快速入门教程（5）
练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...
html+css快速入门教程（4）
练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...
html+css快速入门教程（3）
练习: 1.画盒子 2.相框 5 基础选择器 5.1 id选择器 ID选择器与类选择器的定义与引用方式类似,只是定义的符号不一样.ID通常表示唯一值,因此,ID选择器在CSS 中通常只出现一次.如果出 ...
html+css快速入门教程（6）
9 综合实例仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...
html+css快速入门教程（1）
1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...
laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
专为设计师而写的GitHub快速入门教程
专为设计师而写的GitHub快速入门教程来源: 伯乐在线作者:Kevin Li 原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...
EntityFramework6 快速入门教程
EntityFramework6 快速入门教程不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...
Apple Watch开发快速入门教程
Apple Watch开发快速入门教程试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

随机推荐

webpack+vue2.0项目（一） vue-cli脚手架
很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!! 下载的项目包括, ...
Java实现 LeetCode 833 字符串中的查找与替换（暴力模拟）
833. 字符串中的查找与替换对于某些字符串 S,我们将执行一些替换操作,用新的字母组替换原有的字母组(不一定大小相同). 每个替换操作具有 3 个参数:起始索引 i,源字 x 和目标字 y.规则是 ...
Java实现洛谷多项式输出
题目描述一元nn次多项式可用如下的表达式表示: 其中,a_ix^ia i x i 称为ii次项,a_ia i 称为ii次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求 ...
Java实现 LeetCode 643 子数组最大平均数 I（滑动窗口）
643. 子数组最大平均数 I 给定 n 个整数,找出平均数最大且长度为 k 的连续子数组,并输出该最大平均数. 示例 1: 输入: [1,12,-5,-6,50,3], k = 4 输出: 12.7 ...
Java实现 LeetCode 189 旋转数组
189. 旋转数组给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] ...
java实现和为定值的两个数
1 问题描述输入一个整数数组和一个整数,在数组中查找两个数,满足他们的和正好是输入的那个整数.如果有多对数的和等于输入的整数,输出任意一对即可.例如,如果输入数组[1,2,4,5,7,11,15]和 ...
Java实现第八届蓝桥杯字母组串
字母组串由 A,B,C 这3个字母就可以组成许多串. 比如:"A","AB","ABC","ABA","AA ...
Java 8 新特性——检视阅读
Java 8 新特性--检视阅读参考 Java 8 新特性--菜鸟 Oracle 公司于 2014 年 3 月 18 日发布 Java 8 ,它支持函数式编程,新的 JavaScript 引擎,新的 ...
使用Java将阿拉伯数字转换为中文数字（适配小数转换）
Java数字转换工具类简介该工具类可以将整数.小数.负数转换为中文的数字,如: 0 --> 零 1 --> 一 2.1 --> 二点一 -2.1 --> 负二点一具体代码 ...
Python内存管理机制-《源码解析》
Python内存管理机制 Python 内存管理分层架构 /* An object allocator for Python. Here is an introduction to the layer ...

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