HTML基础学习笔记4
2018-03-19 15:41
169 查看
大多数html元素被定为块级元素或内联元素
块<div>1. <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。2. <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。3. 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。4. 以新行开始和结束,比如<h1><p><ul><table>。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
内联元素<span>1. HTML <span> 元素是内联元素,可用作文本的容器。2. 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。3.不以新行开始,比如<a><img><td>。类对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。<head>
<style>
.cloths{
background-color:black;
color:white;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="cloths">
<h2>jacket<h2>
<p>The water had soaked his jacket and shirt</p>
</div>
<div class="cloths">
<h2>jeans<h2>
<p>He was wearing blue jeans and checked shirt</p>
</div>
</body><span> 元素是行内元素,能够用作文本的容器,可用于文本内容。设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。<head>
<style>
span.red{
color:white;
}
</style>
</head>
<body>
<h1>my<span class="red"> important heading</span><h1>
</body>HTML布局
使用<div>元素的网站布局<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。这个例子使用了四个 <div> 元素来创建多列布局:<head>
<style>
#header{
background-color:black;
color:white;
text align:center;
padding:5px;
}
#nav{
background-color:#eeeeee;
color:black;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text align:center;
padding:5px;
} <!--css定义-->
</style>
</head>
<body>
<div id="header">
<h1>cloths<h1>
</div>
<div id="nav">
jacket<br/>
jeans<br/>
</div>
<div id="section">
<p>The water had soaked his jacket and shirt</p>
</div>
<div id="footer">
copyright? xxxx.com
</div>
</body>使用HTML5的网站布局;<head>
<style>
header{
background-color:black;
color:white;
text align:center;
padding:5px;
}
nav{
background-color:#eeeeee;
color:black;
height:300px;
width:100px;
float:left;
padding:5px;
}
section{
width:350px;
float:left;
padding:10px;
}
footer{
background-color:black;
color:white;
clear:both;
text align:center;
padding:5px;
} <!--css定义-->
</style>
</head>
<body>
<header>
<h1>cloths<h1>
</header>
<nav>
jacket<br/>
jeans<br/>
</nav>
<section>
<p>The water had soaked his jacket and shirt</p>
</section>
<footer>
copyright? xxxx.com
</footer>
</body>使用表格的html布局
<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式。<head>
<style>
table.cloths{
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th,td{
padding:10px;}
table.lamp th{
width:40px;
}
</style>
</head>
<body>
<table class="cloths">
<tr>
<th>
<img src="" style="width:xx;height:xx">
</th>
<td>The water had soaked his jacket and shirt</td>
</tr>
</table>
</body>
块<div>1. <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。2. <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。3. 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。4. 以新行开始和结束,比如<h1><p><ul><table>。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
内联元素<span>1. HTML <span> 元素是内联元素,可用作文本的容器。2. 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。3.不以新行开始,比如<a><img><td>。类对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。<head>
<style>
.cloths{
background-color:black;
color:white;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="cloths">
<h2>jacket<h2>
<p>The water had soaked his jacket and shirt</p>
</div>
<div class="cloths">
<h2>jeans<h2>
<p>He was wearing blue jeans and checked shirt</p>
</div>
</body><span> 元素是行内元素,能够用作文本的容器,可用于文本内容。设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。<head>
<style>
span.red{
color:white;
}
</style>
</head>
<body>
<h1>my<span class="red"> important heading</span><h1>
</body>HTML布局
使用<div>元素的网站布局<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。这个例子使用了四个 <div> 元素来创建多列布局:<head>
<style>
#header{
background-color:black;
color:white;
text align:center;
padding:5px;
}
#nav{
background-color:#eeeeee;
color:black;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text align:center;
padding:5px;
} <!--css定义-->
</style>
</head>
<body>
<div id="header">
<h1>cloths<h1>
</div>
<div id="nav">
jacket<br/>
jeans<br/>
</div>
<div id="section">
<p>The water had soaked his jacket and shirt</p>
</div>
<div id="footer">
copyright? xxxx.com
</div>
</body>使用HTML5的网站布局;<head>
<style>
header{
background-color:black;
color:white;
text align:center;
padding:5px;
}
nav{
background-color:#eeeeee;
color:black;
height:300px;
width:100px;
float:left;
padding:5px;
}
section{
width:350px;
float:left;
padding:10px;
}
footer{
background-color:black;
color:white;
clear:both;
text align:center;
padding:5px;
} <!--css定义-->
</style>
</head>
<body>
<header>
<h1>cloths<h1>
</header>
<nav>
jacket<br/>
jeans<br/>
</nav>
<section>
<p>The water had soaked his jacket and shirt</p>
</section>
<footer>
copyright? xxxx.com
</footer>
</body>使用表格的html布局
<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式。<head>
<style>
table.cloths{
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th,td{
padding:10px;}
table.lamp th{
width:40px;
}
</style>
</head>
<body>
<table class="cloths">
<tr>
<th>
<img src="" style="width:xx;height:xx">
</th>
<td>The water had soaked his jacket and shirt</td>
</tr>
</table>
</body>
相关文章推荐
- HTML&CSS基础学习笔记1.22-表单的文本域和下拉列表
- HTML学习笔记二表格基础
- 在慕课学习HTML与CSS基础课程的一些笔记
- 在慕课上学习的,HTML和CSS基础学习笔记10
- HTML&CSS基础学习笔记1.20-语义化标签
- HTML&CSS基础学习笔记1.34-通用选择器
- HTML+CSS基础课程学习笔记-第一章HTML简介
- HTML&CSS基础学习笔记1.10-添加链接
- Web基础学习笔记——html基础
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第一章 网页设计基础
- HTML&CSS基础学习笔记3-HTML的标签语法
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- HTML&CSS基础学习笔记1.13-有序列表及列表嵌套
- html+css学习笔记 [基础1]
- HTML+CSS基础课程学习笔记-第二章 HTML标签
- python之 前端HTML/CSS基础知识学习笔记
- HTML基础学习笔记
- ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法
- HTML5学习笔记二 HTML基础