标准格式(XHTML)
l 元素必须正确嵌套
l 元素必须始终关闭
l 元素名和属性名必须小写
l 文档必须有且仅有一个根元素
l 属性值必须使用双引号括起来
l 声明文档为标准的HTML格式,需在文档开头加入【<!DOCTYPE html>】
标签属性相关:
<标签名 属性名=“属性值”>……</标签名>
特有属性:
<html>标签
【lang="en"】设置文档为英文,此时会一般浏览器会自动进行翻译
<a>标签
【href=”https://www......”】打开网络或本地链接地址
【target="_blank"】打开的网页位置,新窗口,其它值有 本窗口“_self”;结合内联标签的父窗口"_parent"; 结合内联标签的最开始窗口 "_top"
【name=”dong”】或者【id=”dong”】页内跳转
a href="#dong">跳转a> name="dong">将跳转到此处>
<img>标签
【src=”https://www......”】显示网络或本地图片
【width="104px" height="142px"】宽高设置
【title="东小东"】鼠标放置时文字提示
【alt="dongxiaodong"】图片显示错误时显示的文字
<body>标签:
【bgcolor="#00FF00"】背景颜色
【background="img/bj.jpg"】设置背景图片
【marginheight="100px" marginwidth="10px"】上下、左右的内边距
【topmargin="100px" bottommargin="100px" leftmargin="100px" rightmargin="100px"】上、下、左、右,各边距分别设置
公共属性:
【style=” ”】设置样式如CSS样式
【align="center"】确定内容位置,其它值有right、left,适用于行标签,如<h1>、<p>、<div>
【class=” ”】确定所属类
【id=” ”】确定唯一id
文字格式化标签
文字加粗:<b>、斜体文字:<i>、小号字体:<small>、大号字体:<big>、下标字:<sub>、上标字:<sup>、插入字(下划线):<ins>、删除字:<del>
实体(特殊字符)
表格(<table>)
特有属性:
【cellpadding="10px"】单元格间内边距
【cellspacing="10px"】单元格间外边距
【colspan="2"】合并两列格子,写在开始合并列
【rowspan="2"】合并两行格子
1 table border="1" cellpadding="10px"> 2 caption>表格名称 3 <!--表格头--> 4 thead 5 tr> 6 th>id 7 >用户名 8 >昵称 9 10 > 11 表格内容12 tbody13 >第一行14 td>115 >东小东16 >昵称信息17 18 第二行...19 >....20 21 22 table>
列表
无序列表
属性:type=” disc”,参数有disc(实体圆点)、square(实体方块)、circle(空心圆)
1 ul type="circle"2 li>东小东13 >东小东24 >东小东35 ul>
有序列表
属性:type=”1”,参数有1、A、a、I(大写字母)、i
ol ="I"ol>
缩进列表
dldt>标题1dd>内容一>内容二5 >标题26 >内容二一7 >
表单(form)
特有属性:
【disabled="true"】禁用,提交表单时不携带
【readonly="readonly"】只读,提交表单时自动携带
【placeholder="请输入"】提示输入
【autofocus="autofocus"】自动获取光标
【autocomplete="off"】关闭浏览器提示信息
【enctype="multipart/form-data"】提交文件时必须在<form>中添加
简单的表单:
form action="lai.php" method="post"实现点击文字,输入框也会得到光标label for="userid">用 户:labelinput id="userid" type="text" name="user" 5 br/> 6 ="passwdid">密 码: 7 ="passwdid"="password"="passwd" 8 9 ="submit" value="提交"10 ="reset"="重置"11 form>
文本域:
js操作时,操作的属性是value
textarea cols="30" rows="donglist">默认文字textarea>
单选框:
以普通方式提交radx,后台PHP可以获取到value值
="radio"="radx"="1" 男 ="2" 女 ="3" >谁
复选框:
提交的是数组boxd,后台PHP通过($_POST["boxd"])如果数组不存在则说明无选中,数组存在则可以得到选中的value值
div ="divbox"2 ="checkbox"="boxd[]"="1xx" 选项1 3 ="xx2" checked选项2 4 ="3dong"选项3 div6 button onClick="butallc()">全选button="butcancel()">取消8 ="buttrallc()">反选>
js实现多选等操作:
1 <script> 2 //得到所有的孩子对象 3 divobjx=document.getElementById("divbox"); 4 checkchildsx=divobjx.children; 5 全选 6 function butallc(){ for(var i=0;i<checkchildsx.length;i++){ 8 var xx=checkchildsx[i].checked; //获取值 9 checkchildsx[i].checked=true;修改值 10 } } 12 取消 13 butcancel(){ 14 15 16 checkchildsx[i].checked=false;17 18 19 反选 20 buttrallc(){ 21 22 var xx=checkchildsx[i].checked; 获取值 23 if(xx){checkchildsx[i].checked=false;}24 else checkchildsx[i].checked=true; 25 26 27 </script>
Jquery实现多选等操作
1 <script src="jquery-3.3.1.min.js"></script> 2 <script> 3 4 divobjx=document.getElementById("divbox" 5 checkchildsx= 7 8 $('[type="checkbox"]').prop("checked", 9 12 $('[type="checkbox"]').prop("checked",1)">false14 15 16 $('[type="checkbox"]').each(function(){循环操作 17 方法一 if(this.checked) this.checked=false; 19 else this.checked=true; 方法二 21 if($(this).prop("checked")) $(this).prop("checked",1)">else $(23 }); 24 25 </script>
下拉列表:
PHP后台可以直接通过donglist得到值,<select>标签中添加属性【multiple】则可实现多选
select 2 option>dongxiaodong 13 >dongxiaodong 24 >dongxiaodong 3select>
内容包裹
fieldsetlegend>东小东小标题 ...... 东小东内容 >
内联框架:
其中frameborder="0"为去掉外边框
body bgcolor="FFFF00" marginwidth="0px"h1>东小东内联框架的使用iframe src="https://www.baidu.com" frameborder="0" width="100%" height="900px"4 iframe> body>