<html>
<head>
<meta charset="utf-8">
<title>html的基本结构title>
head>
<body>此标签中写网页中显示的内容body>
html>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
<p>段落1p>
<p>段落2p>
<div>第一个div元素div>
<div>第二个div元素div>
<a href="http://www.baidu.com" target="_blank">内容元素a>
<a href="本地.html">本地链接a>
<span>内联容器标签span>
<img src="images/pic.jpg" alt="图片加载失败时的提示文字" title="光标放在图片上的提示文字"/>
<div style="width:100px; height:100px; background:red ">......div>
<head>
<style type="text/css">
div{
width:100px; height:100px; background:red }
......
style>
head>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
head>
<style>
div{
color:red}
style>
......
<div>这是第一个divdiv>
<div>这是第二个divdiv>
<style>
.blue{
color:blue}
.big{
font-size:20px}
.box{
width:100px;height:100px;background:gold}
style>
......
<div class="blue">....div>
<h3 class="blue big box">....h3>
<p class="blue box">....p>
<style>
#id1{
color: blue}
style>
......
<p id="id1">contentp>
<style>
.con{
width:300px;height:80px;background:green}
.con span{
color:red}
.con .pink{
color:pink}
.con .gold{
color:gold}
style>
......
<div class="con">
<span>....span>
<a href="#" class="pink">....a>
<a href="#" class="gold">...a>
div>
<span>....span>
<a href="#" class="pink">....a>
<style>
.box1,.box2,.box3{
width:100px;height:100px}
.box1{
background:red}
.box2{
background:pink}
.box2{
background:gold}
style>
...
<div class="box1">....div>
<div class="box2">....div>
<div class="box3">....div>
<style>
.box1:hover{
color:red}
.box2:before{
content:'行首文字';}
.box3:after{
content:'行尾文字';}
style>
...
<div class="box1">....div>
<div class="box2">....div>
<div class="box3">....div>
布局常用样式属性
<style>
.clearfix:after,.clearfix:before{
content: "";display: table;}
.clearfix:after{
clear:both;}
.clearfix{
zoom:1;}
style>
...
<div class="con2 clearfix">
文本常用样式属性
overflow属性设置元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式 --> overflow:hidden
<ul>
<li><a href="#">列表标题一a>li>
<li><a href="#">列表标题二a>li>
<li><a href="#">列表标题三a>li>
ul>
<ol>
<li><a href="#">列表标题一a>li>
<li><a href="#">列表标题二a>li>
<li><a href="#">列表标题三a>li>
ol>
<dl>
<dt>Coffeedt>
<dd>Black hot drinkdd>
<dt>Milkdt>
<dd>White cold drinkdd>
dl>
<form action="" method="post">
性别:
<input type="radio" name="xb" id="man" checked="checked"/><label for="man">男label>
<input type="radio" name="xb" id="woman" /><label for="woman">女label>
<input type="radio" name="xb" id="secret" /><label for="secret">保密label>
form>
定义表格的表头 |
---|
定义表格单元 |