HTML百宝箱1从0开始

标准格式(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>

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小