HTML决定网页的内容
CSS决定网页的样式
JS决定网页的行为
基础标签
学html就是学标签的使用....
1、文本标签
标题标签：h1-h6
段落标签：p
特殊功能标签和符号：
字体相关标签：
2、列表标签
（１）有序列表:
ol标签 -- 代表整个列表
li标签 -- 代表列表中的元素
（２）无序列表
ul标签 - 代表整个列表
li标签 - 代表列表中的元素
（3）自定义列表
dl标签 - 代表整个列表
dt标签 - 分组名
dd标签 - 分组中的内容
3、图片和超链接
超链接标签: a标签
图片标签: img
href属性：
1）网络地址 - 跳转到指定的网页
2）本地的html文件地址 - 跳转到本地的html对应的网页中
3）空 - 刷新网页
4）选择器 - 在当前网页中，跳转到指定的位置
4、数据表格
table标签 - 整个表格
tr - 行
td - 单元格
5、form标签
作为一个容器来收集和提交这个标签里其他标签的数据，不会单独使用
6、input标签
type: text、password、radio、checkbox、submit
name：用来对输入的内容进行说明，提交数据的时候以name:value的形式提交
id：
placeholder:提示信息
maxleng:最大位数
<body>
<form action="" method="get" target="_blank">
<input type="text" name="usrname" value="xiaoming" placeholder="用户名"/><br>
<input type="text" name="tel" value="13689765326" placeholder="电话号码"/ maxlength="12"><br>
<input type="password" name="password" value="123465" placeholder="密码"/ maxlength="6s"><br>
<hr >
<div id="" >
<input type="radio" name="sex" value="famale" checked="True">famale<br>
<input type="radio" name="sex" value="male" checked="False">male<br>
<input type="radio" name="sex" value="other" checked="False">famale<br>
</div>
<hr >
<div id="" >
<input type="radio" name="marry" value="yes" checked="True">已婚<br>
<input type="radio" name="marry" value="no" checked="False">未婚<br>
</div>
<hr >
<div id="" >
<input type="checkbox" name="IT" value="python" checked="True" >Python语言<br>
<input type="checkbox" name="IT" value="Java" checked="False">Java语言<br>
<input type="checkbox" name="IT" value="C#" checked="False">C#语言<br>
</div>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>
<input type="submit" value="submit"/>
</form>
</body>
7、下拉菜单（select -option）和文本域（textarea）
<body>
<form action="" method="post">
<select name="西甲" >
<option value="1" >皇马</option>
<option value="2" selected="True">巴萨</option>
<option value="3">马竞</option>
<option value="4">塞维利亚</option>
</select>
<input type="submit" value="submit"/>
</form>
<textarea rows="3" cols="50" style="text-align:left;">
文本域
</textarea>
</body>
html常用标签示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html标签示例</title>
<style type="text/css">
.outside
{
background-color:bisque;
margin: 10px 10px;
width: auto;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.div01,.div02,.div03
{
width:500px;
background-color: orange;
display: inline-block;
padding:10px 10px ;
border:2px solid;
font-size: 20px;
font-family: "仿宋";
}
.inside01,.inside02,.inside03
{
margin: 10px 10px;
width: auto;
height:auto;
padding-top: 10px;
background-color: white;
text-align: center;
}
.div04,.div05,.div06
{
width:500px;
height:100px;
background-color: lightgray;
text-align: left;
display: inline-block;
}
.frameset01
{
background-color: lightgray;
height: 100px;
}
.frameset01 frame
{
width: auto;
height: 100px;
}
</style>
</head>
<body>
<div class="outside">
<div class="div01" >
<h1>静夜思</h1>
<p>床前明月光，疑是地上霜</p>
<p>举头望明月，低头思故乡</p>
</div>
<div class="div02">
<h1>静夜思</h1>
<p>床前明月光，疑是地上霜</p>
<p>举头望明月，低头思故乡</p>
</div>
<div class="div03">
<h1>静夜思</h1>
<p>床前明月光，疑是地上霜</p>
<p>举头望明月，低头思故乡</p>
</div>
<hr >
<div class="inside01">
<div class="div04">
<form class="form01" method="post" target="_blank" >
<select class="select01" name="国家">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="英国">英国</option>
</select>
<select class="select02" name="国家">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="英国">英国</option>
</select>
<select class="select03" name="国家">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="英国">英国</option>
</select>
</form>
</div>
<div class="div05">
<form action="" method="post">
<input type="checkbox" name="IT" value="python" checked="True" >Python语言<br>
<input type="checkbox" name="IT" value="Java" checked="False">Java语言<br>
<input type="checkbox" name="IT" value="C#" checked="False">C#语言<br>
</form>
</div>
<div class="div06">
<form action="" method="post">
<input type="radio" name="sex" value="famale" checked="True">famale<br>
<input type="radio" name="sex" value="male" checked="False">male<br>
<input type="radio" name="sex" value="other" checked="False">famale<br>
<input type="submit" value="submit"/>
</form>
</div>
</div>
<hr >
<!--
-->
<div class="inside02">
<frameset class="frameset01" cols="25%,50%,25%">
<frame class="" src="new1.html">
<frame class="" src="new2.html">
<frame class="" src="new3.html">
</frameset>
</div>
<hr >
<div class="inside03">
</div>
</div>
</body>
</html>
网友评论