一、HTML块元素

1、块级元素 Block level element ，内联元素 inline element ， HTML<div>元素属于块级元素，他是组合其他HTML元素的容器，当与CSS一同使用<div>元素用于对大内容块设置样式属性。<div>用于文档布局，

2、HTML  <span> 元素是内联元素，用于文本的容器，设置<div>元素的类，能够为相同的<div>元素设置相同的类

<!DOCTYPE html>
<html>
<head>
<style>
.cities{
background-color:green;
color:black;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital ciry of England.<br/>
 It is the most populous city in the United Kingdom<br/>
with a metropolitan qrea of over 13 million inhabitants<br/>
</p>
</div>
</html>

3、分行内元素， HTML<span>元素是行内元素，能够作用域文本容器， 设置<span>元素的类，能够为相同的<span>隐患苏设置相同的样式。

<!DOCTYPE html >

<html><head><style> span.red{color:red;}   </style></head><body>

<h1> my <span class="red">Important</span>Heading</h1>

4、使用<div>元素HTML布局，能够对CSS进行定位

<!DOCTYPE html>
<html>
<head>
<style>
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
float:left;
padding:5px;
}
#nac{
line-height:30px;
background-color:#eeeeee;
height:300px;
float:right;
padding:10px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;}
</style>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokoy<br>
</div>
<div id="nac">
亚明<br>
倩倩<br>
爱你<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. it is the most populars city in the United

Kingdom, with a metropolitan area of over 13 million inhabitants.
</p></div>
<div id="footer">
Copyright W3cSchool.com.cn</div>
</body>
</html>

5、HTML表格定义

<table>元素作用是显示表格化的数据。

使用<table>元素能够取得布局效果，通过CSS设置表格元素的样式

<!DOCTYPE html>
<html>
<head>
<style>
table.lamp{
width:100%;
broder:1px solid #d4d4d4;}
table.lamp th td{
padding:10px;}
table.lamp td{
width:100px;
}
</style>
<body>
<table class="lamp">
<tr>
<th>
<img src="G:/MYXJ_20170721115944_save-01.jpeg" alt="Note"

style="height:200px;width:200px"></th>
<td> The table element was not designed to be layout tool</td></tr></table>

</body>
</html>

HTML&javaSkcript&CSS&jQuery&ajax（三）的更多相关文章

  1. java-HTML&javaSkcript&CSS&jQuery&ajax

    CSS  伪装 1.<style>a;link{color:#000000} a:visited{color:#000000; a.:hover{color:#FF00FF} a:acti ...

  2. XSS-HTML&javaSkcript&CSS&jQuery&ajax

    1.设置不同的样式列表 <style> ul.a{list-style-tyrp:circle;}    ul.b{list-style-type:square;}   ul.c{list ...

  3. HTML&javaSkcript&CSS&jQuery&ajax（十）

    HTML 1.SVG直接嵌入HTML网页 ,SVG 是使用XML描述2D图像的语言,Canvas通过JavaScript来绘制2D <svg xmlns="http://www.w3. ...

  4. HTML&javaSkcript&CSS&jQuery&ajax（八）

    一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...

  5. HTML&javaSkcript&CSS&jQuery&ajax（七）

    ’一.HTML5 实例  <video width="430" controls>   <source src="mov_nnn.mp4" t ...

  6. HTML&javaSkcript&CSS&jQuery&ajax（五）

    一.Framset标签定义了每个框架中的HTML文档, 1. <framset cols="25%,75%"> <frame src="frame_a. ...

  7. HTML&javaSkcript&CSS&jQuery&ajax（四）

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  8. HTML&javaSkcript&CSS&jQuery&ajax（二）

    一.HTML 1.标签<a href="http:www.baidu.com">This is a link </a>         <img sr ...

  9. java-HTML&javaSkcript&CSS&jQuery&ajax( 八)

    一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...

随机推荐

  1. w10谷歌chrome关闭自动更新

    运行输入:msconfig打开服务 选择服务,找到谷歌更新 ,点击禁用  ,然后保存 保存会要求重启电脑 ,重启后打开页面谷歌  ,会出现弹窗,是否更新 ,点否 . 然后解决,不会再自动更新了. 这是 ...

  2. 遗传算法selection总结-[Fitness, Tournament, Rank Selection]

    假设个体(individual)用\(h_i\)表示,该个体的适应度(fitness)为\(Fitness(h_i)\),被选择的概率为\(P(h_i)\). 另外假设种群(population)的个 ...

  3. Matlab 读取 ROS bag 文件指定消息数据

    近期在接触Ros的时候遇到了一些问题,如何将rosbag中的信息提取出来进行进一步处理呢? 如三维点位置信息,视频信息(如果有的话)等等. 我采用的是MATLAB 读取bag信息 filepath=f ...

  4. 20165231 2017-2018-2 《Java程序设计》第6周学习总结

    教材学习内容总结 第八章 String类 Java专门提供了用来处理字符序列的String类. String类在java.lang包中,由于java.lang包中的类被默认引入,因此程序可以直接使用S ...

  5. python进程.线程和协程的总结

    I.进程: II.多线程threading总结 threading用于提供线程相关的操作,线程是应用系统中工作的最小单位(cpu调用的最小单位). Python当前版本的多线程没有实现优先级,线程组, ...

  6. Shell-匹配FTP文件名

    想弄个脚本,下载每日构建的版本,由于版本文件名中有构建时间(不是固定值),只能按日期确认文件名,例如:project_name_2019-01-04*.exe 搜索了下,可以用dir filename ...

  7. whistle工具全程入门

    接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles),可以用来拦截分析请求.包装请求.本地调试和移动端代理开发调试等.多多少少,fiddler和Charl ...

  8. latex中的希腊字母

    原文地址:http://blog.csdn.net/xxzhangx/article/details/52778539 希腊字母,我们从小学开始认识它,但对它的读音我依旧靠蒙(说蒙真的感觉好羞愧啊). ...

  9. js声明引入和变量声明和变量类型、变量

    问题: 在网页的发展历程中,发现网页不能对用户的数据进行自动校验,和提供一些特效. 解决: 使用javascript. 作用 可以让网页和用户进行直接简单的交互. 可以让网页制作特效和动画. 声明js ...

  10. 020_nginx禁止ip默认参数是$remote_addr无法禁止真实ip的问题

    由于网站使用了cdn所以$remote_addr获取的ip是cdn的ip,我现在先禁止某些ip访问发现无法禁止cdn传递过来的客户端的ip也就是$http_x_forwarded_for这个参数.比如 ...