网页基础布局
html
JavaScript
1.标签通用属性
标签由标签名、标签属性、文本内容三部分组成（注：单标签没有文本）
标签属性是对标签的一种描述方式。
标签属性分通用属性、自由属性和自定义属性。
通用属性：所有标签都有具有例如：
- id：用来给标签取一个唯一的名称
- class：给标签取一个类名
- style：设置该标签的行内样式
- title：给当前标签一个提示文本，当鼠标移到标签位置所显示的提示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- id ：取识别名 渲染或者修改标签样式时可以通过id锁定 名称最好可以体现标签内容
id在一个网页中必须是唯一的-->
<p id="p1">段落1</p>
<!-- class：给一组标签取一个类名 -->
<div class="text">div</div>
<p class="text">p</p>
<!-- style:用来设置当前标签的样式,行内样式 -->
<p style="width:100px;color: red;border: 3px solid aquamarine;">这是一次测试</p>
<!-- title给当前标签一个提示文本 -->
<p title="test">测试</p>
</body>
</html>
2.自定义标签属性
自定义标签：通常用来传值或者用于图片懒加载等方面
格式：data-*
<img data-src="图片名" alt=“提示文本” />
<p data-id="goodsid">...</p>
3.table表格
3.1.绘制基本表格
1.table：主要用于呈现格式化数据。
<tr>：行
<td>：列
<th>:表头，主要对下面内容的有说明作用，th的内容会自动加粗和居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>内容1</th>
<th>内容2</th>
<th>内容3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
</body>
</html>运行
2.表格属性：
- border：表格边框宽度，默认单位px（像素）
- width：表格宽度 ，默认单位px
- align：表格水平对齐方式（left（默认），right，center）
- cellpadding：单元格文本与边框的距离
- cellspacing：单元格边框的间距
(1) 将<table>改为
<table border="1" width:="200">
运行结果
(2)加入cellpadding 和 cellspacing属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!-- table+tr*2>td{内容$}*3 -->
<table border="1" width="200" cellspacing="0" cellpadding="10">
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
</body>
</html>
运行结果
3.2.表格的跨行和跨列
rowspan：跨行
colspan：跨列
1）rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--Emment语法： table[border=1 width=500 align=center]>tr*3>td{内容区域$}*3 +Tab-->
<table border="1" width="500" align="center">
<tr>
<!-- valign:垂直对齐方式（top、middle、bottom） -->
<td rowspan="2" valign="top">内容区域1</td>
<td>内容区域2</td>
<td>内容区域3</td>
</tr>
<tr>
<td>内容区域2</td>
<td>内容区域3</td>
</tr>
<tr align="center">
<td>内容区域1</td>
<td>内容区域2</td>
<td>内容区域3</td>
</tr>
</table>
</body>
</html>
运行结果
2)colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- table[border=1 width=200 align=center]>tr*3>td{内容$}*3 +Tab -->
<table border="1" withd="400" align="center">
<tr>
<td colspan="3" align="center">内容3</td>
</tr>
<tr>
<td colspan="2" align="center">内容2</td>
<td rowspan="2">内容3</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
</body>
</html>
运行结果
3.3.绘制完整表格
- <caption>：标题
- <thead>:组合html表格的表头内容
- <tboby>：组合html表格的主题内容
- <tfoot>：组合html表格的页脚的内容
如果直接按tab不生成 就选中再按tab
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- table[border=1 width=600 align=center]>(caption{食堂菜单})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=4]) -->
<table border="1" width="800" align="center">
<caption>食堂菜单</caption>
<thead>
<tr>
<th>价格</th>
<th>菜名</th>
<th>数量</th>
<th>剩余</th>
</tr>
</thead>
<tbodyy>
<tr>
<td>5</td>
<td>糖醋小排</td>
<td>100</td>
<td>6</td>
</tr>
<tr>
<td>3.5</td>
<td>肉末炖蛋</td>
<td>100</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>炒白菜</td>
<td>100</td>
<td>30</td>
</tr>
</tbodyy>
<tfoot>
<tr>
<td colspan="4">备注：菜价仅为今天价格</td>
</tr>
</tfoot>
</table>
</body>
</html>
运行结果 
4.表单标签
form标签是所有标签最核心的标签之一，他是用来实现前后端交互的一个重要标签
常用属性：
- name：表单名（区别表单
- action：表单数据提交的地址（后台文件名：.jsp/.php/.asp/.aspx/.py 或网址，#表示提交的到当前文件下）
- method：前端提交到数据到后端的方法，主要有：get和post。 默认的是get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="menu" action="https://baidu.com" method="get">
<input type="text" name="userName" placeholder="请输入您的姓名" />
<input type="submit" />
</form>
</body>
</html>运行
随意输入 点击提交 可以看到我们的输入
将提交方式改为 method="post"
这就是get请求和post请求的区别 详细差别可以另外查询学习
4.1表单元素
- input类：主要用于输入，选择或者发出指令
- textarea类：
- select类：
- button类：
1)input类
| text | 文本输入的单行输入字段 |
| reset | 重置按钮 |
| button | 普通按钮 |
| checkbox | 复选框 |
| radio | 单选按钮 |
| image | 图片提交按钮 |
| submit | 提交表单 |
| password | 密码字段 |
- <input type="reset " />：重置按钮nput type="file " />：文件框
input练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="https://baidu.com">
<!-- text
属性：placeholder（提示）/name(命名）/
minlength和maxlength(最少/最多输入字符个数/
disabled（失效）/readonly（只读）/vaule（默认值）/pattern（正则匹配） -->
<!-- 不可以获取焦点，不能修改 -->
<input type="text" name="text" placeholder="请输入一个数字" value="100" disabled="disabled">
<!-- 可以获取焦点，不能修改 -->
<input type="text" name="text" placeholder="请输入一个数字" value="100" readonly="readonly">
<!-- radio：单选框，常用属性：name（必须有、value，checkout（是否选中），
disabled（失效），readonly（只读）
name一样代表radio是一组的 ，一组radio只有一个checkout-->
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女<br/>
<!-- checkbox:复选框/检查框 常用属性：name（必须有、value，checkout（是否选中），
disabled（失效），readonly（只读） -->
<input type="checkbox" name="fav">糖醋小排
<input type="checkbox" name="fav">椒盐虾仁
<input type="checkbox" name="fav">肉末炖蛋
<input type="checkbox" name="fav" checked="checked">青椒炒肉
<!-- file:文件上传按钮 -->
<input type="file" /> <br>
<!-- button：普通按钮 通常用于调用脚本代码（js）代码
常用属性：name（必须有、value(按钮的标题)，disabled（失效），-->
<input type="button" value="登录" >
<!-- img:图像按钮 用法与button一样
有一个特殊属性，src：加载图片 ，有提交功能-->
<input type="image" src="btn.png" title="刷新">
<!-- submit：提交按钮，将表单数据提交到后台 -->
<input type="submit">
<!-- reset:重置按钮，将表单所有组件输入的内容恢复初始状态 -->
<input type="reset" value="取消">
</form>
</body>
</html>
运行结果
2）textarea类
文本域，也叫多行文本框。主要用于输入大批量的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<!-- 常用属性：name,id,cols（列）,rows（行）,
placeholder,minlength,
maxlength,required(必须输入) -->
<textarea name="meme" id="meme" cols="30" rows="10">备注</textarea>
</form>
</body>
</html>
3）select类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<!-- select:下拉列表框，默认单项选择
用option呈现每个选项-->
<label for="meun">菜单</label>
<!-- multiple:表示可以多选 这是的下拉列表框变成了列表框
size:最多显示的行数 -->
<select id="meun" multiple size="2">
<option value="shrimps">椒盐虾仁</option>
<option value="custard">肉末炖蛋 </option>
<option value="custard">糖醋小排</option>
<option value="custard">红烧鸡腿</option>
</select>
</form>
</body>
</html>4）button类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- button：普通按钮，具有提交功能，可以单独使用，
不在form元素中，如果写在form有提交功能 -->
<button id="btnok">确认</button> <!-- 这个button主要是用于调用js代码 -->
<form action="">
<input type="text" name="info">
<button>提交</button> <!-- 与input中的submit功能一致 -->
</form>
</body>
</html>
5）表单通用元素
- name：字段名称
- value：字段初始值
- readonly：规定输入字段为只读
- disabled：规定输入字段禁用的
4.2.iframe框架标签
<iframe>元素会创建包含另一个文档的内联框架，也是镶嵌在一个网页中的另一个网页，相当于网页中又嵌套了一个窗口
常用属性：
- name：框架名
- src：引入外部html
- scrolling：滚动条（yes、no、auto)
- width：宽度（%，px）
- height：高度（%，px）
- frameborder：是否有边框（1、0）
- marginheight：框架离顶部和底端的距离（%，px）
- marginwidth：框架离左右的距离（%，px）
新建一个iframe目录
然后新建banner.html, nav.html ,content1.html,content2.html
banner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="加载失败">
</body>
</html>nav.html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ul>li{分类$}*4>ul>li*5>a[href]{内容$} -->
<ul>
<li>分类1
<ul>
<li><a href="content1.html" target="main">内容1</a></li>
<li><a href="content2.html" target="main">内容2</a></li>
<li><a href="">内容3</a></li>
<li><a href="">内容4</a></li>
<li><a href="">内容5</a></li>
</ul>
</li>
<li>分类2
<ul>
<li><a href="">内容1</a></li>
<li><a href="">内容2</a></li>
<li><a href="">内容3</a></li>
<li><a href="">内容4</a></li>
<li><a href="">内容5</a></li>
</ul>
</li>
<li>分类3
<ul>
<li><a href="">内容1</a></li>
<li><a href="">内容2</a></li>
<li><a href="">内容3</a></li>
<li><a href="">内容4</a></li>
<li><a href="">内容5</a></li>
</ul>
</li>
<li>分类4
<ul>
<li><a href="">内容1</a></li>
<li><a href="">内容2</a></li>
<li><a href="">内容3</a></li>
<li><a href="">内容4</a></li>
<li><a href="">内容5</a></li>
</ul>
</li>
</ul>
</body>
</html>content1.htm 和content2.html，content2.html改成内容2正在加载。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>内容1正在加载..</p>
</body>
</html>新建一个iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- banner -->
<iframe src="iframe/banner.html" scrolling="no" frameborder="0" width="100%" "></iframe>
<!-- 导航 -->
<iframe src="iframe/nav.html" scrolling="auto" frameborder="0" width="30%" height="300px"></iframe>
<!-- 核心内容 -->
<iframe src="iframe/content.html" name="main" scrolling="no" frameborder="0" width="60%" heigth="300px"></iframe>
</body>
</html>运行结果
注意：在实际开发时，尽量减少iframe。因为它破坏了前进和后退功能，且不利于SEO
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
