HTML笔记誊录

www.w3school.com.cn网站
ctrl+k+d 页面源码对齐
注释不允许嵌套
<!--你好-->
<!--你还
nihao
nihao
nihao
-->

<!--你还
nihao
nihao
<!--
nihao
-->
nihao
-->
//注释不允许嵌套
/*
注释的内容
*/

字体分为逻辑字体和物理字体
推荐使用逻辑字体(效率较高)
&lt;(<)
&gt;(>)
&nbsp;(空格)

<font size="7" color=‘red‘>不</font><!--size字体 1-7,7最大h相反-->
相对路径: 如果图片文件1.jpg与html 文件中同一个文件夹下,使用地址时,可以写
成src="1.jpg"
如果图片展img 文件夹下,而该文件夹与html文件中同一个文件夹下,则使用地址的时候
应该写成src="img\1.jpg"
绝对路径:

<img src="./2.jpg"//当前目录
<img src="./img/2.jpg"//当前目录img文件下的2.jpg(此时html文件与文件夹在同一个目录,平级的目录)
<img src="../2.jpg"//父目录
<img src="/2.jpg"//表示服务器的根目录

ol:有序
<ol type="i">
   <li>有序</li>
   <li>有序</li>
   <li>有序</li>
</ol>
  
ul:无序
<ul type="i">
   <li>有序</li>
   <li>有序</li>
   <li>有序</li>
</ul>
dl:自定义列表
<dl>
  <dt></dt>
     <dr></dr>//解释
     <dr></dr>
  <dt></dt>
  <dt></dt>
</dl>

align:right,left,center
vilgn:top,buttom middle

表格中的TD中如果没有数据会不显示边框,,所以得在空的Td中加个@nbsp;
复选框的accessKey 属性:alt +e 定位复选框的勾选的快捷键(ie),mac等其他的浏览器只要使用e健即可

显示一张图片上的不同区域
<div style="
background-image:url(‘2.jpg‘);
width:200px
height:150px;
backgroud-position:-328px,-12px;
cursor:wait;
display:none;
visibility:hidden;//
"</div>

<div style="dispaly:inline">(横向排列)使div与文字在同一行,默认div是会换行的
</div>
<span style="dispaly:block"> span 默认是横向排列的,不会换行,使用dispaly:block可以换行,块状

显示
</span>

相同样式的应用:
1、标签选择器:
   让相同的标签具有相同的样式:
   标签名{样式}
   a{} 可以应用于所有的<a></a>
2、类选择器:
   .myclass{样式}
   <a href="baidu.com" class="myclass">哈哈</a>
3、id选择器
   #myid{样式}
   id="myid"4、标签类选择器:
标签加类的结合
h1.title
{
font-family:;
color:red;
}
h2.title
{

}
<h1 class="title">哈哈</h1>
<h2 class="title">呵呵</h2>

5、类的组合使用:
.big
{
}
.small
{
}
<p class="big small">我是好孩子</p>//此时的是2种样式的结合使用

选择器的声明:
6、组合标签的集体声明:
h1,p,a,span
{
}
7、全局声明:共有的样式,没有应用其他样式的都以全局的为准
*
{
}
8、嵌套选择器的声明:
# tb1 tr td
{
}
<table id="tb1">
   <tr>
     <td>哈哈哈哈
     </td>
   <tr/>
</table>

区别:
所有跟标签相关的一般使用标签选择器
一般id只是应用一次,针对一个
class可以有多个
1、统一的样式用标签
2、部分相同的样式用class
3、唯一的一个,应用一次用id

优先级:
共有的低,特有的高
id>类>标签(组合样式时就近原则)
当标志为:!important,可以调整优先级,不管后面有没有其他的样式,都是我以我为准

伪选择器:只能用在a标签上(还可以是类及ID上)
就是给一个标签的某个状添加样式的方法
标签:状态{//样式}
link 表示放上去以前
visited 点击以后

active 点击的时候
hover 鼠标放上去的时候

a:link,a:visited//点击后与点击前的样式一样
{
}
a:hover
{
}
a:active
{
}
<a href="www.baidu.com"> 百度</a>

tr:hover//当鼠标放在行的时候高亮显示
{
  backgroud-color:red;
}
并给所有浏览器都支持伪选择器

针对特定链接是使用伪选择器,此时的类及ID都有效
.myclass:hover//当鼠标放在行的时候高亮显示
{
  backgroud-color:red;
}
#myclass:hover//当鼠标放在行的时候高亮显示
{
  backgroud-color:red;
}
<a id="myclas" href="www.baidu.com"> 百度</a>

table,td,th
{
  border:1px solid red;//给表格加边框
  border-collapse:collapse;//表格边框合并
}

取消列表项的符号
让列表项 float:right

文档流与定位:
在文档页面中所有的标签和元素都是从左上到右下的进行堆砌
div会进行自动换行
要继续定位:脱离文档流
绝对定位:position:absolute;//不随鼠标的滚动,可以根据坐标定位到任何地方

固定定位:position:fixed;//随着鼠标的滚动,可以根据坐标定位到任何地方
相对定位:position:relative//相对位移与原来的文档流一致,如果位置了top等数据,则
以自己原来在文档流中的位置做为参照物来进行偏移

多个div的排列循序,当页面position为absoultion的时候,要控制div的排列循序可以为每一标记设置z-index,可以使用z-index来控制
数值越大越在前面
z-index:1
z-index-2

 

时间: 2024-10-17 02:45:56

HTML笔记誊录的相关文章

C#笔记誊录

1.继承 面向对象的三大特征: 封装性 继承性  多态性 一.继承:类与类的关系 为什么会用继承:减少代码重复 优化 空间内存 实现多态  class 基类 { //基类成员 } class 子类:基类 { //子类成员 } 判断继承关系 用进行进行判断-->子类对象 is 父类成员 例如 诺基亚手机  诺基亚280  诺基亚板砖007 继承特征 :1.单根性  一个只能继承自一个类 不可能继承俩个类                  2.传递性   爷爷 父亲 孙子              

JavaScript Dom 笔记誊录

DOM:文档对象模型 Dhtml:javascript+css+html(dom) 为什么要使用Dom: 1.HTML页面动态化 2.提升用户交互型 2. 1.document.getEelmentById 可以通过对象的id属性来获取该元素对象 2.document.getElementsByTagName 可以通过元素的标签名得到一组元素对象的数组 3.document.getElementsByName 根据元素的name属性来获得该一组对象的数组,一般节点都具有name属性 docume

SQL SEVER 笔记誊录

数据库: sqlcmd -S .\sqlespress //链接免费的数据库实例 sqlcmd -S YKTHHAP1RIWNZ4L\SQLHJS//链接到本地的数据库实例(机器名\实例名) 1>//登录成功! net start mssql$sqlexpress启动服务 quit/exit退出数据库的链接 char(10):ASIIC码10个字节:一个汉字占2个字节,只能放5个汉字,可以放是10个英文.数字 固定长度,没有的补空格 nchar(10):Unicode码,10个字符:10个汉字

JQuer笔记誊录

jQuery=$ 2者相等 $是顶级的对象,就像dom中的window jQuery中最常用的对象即$对象,要想使用jQuery的方法必须通过$对象.只有将普通的Dom对象封装成jQuery对象,然后才能调用jQuery中的各种方法. $是jQuery简写,在代码中可以使用jQuery代替$,但一般为了方便大家都直接使用$. 通过js实现的页面加载完毕的执行代码的方式与JQuery的区别: 需求:页面加载完毕后弹出"加载完毕!". 通过window.onload实现. 通过jQuery

JavaScript笔记誊录

js:一种脚本语言.客户端语言 1.代码都写在<script></script>标签中 2.外部引用<script type="text/javascript" src=""></script> 变量命名规则 -> 严格区分大小写 ->与C#类似,多一个,可以使用$开头 大小写敏感,弱类型var -> 注释    // 与 /**/    (<!--  -->) -> 需要写JS,代

ASP.NET笔记誊录

元数据:代码中二进制级别达到重用,包括IL代码,类的属性,字段方法,程序集,资源等各种数据 VS中的的代码智能提示就是反射元数据来获取的,是这个.net中代码中灵魂 sqlconnection连接池(list集合,放在内存中):保存内连接对象 内连接对象跟连接字符串相关,当sqlconnection conn=new sqlconnection(strConn1) 就会创建一个内连接对象,此时会根据对象的连接的字符串去sqlconnection连接池中查看是否有该对象,如果有则取出来用.没有则创

ASP.NET MVC笔记誊录

非托管代码:像由c++写的程序直接把二进制代码交给操作系统的内核来处理,叫做非托管代码 托管代码:运行在CLR下面的代码叫托管代码,由CLR来对代码进行异常等处理,编译成平台代码 匿名函数: public delegate int AddDel(int a,int b); 简单委托: AddDel delDemo=new AddDel(AddInt) public int AddInt(int a,int b) { return a+b; } 泛型委托,一般用于约束返回值和传入的参数 publi

C#笔记誊录&lt;二&gt;

c#编译器把源码编译成IL(中间)代码,再由CLR通过即时编译器把IL代码编译成本机机器语言(平台语言) www.webkaka.com//测试服务器的网速 ctrl+k+d 代码对其 CTRL+K+S #REGION代码折叠 ctrl+r+e 连敲2个回车:封装字段 shift+alt+f10:实现接口 XML序列化:把对象写到XML文档中 标识某个对象的某个字段不能被序列化,只要把[XmlIgnoreAttribute]放在某个字段前面 二进制流序列化:把对象序列化成二进制流进行网络传输 标

三层架构笔记誊录

html:提供内容 css:提供美化.样式 js:提供控制.效果 饭馆: 服务员.厨师.采购员 菜 三层: 表示层(ui):和用户交互 业务逻辑层(bll):提供具体的业务逻辑,隔离UI和DAL(做一些判断,把UI中输入的数据和DAL层返回的数据做处理) 数据访问层(dal):操作数据库 实体(model):在三层中传递数据 为什么要用三层: 创建三层: 1.创建一个空的解决方案 2.创建三个类库项目(model:ItcastSIMModel.dal:ItcastSIMDAL.bll:Itcas