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

随机推荐

jchdl - RTL实例 - Counter4
https://mp.weixin.qq.com/s/xtvMj5f-Uvx3vesVnH0P_A 计数器. 参考链接 https://github.com/wjcdx/jchdl/blob/ ...
Nginx 笔记（四）nginx 原理与优化参数配置与 nginx 搭建高可用集群
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.nginx 原理与优化参数配置 master-workers 的机制的好处首先,对于每个 ...
Java实现 LeetCode 503 下一个更大元素 II
503. 下一个更大元素 II 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大 ...
Java实现DFS深度优先查找
1 问题描述深度优先查找(depth-first search,DFS)可以从任意顶点开始访问图的顶点,然后把该顶点标记为已访问.在每次迭代的时候,该算法紧接着处理与当前顶点邻接的未访问顶点.这个过 ...
（八）DVWA之SQL Injection--SQLMap&Burp测试（Medium）
一.测试需求分析测试对象:DVWA漏洞系统--SQL Injection模块--User ID提交功能防御等级:Medium 测试目标:判断被测模块是否存在SQL注入漏洞,漏洞是否可利用,若可以则 ...
python自学Day07（自学书籍python编程从入门到实践）
第8章函数函数是带名字的代码块,用于完成具体的工作. 学习定义函数,向函数传递信息. 学习如何编写主要任务是显示信息的函数,还有用于处理数据并返回一个或一组值得函数. 学习如何将函数存储在被称为模 ...
.NET Core技术研究系列-索引篇
随着.NET Core相关技术研究的深入,现在将这一系列的文章,整理到一个索引页中,方便大家翻阅查找,同时,后续也会不断补充进来. .NET Core技术研究-WebApi迁移ASP.NET Core ...
CentOS7 yum 安装配置 MySQL 5.7
1.配置yum源 # 下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm # 安装 ...
STM32的8*8点阵屏开发（小项目）
基础认识实现效果项目实现STM32点阵屏的操作,自动更改显示内容和串口控制显示内容 STM32上电后: 1) 程序将进行行和列的刷新 2) 自动递增显示0-9变化 3) 进行矩形由内向 ...
前端技术 - SeaJS学习
SeaJS 是一个模块加载器,模块加载器需要实现两个基本功能: 实现模块定义规范,这是模块系统的基础. 模块系统的启动与运行. define参数在 CMD 规范中,一个模块就是一个文件.代码的书写格 ...

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