- HTML Hyper Text Markup Language 超文本标记语言
- 标记语言:指的是通过 一组标签的形式描述事物的一门语言
- 超文本 : 比普通的文件更强大
以HMTL结尾的文件 或者HTM的文件
声明当前网页为html页面
<head></head>
<body></body>
head:用来存放当当前页面的重要信息,一般不展示在HTML页面上
常见的子标签
<mata charset="UTF-8"> 设计编码格式
<title>标题</title> 页面的标题
body:要展示在数据放在body中
<hn></hn>
n取值 1-6
h1最大 h6最小
自动换行 且留白 默认加粗
常用属性:
align:对齐方式
left: 左 rigth右 center:居中
格式:
<h2 align="center">内容</h2>
3.字体标签
<font></font>
常用属性:
face：字体
size : 尺寸
color: 颜色
<br/>换行
颜色的取值:(RGB)
方式1 #xxxx x为16进制
方式2 英文单词
其它标签
<p></p>段落标签
<pre标签> 原生标签
<b></b> <strong></strong>加粗
<i></i> 斜体
水平线
<hr/>
换行标签
<br/>
图片标签
<img/>
常用属性
src:l图片的路径
alt:替代文字
title:移动上去显示的文字
width:宽
height:高
路径的写法:相对路径 :./或者 什么都不写, 当前目录
../上级目录
绝对路径
带协议的绝对路径:
列表标签
<ol></ol>有序
属性 <type=""> <start> 只针对数字有效 值
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/e8a8a08fe90b4077a15f9d732bd65568/clipboard.png
<ul></ul>无序
常用的标签
<li></li>列表项
超链接
<a></a>
常用属性:
href: 跳转路径
target:在那里打开
默认值_ self _blank(在新的标签打开)
表格标签
<table></table>
常用的子标签
<tr>行
常用子标签
<td>:列
注意一行必只有一个单元格或者一列
Width 表格宽度
Height 表格高度
boder 边框
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/c6df5481374143748d361401318d02f0/clipboard.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/6cb36a8971dd4a21a7834a83bf0f337f/clipboard.png
表单标签
<form></form>
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/359873f6d4764b988ca66518933227c7/clipboard.png
HTML中表单元素:
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”submit”> :提交按钮.
* <select> :下拉列表.
<option><option>
* <textarea> :文本域.
属性 rows 长度 cols宽 readonly指定文本为只读readonly
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
get：1数据都展示到地址栏
2有大小限制
3get方式是在请求行中
post:
1.数据不会展示在地址栏中
2.数据没有大小限制
3post的数据是在请
<HTML>的框架标签
框架标签<frameset>
属性:
*rows
*cols
使用<frame>标签 frame代表切分的每个部分
DIV
<div><div>独占一行
<span><span> 默认在同一行
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/7f9912ad073346f8990c0376cd0238aa/clipboard.png
所有标签都有style属性
color 颜色 font-size 字体大小
行内样式 :直接在HTML元素上使用style 属性设置属性
页面样式 :在HTML的<head>标签使用<style>标签设置css
外面样式 :单独定义一个.css的文件, <link> hreaf="" style="" type="text/css" rel=""
元素选择器: 会将所有的DIV选中
div{
border : 1px solid blue
width 40px
height 15px
}
ID选择器
#标签名 元素选择器<类选择器<ID选择器
类选择器
.类名
根据设置标签的class属性
float浮动
属性选择器
input[type="text"]
后代选择器
div > span
找这个div
中的第一层级的span
元素.
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/a687d0a2ce5a4a758ba9ebebe8099fd0/clipboard.png
margin -----外边距 -- 用来设置该元素距离其它元素的距离
padding -- 内边距
JavaScript
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/3652d1ccad3647ddbe4c9743131fb75b/clipboard.png
- 区分大小写
- 弱变量类型语言 var 变量名=属性值
- 每行结尾分号可有可无
- 命名变量
- 第一个字符必须是字母 下划线或美元 符号
- 余下的字符可以是下滑线 美元符号或任何字母或数字字符
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/17b716c77f1c41bdad0071a47d4fbab5/clipboard.png
JS的开发步骤
js通常都由一个事件触发.
触发一个函数,定义一个函数,
获得操作对象的控制权.
修改要操作的对象的属性或值
定义函数:
*function 函数名称(){
//函数体
}
window.onload = function(){}
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/82c2321d4c1949498e74e6df4212b3c1/clipboard.png
常用事件 onclick ondblclick onmouserover onmouserout onload
引入方式
一种页面内直接编写JS代码,JS偌需要使用<script></script>
alter
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/dc6d9807033e464a903d684df1223c02/clipboard.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/0dee027464674d77955c8e0102003775/clipboard.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/0fd88ecdd53845f78671266c99d88109/clipboard.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/ebb80ab4a9ee41489cdefdc284091e6c/clipboard.png
* display
* block
：显示元素：
* none
：隐藏元素：
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/1a3079453e274072b3beaeb8cd01392d/clipboard.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/d15f4a92dc8e43d7bb1e8e6ec057c778/lip_image001.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/5a88ad2ea3de44188d03d2c29cc080b8/clipboard.png
C:/Users/%E9%A1%BE%E5%85%AC%E7%88%B5/AppData/Local/YNote/data/qqF389022F54830711172F0070E51CA947/c76c4618a1444cafa0ec4fffe7783c3d/clipboard.png
收藏
淘帖
踩
