您的位置：首页 > Web前端 > HTML

HTML学习笔记day2

2017-11-30 19:50 176 查看

HTML块

HTML块元素

块元素在显示时，通常会以新行开始

<h1> <p> <ul>

HTML内联元素

通常不会以新行开始

<a> <b> <img>

HTMLdiv元素

也被称为块元素，其主要是组合HTML元素的容器

本身没有任何含义，可以设置样式属性、进行文档布局

HTMLspan元素

是内联元素，可以做文本的容器

HTML布局

使用div元素布局

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
background-color: gray;
}
div#heading{
width: 100%;
height: 10%;
background-color: aquamarine;
}
div#content_menu{
width: 30%;
height: 80%;
background-color: azure;
float: left;
}
div#content_body{
width: 70%;
height: 80%;
background-color: transparent;
float: left;
}
div#bottom{
width: 100%;
height: 10%;
background-color: cadetblue;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="bottom">底部</div>
</div>
</body>
</html>

浮动

浮动：float：left；right；none

浮动的模块是没有高度，不占用位置的

关于浮动的清除有以下几种：clear （clear:both;）

使用table元素

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: gray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: cadetblue">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: aquamarine">
<ul>
<li>ios</li>
<li>android</li>
<li>html</li>
</ul>
</td>
<td width="70%" height="80%" style="background-color: aliceblue"></td>
</tr>
<tr>
<td width="100%" height="10" colspan="2" style="background-color: brown">这是底部</td>
</tr>
</table>
</body>
</html>

HTML表单

HTML 表单用于搜集不同类型的用户输入。

常用表单

复选框

<form>
你喜欢的水果有？
<br/>
苹果<input type="checkbox">
橘子<input type="checkbox">
柠檬<input type="checkbox">
</form>

单选按钮

<form>
请选择你的性别：
<!-- name指定二者为一组 -->
男<input type="radio" name="sex">
女<input type="radio" name="sex">
</form>

文本域

<textarea cols="30" rows="30">请在此填写个人信息</textarea>

创建按钮

<form>
<input type="button" value="按钮">
<input type="submit" value="提交">
</form>

下拉列表

<form>
<select>
<option>www.baidu.com</option>
<option>www.sina.com</option>
<option>www.bilibili.com</option>
</select>
</form>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航