HTML学习笔记——块级标签、行级标签、图片标签
1>块级标签、行级标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
width: 200px;
height: 100px;
border: 3px solid red;
} p span{
color: red;
}
</style>
</head> <body> <p>今天是<span>星期一</span></p> <!-- 块级标签/能设置宽高度 -->
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p> <!-- 行级标签/能和其他标签待在一行 -->
<span>我是span标签</span>
<span>我是span标签</span> <a href="">百度</a>
<a href="">百度</a> </body>
</html>
2>图片标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#dog{
width:300;
height: 400px;
} #cat{
width:300;
height: 400px;
} p{
color: blue;
font-size: 30px;
font-family: 微软雅黑；
width: 800px;
height: 200px;
border: 3px solid blue;
text-align:center;
line-height: 200px;
}
</style>
</head> <body> <img src="dog.jpg" id="dog" />
<img src="cat.jpg" id="cat" /> <p>今天是星期一</p>
</body>
</html>
HTML学习笔记——块级标签、行级标签、图片标签的更多相关文章
- 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- HTML块级、行级元素，特殊字符，嵌套规则
如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽 ...
- ARMV8 datasheet学习笔记3：AArch64应用级体系结构
1.前言 本文主要从应用的角度介绍ARMV8的编程模型和存储模型 2. AArch64应用级编程模型 从应用的角度看到的ARM处理器元素: 可见的元素(寄存器/指令) 说明 可见的寄存器 R0-R30 ...
- python3.4学习笔记(五) IDLE显示行号问题，插件安装和其他开发工具介绍
python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍 IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.pycharm免费社区版.Su ...
- amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
- 基础学习笔记之opencv(6)：实现将图片生成视频
基础学习笔记之opencv(6):实现将图片生成视频 在做实验的过程中.难免会读视频中的图片用来处理,相反将处理好的图片又整理输出为一个视频文件也是非经常常使用的. 以下就来讲讲基于opencv的C+ ...
- Flutter学习笔记（19）--加载本地图片
如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...
- HTML学习二_HTML常用的行级标签，常用实体字符及表单标签
HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...
随机推荐
- git flow的使用
简介 Gitflow工作流程围绕项目发布定义了严格的分支模型.尽管它比Feature Branch Workflow更复杂一些,但它也为管理更大规模的项目提供了坚实的框架. 与Feature Bran ...
- canvas模拟重力效果
总结 速度和加速度是动画的基础元素,其中两者都是向量,包括了一个重要因素:方向. 要学会应用 分解 和 合成 ,将速度或加速度分解到x.y轴上,然后将每条轴上的加速度或速度相加,然后再分别与物体的位置 ...
- Ubuntu 14.04 安装 JDK 8，ubuntu14.04
第一步,下载Linux版JDK 可以通过访问Oracle官网下载,或者直接通过命令行下载. lxh@ubuntu:~$ wget -c http://download.oracle.com/otn-p ...
- Web的结构组件
HTTP代理服务器的作用 Web安全,应用集成,性能优化 1. 代理 In computer networks, a proxy server is a server (a computer syst ...
- ios 图片点击两次禁止保存或拷贝
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止: img { -webkit-touch-callo ...
- 【CodeForces 699D】Fix a Tree
dfs找出联通块个数cnt,当形成环时,令指向已访问过节点的节点变成指向-1,即做一个标记.把它作为该联通图的根. 把所有联通的图变成一颗树,如果存在指向自己的点,那么它所在的联通块就是一个树(n-1 ...
- Spark 与 MapReduce的区别
学习参考自 http://spark-internals.books.yourtion.com/markdown/4-shuffleDetails.html 1. Shuffle read 边 fe ...
- Nginx research, nginx module development
catalog . 初探nginx架构 . handler模块 . Nginx编译.安装.配置 . Hello World模块开发 1. 初探nginx架构 nginx在启动后,在unix系统中会以d ...
- 关于 android 开发中 debug不能顺利进行的各种问题的总结
最后一条应该写反了,如果combined hover 取消勾选的话 那么 在写代码时候的悬浮提示就没有了
- PriorityQueue
基本概念 顾名思义,PriorityQueue是优先级队列,它首先实现了队列接口(Queue),与LinkedList类似,它的队列长度也没有限制,与一般队列的区别是,它有优先级的概念,每个元素都有优 ...