HTML技术短暂的学习总结

静态页面：与用户之间交互的数据没有持久化，比如做项目的demo
动态页面：与用户之间有交互，数据一般来源于数据库，数据是持久化的。

HTML/CSS超文本标记语言。
标签是预定义。
css级联样式表，修饰html网页
javascript 网页的时间响应。

根标签 html
子标签 head body
head中不写网页显示的内容， 写title标题 meta设置字符编码
body中写网页显示的内容
key标签 name属性
value标签 value数据或用户输入的数据
action 指定提交数据目的地
method 提交的方式
get 默认提交方式 将数据放在头部 浏览器可见 及时性高 不安全 提交的数据最多可以提交256个字符
post 将数据放在协议体部中发送 浏览器不可见 安全 对数据量无需求

.mybutton:Link{} 未访问普通的
.mybutton:visited{} 已访问的
.mybutton:hover{} 悬停的
.mybutton:active{} 被点击的

div span 原始标签 没有任何样式
div块级标签 具有换行功能， 可以使用float: left;
span行级标签 没有换行功能

border边框的宽度 内边框与外边框距离
padding 原始内容与类边框距离
margin 一个元素外边框距离另外一个元素的距离

1、第一行指明版本信息
指明引入dtd en代表dtd使用的语言english
2、代表根标签
3、代笔头部标签 不会显示在浏览器上
代表网页标题
代表元信息
4 代表体部标签 会显示在浏览器上

标题标签
h1,h2,h3,h4,h5,h6
段落标签
p
换行标签
br
空格
&nbsp
注释

文本格式标签

    <b>    <i>    <big>    <em>    <small>    <strong>list标签

    <ul><li></li><li></li><li></li></ul>无序标签    <ol><li></li><li></li><li></li></ol>有序标签    <dl><dt><dd></dd><dd></dd></dt></dl>自定义标签

table标签

<table><tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>tr代表行
td代表单元格
border设置表的边框
colspan合并列
rowspan合并行
align内容的对齐方式
style=”boeder-collapse: collapse;”取消单元格的边框

frame<frameset>定义一系列的frame<frame>定义frame框架<noframes>如果浏览器不支持frame就显示noframes中的内容<iframe>在iframe中嵌套文本内容rows上下划分cols左右划分

form表单 和input输入

<form action="" method="" name="">  <input type="text" name="" id=""     class="">  <input type="password" name=""    id="" class="">  <input type="radio" name=""       value="">  <input type="checkbox" name=""          value="">  <select name="">    <option value=""></option>  </select>  <textarea cols="" rows=""    name=""></textarea>  <input type="button" value="">  <input type="submit" value="">  <input type="reset" value=""></form><img src="" alt="" width="" height=""><a href="目的地" >文字图片</a>

embed,bgsound多媒体和背景音乐

跑马灯效果
中国

css:Cascading Style Sheet
级联样式，来修饰html中的标签，达到页面布局和页面修饰分离

三种引入方式
1、直接嵌套式 直接将样式嵌套在html中标签中
2、嵌入式在html文件的head标签中加入style标签

body{
background-color:pink;
color:red;
}

3、链接式页面的布局在html 样式在 css

选择器 选择修饰哪一个标签
1、标签选择器 将标签名作为选择器 body{}
2、id选择器 将id作为选择器 #idname{}
3、类别选择器 将class值作为选择器 .classname{}
4、集群选择器 将多个标签同时选择 选择器用，分割
#idname,.classname{}
5、后代选择器 将自标签作为选择器是用空格隔开

idname a{}

6、通用选择器 *

文档流一个标签在网页占的位置 所形成的线性空间
相对定位：相对于标签原来自己的位置进行相对定位
position: relative;top: 50px;left: 50px;
要与top和left连用 没有脱离文档流 z-index来控制显示级别 越大显示级别越高
绝对定位
position: absolute;top: 50px;left: 50px;
与top left连用 会脱离文档流 z-index控制显示级别
浮动定位
float:left,right,none;
浮动会覆盖空间 但不会覆盖内容 遇到父边框或浮动的边框会停止
clear清空浮动