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 ...

随机推荐

Java实现 LeetCode 673 最长递增子序列的个数（递推）
673. 最长递增子序列的个数给定一个未排序的整数数组,找到最长递增子序列的个数. 示例 1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列,分别是 [1, 3, 4, ...
Java实现蓝桥杯VIP 算法训练完数
问题描述一个数如果恰好等于它的因子之和,这个数就称为"完数".例如,6的因子为1.2.3,而6＝1+2+3,因此6就是"完数".又如,28的因子为1.2.4. ...
Java实现蓝桥杯VIP 算法提高计算器
算法提高计算器时间限制:1.0s 内存限制:256.0MB [问题描述] 王小二的计算器上面的LED显示屏坏掉了,于是他找到了在计算器维修与应用系学习的你来为他修计算器. 屏幕上可以显示0~9的数 ...
java实现第五届蓝桥杯殖民地
殖民地带着殖民扩张的野心,Pear和他的星际舰队登上X星球的某平原.为了评估这块土地的潜在价值,Pear把它划分成了M*N格,每个格子上用一个整数(可正可负)表示它的价值. Pear要做的事很简单- ...
java实现第四届蓝桥杯带分数
带分数题目描述 100 可以表示为带分数的形式:100 = 3 + 69258 / 714 还可以表示为:100 = 82 + 3546 / 197 注意特征:带分数中,数字1~9分别出现且只出现一 ...
从linux源码看socket的阻塞和非阻塞
从linux源码看socket的阻塞和非阻塞笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 大部分高性能网络框架采用的是非阻塞模式.笔者这次就从linux ...
【JAVA习题十九】利用递归方法求5!。
package erase; public class 用递归法求5的阶乘 { public static void main(String[] args) { // TODO Auto-genera ...
彻底搞懂 etcd 系列文章（二）：etcd 的多种安装姿势
0 专辑概述 etcd 是云原生架构中重要的基础组件,由 CNCF 孵化托管.etcd 在微服务和 Kubernates 集群中不仅可以作为服务注册与发现,还可以作为 key-value 存储的中间件 ...
DML_Data Modification_INSERT
Data Modification (INSERT.DELETE.UPDATE.MERGE)之INSERT(基础知识,算是20年来第2次学习MSSQL吧,2005年折腾过一段时间的Oracle)INS ...
关于Attach *.mdf数据库联想到的备份
要求: 将SQL2008R2的*.mdf ( 当时内部版本不详,此时无挂接在MSSQL服务器上的数据库,只有*.mdf文件 ) --->>> SQL2008R2中,附加到现有SQL2 ...

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