对于html与css常用标签的记录

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/tylt6688/article/details/101916804

    Html常用标签
     

<titile>设置网页标题(浏览器上方标签栏)</titile>


<hr />定义一条水平线

 

<br />换行

      

<h1>定义标题 h1~h6逐级(字号和重要性)递减</h1>

      

<p align="设置对齐方式">段落文本</p>

 

             align属性:

                     默认 left左对齐  

                     center居中对齐

                     right右对齐

      


<img src="图片地址" alt="不能显示时的替换文本" title="鼠标悬停信息"/>

   

    width  图像宽度   像素

    height 图像高度   像素   一般宽或者高只设置一个,另一个会等比例变化

    border 图像边框宽度  数字

    vspace 顶底部空白  垂直边距  像素

    hspace 左右侧空白  水平边距

 

    绝对路径  指带盘符的路径

    相对路径  ../指上一文件夹  /指下一文件夹

   

<em>特殊显示文本</em>倾斜标记



       <div>区块布局</div>



<span>行内标记  特殊显示 文本</span>

                    

<ul>无序列表

<li>名</li>

...

</ul>

                    

<ol>有序列表</ol>

                    
<dl>解释列表

<dt>解释标题</dt>

<dd>解释文本</dd>

</dl>

表单

<form action="服务器地址" method="get保密性差 数据量限制/post保密性好 无数据量限制" name=”表单名”>  

<input type="text文本 password密码 button按钮 radio单选按钮 checkbox多选框 reset重置按钮 file文件上传 submit提交按钮" name="输入类型名"  value="显示值" 见P143 />

<textarea>定义多行文本框</textarea>

<select>

定义下拉列表,需要有列表项

<optgroup>可分多个组进行选择
<option>选项</option>
</optgroup>

</select>

</form>

           
<a href="跳转目标" target="_self原窗口打开"  _blank 新窗口打开>超链接</a>


链接伪类 一般应用于鼠标链接的悬浮样式,一般放置于css样式的属性当中。

a: link{  }表示为未访问的样式属性

a: visited访问后  一般应用相同样式

a: hover  鼠标经过悬停样式

锚点链接   即跳转目标 href 变为#id   再定义一个元素id与其相同 点击此超链接 即会跳转到指定地方
 

块元素 <div>,<h1>~<h6>,<p>,<ul>,<ol>,<li>

行内元素<span>,<em>,<del><a>,<strong>

 

行内元素只可以定义左右外边距

元素转换属性 display

inline 此元素显示为行内元素

block 此元素显示为块元素

inline-block 此元素显示为行内块元素,可设置宽高,不独占一行

none 隐藏元素,不显示

行内元素具有块元素特性,可以设置宽高

块元素具有行内元素的特性,不独占一行


 常用特殊字符,放置于标签的内容之内,防止与标签内的定义发生冲突,使用时要注意末尾的分号

空格     &nbsp;

<          &lt;

>          &gt;


CSS样式属性

 

CSS样式 放于head标签

外链式:

<link rel="stylesheet" type="text/css" href="引用外部文件的相对地址" />

内嵌式:

<style type="text/css">css表单样式</style>

    标记选择器   将页面内同一种标记制定统一样式 标记名为标签 body  p

   

    类选择器  定义一类名的样式  类名第一个字符不能用数字 并且严格区分大小写 

   

    id选择器       #id名来指定样式

   

    通配符选择器     匹配页面中所有元素 

 

    标签指定选择器    标签名 类(Class)名

 

    后代选择器      外标记 内标记  中间用空格分隔

 

    并集选择器    多个名组成一起定义样式

 

    选择器中属性的值与定义的属性值单位之间不允许出现空格

    text-属性   设置文本属性

   

    css的继承性   不可被继承的属性{

       边框属性 border

       边距属性 padding内边距     margin外边距

       背景     background

       定位

           width  height }

border-style边框样式

 一值 四边

 二值 上下/左右

 三值 上/左右/下

 四值 上/右/下/左

    none无

    solid单实线

    double双实线

    dashed虚线

    dotted点线

   

    权重   id>class>标记选择器

    CSS选择器中加!important 具有最大优先级

   

    常用font-weight:normal正常或者是bold加粗来定义文本   

 

background:url();背景图像地址

background-position:控制背景图像位置

background-attachmentscroll图像随页面滚动

background-color:transparent;背景透明

background-repeat:背景图像平铺

默认   repeat 水平竖直方向

no-repeat 不平铺

repeat-x  沿水平方向

repeat-y  沿竖直方向

 

fixed 固定背景图像


 

 

某个块元素的背景往往在css样式中进行定义background:url() no-repeat;

 

text-align只适用于块元素

text-indent:2em;首行缩进2单位

          

.classname:hover{

#鼠标悬浮属性设置悬浮变换背景

background:url();

}

    floatleft right none不浮动

    clearleft rightboth全部     清除浮动    避免浮动对元素的影响

   

    overflow:hidden;对父元素应用    清除浮动      详情见P185

    postion:    P189定位模式

 

 

console.log(“在控制台输出信息”)

 

定义函数function name( ) {  }

猜你喜欢

转载自blog.csdn.net/tylt6688/article/details/101916804