重要标签总结

来源：互联网发布：c语言编写玫瑰花编辑：程序博客网时间：2024/06/11 19:57

一、基础标签

1) Head（头）：标签。

2) Title（标题）：标签，html的头部标题。

3) Size（大小）:设置字体大小。

4) Style：风格。

5) Color：颜色。

6) Aquamarine：宝石蓝。

7) P:标签。

8) Face（面对）：字体设置。

9) <h1>~~<h6>字体的大小。

10) Paragraph（段落）：段落标签，表示页面的一个段落。

11) a：标签，作用是跳转链接。

12) Target（把作为目标）：属性，指定页面默认打开。

13) Br：标签，换行。

14) Href（超文本）：属性，超文本引用。

15) Id：属性。

16) （name标签只能在<a>标签内才能代替id标签，而id标签在任意标签下都能使用。一般不使用name代替id.）

17) Name：属性。

18) Title：鼠标移上去可以出现指定提示信息。

18）<marqueescrollamount=10 >带你装逼带你飞</marquee>

移动字幕：从右向左，速度为10.（left

、right、up、down、alternate）

19）Base（基础的）：一把用于公用的部分提出。如：<title>公用提出</title>
<basehref="http://www.runoob.com/images/">
</head>

<body><img src="http://www.runoob.com/images/logo.png"><!--没用base时这样用--><br><img src="logo.png"><!--用了base可以将公用的代码提取出来，方便使用--><br><img src="logo.png"></body>

20）_balank：_blank：在新页面中打开。使用代码如下：

<a href="E101-01-02.html" target="_blank">

21）_self:在当前页面中打开目标页面的方式，其取值包括

22)_parent(根源)：属性，出现嵌套式是才用到，用处较少

23)_top（顶部）:属性：直接跳到头部。

24）<hr>：加一条线

25）<span>:标签，将部分文本独立出来。

26）<base>:设置页面的基准地址，从而简化地址的书写。（用了base可以将公用的代码提取出来，提到<head>里面，方便使用（如E101-02-07文档）

）

二、图片标签

1) Src属性：图片的源头，可以是本地的，也可以是远程的。

2) Height：图片的高度。（任意都可以高度）

3) Width：图片的宽度。（任意都可以宽度）

4) Border属性：图片的边缘宽度。

5) Lit：可替换的。当图片资源不显示时，替代资源，显示的文字内容。

三、有序无需

无序：

1) <ul>缩写（unordered list）：标签，定义一个无序列表

2) <li>缩写（list item）:标签，共同定义一个列

3) list item,定义一个列表项

4) Type：属性指定无需列表的符号，取值有：

5) Disc：是新的圆点。

6) Circle：空心的圆圈。

7) Square：实心的正方形。

有序：

8) <ol> 缩写（ordered list）标签，有序列表，即列表带有序号。

9) Type：属性，指定序号类型。

10) Start（开始，起点）：属性，规定数字，包括负数什么的。如以下：

自定义列表

11)<dl>缩写（define list）：标签，定义一个列表。

12)<dt>缩写（define title）：列表项的标题。

13) <dd> 缩写（define description）：列表项的描述。

用法如下：

四、表单

1) <labl>(标签)：标签。

2) For（适用于）：属性。

1. （此方法本人暂未使用过，一般不建议使用）

3) Type（类型）：属性，用于提供功能的类型。

4) Maxlength:最大字符限制功能。

5) Input（输入）：标签，键入输入框或者提交按钮所用到的东西。

6) 1Text（文本）：属性，建成文本框格式的输入框。

7) 2Password（密码）：属性，建成文本形式的输入框，但输入的文字会成现圆码字符格式。

8) 3Radio：属性，空心圆圈单项选择的框。单选按钮@

9) 4file（文档，提出）：属性，用于建成按钮，并进入文件夹选择该属性的文档。

10)5checkbox：复选框，可用于多选。

11) 6 Checked：默认选项，一打开网页就默认选中该按钮。

<form action="E101-04--08.html" nethod="post">    你来自：    <select name="lalala">        <!-- 选项-->        <option value="33">浙江</option>        <option value="41">河南</option>        <option value="32">江苏</option>        <option value="36">江西</option>    </select>    你喜欢的颜色有：    <!-- size下拉菜单中一次显示三个-->    <select name="ys" multiple size="3">        <option value="86">浅蓝色</option>        <option value="68">天蓝色</option>        <option value="88">红色</option>        <option value="66">白色</option>    </select>    你喜欢那些汽车：    <select name="ys">        <optgroup label="国产:">            <option value="12">红旗</option>            <option value="13">奔驰</option>            <option value="10">五菱</option>            </optgroup>        <optgroup label="日汽:">            <option value="16">三菱</option>            <option value="17">本田</option>            <option value="18">丰田</option>        </optgroup>        </optgroup>        <optgroup label="德汽:" disabled>            <option value="14">宝马</option>            <option value="15">大众</option>        </optgroup>        <optgroup label="日汽:">            <option value="16">三菱</option>            <option value="17">本田</option>            <option value="18">丰田</option>        </optgroup>    </select>    <br>    <input type="submit" value="登录"></form>

按钮：

1) Form（构成）：标签，用于表单提交。

2) Action（行动）：属性，用于form跳转的链接提供地址。

3) Submit（提交）：属性，提交按钮。

4) Reset(重置清零):属性，清零按钮。

5) Value（值）：属性，用于给指定的单位赋值。

6)    Button（按钮）：属性，用于添加各种空白按钮，此中可添加各种多媒体行为。    如例：<button>各种东西</button>），

1.    (<input type="button"value="空白键"                                                   onclick="alert('你好啊！')">，点中显示效果：)

7)    图片按钮：<input type="image" src="123.jpg" alt="登录">

a) （切记，这些标签只能用于form标签中！！！）

8)   Checked（选中的）：默认选项。

9) Action（功能）：指定提交的地址。

10) Method（方法）：指定提交的方式，get/post。

11)  Placeholder（占位符）：写出来的为灰色提示字体。

12)  Div（区分，分开）：块级标签。

<div style="width:300px;height:300px;background:blue;float:left">div1哈哈哈哈</div>
<divstyle="width:300px;height:300px;background:red;float:left">div2呵呵呵呵</div>

13) Width：属性，宽。

14) Height：属性，高。

15) Background（背景颜色）：属性，设置背景颜色。

16) Float：属性，实行。

17) Left：属性，左边。

18) Padding：属性，可用于移动，布局等。

19) Accept：指定可选文件的类型。*号代替全部类型。

下拉列表

1) Select（精选的）：标签。用于定义一个下拉菜单，<select>标签的name属性定义了提交的参数名。

2)    Option（选择权）：标签，用于下拉菜单的列，value属性定义了下拉列表的选项。<selectname="lalala">
    
    <optionvalue="33">浙江</option>

3) Disabled（残缺的）：属性，将当前的目标选项失去被选中的资格。

a)    <select name="ys" multiple size="3">（一次列出三个的）

4) Option（计，选择权）：label属性定义分组显示的文字，disabled设置该分组不能用。

5) Textarea：标签，可以创建一个可以放大缩小的文本框。主要目的是为了输入较多的文字信息。（1）Rows：控制行数的属性。（2）Cols：控制每行字数的属性。

6) Fieldset：标签，可添加一个可添加功能的框。

五、css基础标签

1) Style（风格设计）：标签，用于html文件中的样式设计，在css中不需要。

i. 如：右图à

2) 设置字体大小：font-size: 36px;

3) 设置字体颜色：color: blueviolet;

4) 小写变成大写：font-variant: small-caps;

5)    字体变粗：font-weight: 600;

6) 字体格式：font-family: 宋体;

a) Font-styleà Font-variantàfont-weightàFont-sizeàFont-family

7)    设置字体颜色：color: red;

8)    字体装饰：text-decoration:none;（标准的文本）

1.    text-decoration:underline;（加下划线）

2.    text-decoration:overline;（加一条文字上方的线）

3.    text-decoration:line-through;（加一条删除线）

9)     字体背影平移：text-shadow: red  5px 10px;（+-）。

10)  字体颜色及不透明度：

11)  字体移动：text-indent:50px;（向左移动50字符）

1.    text-align: center;（居中）

2.    text-align: right;（右对齐）

3.    text-align:left;（左对齐）

4.    text-align:justify;（两端对齐，不建议使用）

12)  只有在单元格中才能使用：

1.    vertical-align:top;（顶端）

2.    vertical-align:bottom;（水平靠下）

3.    vertical-align:middle;（水平对齐）

13)  字符间距：word-spacing: 33px;  （字词间距）

1.    Letter-spacing：33px （字符间距）

14)  调整高度：height：20px；

15)  调整宽度：width：20px；

16)  表格外框线宽度：<table border="3">。

17)  表格间距线：<table cellspacing="0">

18) 背景颜色：background-color: blueviolet;。

19)  添加背景图片：background-image:  url("QQ小贱鸡.png");

20)  背景图片是否重叠：background-repeat:no-repeat;

21)  背景图片所在位置：background-position:right bottom;

         i. 也可以封装进一个标签：

ii. background: greenyellowurl("QQ小贱鸡.png")no-repeat right top;

iii. 书写顺序：背景色、背景图片、重复方式、位置。

22) max-width：30px；最大的宽度

23) max-height：30px；最高的高度

24) min-width：30px；最小的宽度

25) min-height：30px；最小的高度

26) 半隐藏：有位置，不显示内容：visibility:hidden;

27)  全隐藏：没位置，没内容：visibility: hidden;

1）Display：可以设置元素的模式。

2）Inline：将块级元素以内联元素形式显示，此时width和height属性无效，

其空间取决于元素内容。

3）Inline-block：将块级元素以内联的元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

div{    height: 300px;    visibility: hidden;    display: none;}

28) 盒子模型：

表外框：border: 20px solid deepskyblue;线条的粗细   边框类型（solid实线）   颜色

      dotted点虚线   dotted线虚线  double双实线   groove(凹槽)

      写在一起的顺序是这样的;outline: 5px dotted darkslategray;

      虚线标签可加在实线标签外面。

29) 外内边距： margin:30px 30px 30px 30px;上下左右的边距。

margin-left：30px单独设置左右外边局。

Margin-top、margin-right、margin-bottom、margin-left。

padding：内边距。（同上面的外边距用法一样）

outline：轮廓线

30)定位：

Position：标签。

   1、固定定位：

关键词（fixed）根据自己定义的属性，相对于浏览器窗口是固定的位置，即使窗口滚动，它也不会东。

 .a{    width: 150px;    height:150px;    background-color: #71b9fe;}.b{     width: 100px;    height:100px;    background-color: cadetblue;    position:fixed;    top: 30px;    left: 30px;}.c{    width: 50px;    height:50px;    background-color:chartreuse;    position:fixed;    top: 55px;    left:55px;}

2、静态定位：

关键词（static）默认的位置，不受影响。

3、相对定位：

             关键词（relative）相对定位元素的定位是相对其正常位置（根元素，即自己原来的位置），不会影响其他的单位，自身所占的空间也不会发生改变。

.a{width: 150px;height:150px;background-color: #71b9fe;}.b{width: 100px;height:100px;background-color: cadetblue;position:relative;top: 30px;left: 30px;}

4、绝对定位：

         关键词（absolute）绝对定位：就是相当于将其“摘”了出来，可以用left进行定位。而后面的单位自动向前一个补位，会影响其他单位。参照父容器。（绝对定位的元素位置相对于离它最近的已定位元素（即父元素）进行对比定位的）其定位的元素位置与文档流无关，因此不占空间，甚至可以重叠到其它文档流中。

5、重叠：

            元素的定位与文档流无关所以它们是可以覆盖页面上的其它元素。

 例如：

.a{    position: absolute;    z-index: -1;}

<img src="4.jpg"height="100px"width="100px" class="a">啦啦啦

X-index：因为设置它的属性为-1，所以会在字体的下方显示。

Z-index：设置元素的堆叠顺序

阅读全文

0 0