051 ＜css语法＞ 学习之: 常用标签(input等)

标签

先说input这一簇

获取信息: input

一个样例

<form action="/demo/demo_form.asp">
   First name:<br>
   <input type="text" name="firstname" value="Mickey"><br>
   
   Last name:<br>
   <input type="text" name="lastname" value="Mouse"><br><br>
   <input type="submit" value="Submit">	
</form> 

如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。这个参见form

在 HTML 中，<input> 标签没有结束标签。
<input> 标签用于搜集用户信息。

输入字段的形式(type字段)有:

使用示例参考:HTML 标签的 type 属性

标记: label

其中,<label>标签的示例:

<form>
	<label for="male">Male</label>
	<input type="radio" name="sex" id="male" /><br />
	
	<label for="female">Female</label>
	<input type="radio" name="sex" id="female" />
</form>

<label> 标签为 input 元素定义标注。在 label 元素内点击文本，就会触发此控件。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

表单: form

在前面的示例中,点击提交，表单数据会被发送到名为 demo_form.asp 的页面

<form action="/demo/demo_form.asp">
	...
	<input type="submit" value="Submit">
</form> 

其中, 标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
表单除了可以包含input,label外,还可以包括menus、textarea、fieldset、legend 元素.
其中:

action 属性:指出当提交表单时，会提交到名为 “/demo/demo_form.asp” 的页面。值可以是绝对url，或相对url


method：规定用于发送 form-data 的 HTTP 方法。表单数据可以作为 URL 变量（method=“get”）或者 HTTP post （method=“post”）的方式来发送。
post 或get 方法都能传输表单。get方法会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔，适合发送只有少数简短字段的小表单。它更简单，但安全性稍差。 但是，如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。举例:
一个表单,包含2个参数,编码后是: x=28&y=66
如果表单采用了 method=GET，那么用来引用服务器端应用程序的 URL 将是:http://www.example.com/example/program?x=28&y=66


target: 规定在何处打开 action URL。可以是_blank

• input标签中,也可以有form

<form action="/example/html5/demo_form.asp" method="get" id="form1">
      First name: <input type="text" name="fname" /><br />
      <input type="submit" value="提交" />
</form>
Last name: <input type="text" name="lname" form="form1" />

其中:

form 属性规定 input 元素所属的一个或多个表单。(多个时,空格分开)


form 属性的值必须是其所属表单的 id。

• legend
  legend 元素为 fieldset 元素定义标题.
  而<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

注意: fieldset 拥有属性 form: 规定 fieldset 所属的一个或多个表单。
还有name,disabled,都是html5才有.

再说table这一簇

表格: table

<table border="1">
	  <tr>
		    <th>Month</th>
		    <th>Savings</th>
	  </tr>
	  <tr>
		    <td>January</td>
		    <td>$100</td>
	  </tr>
</table>

<table> 标签定义 HTML 表格。
它由一个或多个 tr、th 或 td 元素组成。其中:

tr 元素定义行，按一行一行的进行定义~
th 元素定义表头，头就是列名,或者叫字段名
td 元素定义表格内容~

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

表格的属性:

border 规定围绕表格内边框的外边框宽度。内边框一直是1px.但是在border=“0”，可以显示没有边框的表格。


建议:使用CSS来规定以下属性:
width="400"; 或 width="100%";
另外,align规定表格相对周围元素的对齐方式。bgcolor规定表格整体颜色

表格行: tr

table-row
<tr> 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

表格头: th

table-head. HTML 表单中有两种类型的单元格：

表头单元格 - 包含表头信息（由 th 元素创建），th内部的文本通常会呈现为居中的粗体文本。


标准单元格 - 包含数据（由 td 元素创建）, td 元素中的文本一般显示为正常字体且左对齐。

他们两个的可选属性完全一样，将在td小节中讲解。
如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性。

表格内容: td

table-docs
下面是<th>和<td>的一些属性:

• align: 规定单元格中内容的水平对齐方式。
  值有left,right,center,justify(每行拉长到相同长度)
• colspan:规定单元格可横跨的列数。
  示例如下:

<table width="100%" border="1">
	 <tr>
		   <th>Month</th>
		   <th>Savings</th>
	 </tr>
	 <tr>
			<td>January</td>
			<td>1000000</td>
	 </tr>
	 <tr>
	   		<td colspan="2">February</td>
	 </tr>
</table>

不能这样使用: colspan="0"

• rowspan: 规定单元格可横跨的行数。
• valign: 规定单元格中内容的垂直排列方式。
  值有top,上对齐。
  middle,居中对齐（默认值）。
  bottom,下对齐。
  baseline,基线对齐。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
  

行内元素

一些特点

参考视频:尚硅谷 行内元素的盒模型

行内元素不支持设置width和height

它的宽,高 是由内容决定的

• 可以设置padding,border,margin
  但是垂直方向padding不会影响页面布局
  但是垂直方向border不会影响页面布局
  但是垂直方向margin不会影响页面布局

.s1{
	background-color:yellow;
}
.box1{
	background-color:red;
	width:200px;
    height:200px;    
}

<span class="s1">这是span</span>
<div class="box1">这是div</span>

display用来设置元素显示的类型

值可以设置为:

inline : 将原始设置为行内元素
block : 将元素设置为块元素,如果应用于行内元素,就可以设置width和height了
inline-block : 行内块,既可以设置width和height,又不会独占一行.
table : 将元素设置为一个表格
none : 元素不在页面中显示,也不占位置,可以用css伪类设置下滑页

设置可见不可见的,还有visibility:

默认visible
hidden: 元素隐藏,但占着坑

行内加关注:span

• span视觉无添加

<p><span>some text.</span>some other text.</p>

可以看到,它们的显示并无二致.那么,span用来干什么呢?
通过为 span 应用 id 或 class 属性，这样就可以增加适当的语义了,其中,class 用于一组元素，而 id 用于标识单独的唯一的元素。

也可以有另一种用法,示例就是用行元素p来控制行内元素span.

• 一个用例

p.tip span {
	font-weight:bold;
	color:#ff9955;
	}

<p class="tip"><span>提问1：</span>你学习好努力是为了什么?</p>
<p class="tip"><span>回复1：</span>是为了自由?</p>

再来说说文本

• 先说说单位:

1 em = 16px,是一个普通文本的字体大小.在设置字体大小(font-size)时，em 的值会相对于父元素的字体大小改变。 为了避免IE文本调整的问题,可以使用 em 单位代替 pixels。


百分比值: 相对于缩进元素父元素的宽度(width)。

文本内

字体: font-family

通用字体是一类拥有相似外观的字体. CSS 定义了 5 种通用字体系列：

*{text-align:center;}
p.sans_serif  {font-family:sans-serif;}
p.serif  {font-family:serif;}
p.monospace  {font-family:monospace;}
p.cursive   {font-family:cursive;}
p.fantasy   {font-family:Fantasy ;}

<p>This is a paragraph.</p>
<p class=sans_serif>This is a paragraph.(sans_serif)</p>
<p class=serif>This is a paragraph.(serif)</p>
<p class=monospace>This is a paragraph.(monospace)</p>
<p class=cursive>This is a paragraph.(cursive)</p>
<p class=fantasy>This is a paragraph.(fantasy)</p>

也可以指定某种具体的字体. 但为了避免有的浏览器没有这种字体,常结合通用字体使用:

p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

斜体文字: font-style

p.normal {font-style:normal}
p.italic {font-style:italic}

<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>

字体加粗: font-weight

100 ~ 900 为字体指定了 9 级加粗度。
Normal=400
bold=700
thick=900

p.slim {font-weight: 100}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

<p class="slim">This is a paragraph ----100</p>
<p>This is a paragraph ---- Normal Size</p>
<p class="thick">This is a paragraph ----thick</p>
<p class="thicker">This is a paragraph ----900</p>

注意:

如果将元素的加粗设置为 bolder，浏览器会让字体比所继承值更粗.
与此相反，有关键词 lighter 降低加粗度。

字体大小: font-size

• 常用的尺寸
  xx-small,x-small,small,medium(默认),large,x-large,xx-large
• % : 把 font-size 设置为基于父元素字体大小的一个百分比值。

div {font-size: 200%}
<p>This is a paragraph in the body</p>

<div>
<p>This is a paragraph 字体继承自div</p>
</div>
<p>This is a paragraph body中默认的</p>
<p class='double'>This is a paragraph 自行设置的</p>

-基于父元素的,还有em单位:
以px为单位,不太灵活 ;不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em：pixels/16=em.

父元素改变font-size时,如20px,则16->20

允许所有浏览器缩放文本的大小,更加稳妥的办法,是 body 元素（父元素）以百分比设置默认的 font-size 值

• 结合使用百分比和 EM

body {font-size:100%;}
h1 {font-size:3.5em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

此外还有:

• 还可以根据父元素尺寸调节
  smaller ; bigger

字母间距,单词间距

letter-spacing 属性,修改字符(字母)间距
word-spacing 属性,修改字(单词)间距
两者的可取值,包括所有长度。

默认值:0。
属性接受一个正长度值或负长度值。
以字间距为例,如果word-spacing提供一个正长度值，那么字之间的间隔就会增加。
为 word-spacing 设置一个负值，会把它拉近

p.letter {
	letter-spacing: -2px;    # 字符间距,还可以3px
}
p.word{
	word-spacing: 20px;		# 单词间距,还可-5px
}


<p class="">Do you like me so much.</p>
<p class="letter">Do you like me so much.</p>
<p class="word">Do you like me so much.</p>

对于中文的适配,单词形式的扩张不能用:

p.letter {
	letter-spacing: 20px;
}
p.word{
	word-spacing: 20px;		
}

<p class="">原文: 这是个啥嘛!</p>
<p class="letter">字母: 这是个啥嘛!</p>
<p class="word">单词: 这是个啥嘛!</p>

如何处理空白符? white-space

white-space属性,影响浏览器处理字之间和文本行之间的空白符的方式.

• 默认值是normal,会把所有空白符合并为一个空格。

但是也可以让它不忽略这些空白符:

• pre

p {white-space: pre;}

<p>
This(2 space)  paragraph has(Tab)		many(next line)
spaces           in it.
 </p>

上面的有一个问题,就是文本行很长时,又没有换行符时,不会自动换行,解决就用:

• pre-wrap

p {white-space: pre-wrap; border-style:solid;}

<p>
我要保留换行符和其他空白符a great    many		s p a c e s   										
我要自动换行 its textual  content, but their    preservation    will  not prevent
line   wrapping or line breaking.
</p>

空白符太多也有点不整洁,那就,只保留换行符,允许自动换行,把其他的抹掉:

• pre-line

p {white-space: pre-line; border-style:solid;}

<p>我要保留换行符a great    many		s p a c e s   										
我要自动换行 its textual  content, but their    preservation    will  not prevent
line   wrapping or line breaking.</p

• 只是不让换行
  与normal相比,只是不让自动换行. 除非使用了一个 br 元素。

p{white-space: nowrap}

<p>
有空格 一些文本。
有TAB			一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
哈哈哈到我这儿才完!
</p>

转换大小写: text-transform

text-transform 属性用于指定文本中的大写和小写字母。

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

<p class="uppercase">Be BEGGER.Or be smaller (原文)</p>
<p class="uppercase">Be BEGGER.Or be smaller</p>
<p class="lowercase">Be BEGGER.Or be smaller</p>
<p class="capitalize">Be BEGGER.Or be smaller</p>

• 文本中图像的垂直对齐方式：参见垂直对齐

指定文本的方向 / 书写方向。
指定添加到文本的装饰效果。如超链接无下划线__
文本的阴影效果
指定应如何向用户示意未显示的溢出内容。
指定文本的垂直对齐方式。

文本外

对齐方式: text-align

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>

注意: <h1 text-align: center>标题 1\</h1> 不会生效,因为h1没有text-align属性. 所以要应用style样式.
此外,还有属性值:

text-align:center 与 <CENTER>的区别 :text-align 不会控制元素的对齐，而只影响内部内容。<CENTER>不仅影响文本，还会把整个元素居中。
justify 在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

缩进: text-indent

缩进是应用于块级元素的,无法用于行内元素.如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

首行缩进

p.indent {text-indent: 2em}

<p class=indent>这是段落中的一些文本。它会缩进.</p>
<p>这是段落中的一些文本。它不会缩进,真的.</p>

首行悬挂

p.indent {text-indent: -2em; padding-left: 2em;}

<p class=indent>
这是段落中的一些文本。它会首行缩进.text-indent 设置为负值时,会“悬挂缩进”，但对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，要再设置一个外边距或一些内边距.
</p>
<p>这是段落中的一些文本。它不会缩进,真的.</p>

其他示例

• 使用百分数值

div {width: 500px; border-style:solid;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

• text-indent 属性可以继承,比如,下面的段落1 继承了 id 为 inner 的 div 元素的缩进值。

div#outer {width: 500px; border-style: solid; }
div#inner {text-indent: 10%;}

<div id="outer">
  <div id="inner">In inner, There are some text. some text. some text.
      <p>Inside innner, this is a paragragh 1.</p>
  </div>
  <p>outside innner, this is a paragragh 2.</p>
</div>

文本方向 : direction

div.right2left{direction: rtl}
div.left2right{direction: ltr}
div.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}

<div class="right2left">Some text. Right-to-left direction.</div>
<div class="left2right">Some text. Left-to-right direction.</div>
<div class="ex1">Some text. Right-to-left direction.</div>

文字行高: line-height

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

默认值: normal设置合理的行间距。
当使用数字number时,设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
当使用百分比%时,基于当前字体尺寸的百分比行间距。

p{border-style: solid;}
p.high {
	line-height: 1.8;	
    border-style: solid;     
}
p.low {
	line-height: 0.8;	
    border-style: solid; 
}

<p class="high">I have suffered a lot before.</p>
<p class="">I have suffered a lot before. </p>
<p class="low">I have suffered a lot before.</p>

注意:

如果设置段落行高,使用max-height,对元素的高度设置一个最高限制。
值可以是100px,或100%(定义基于包含它的父级块级对象的百分比最大高度。)


与此相对,min-height设置元素的最小高度。用法与上面一样.

文本装饰: text-decoration

修饰的颜色由 “color” 属性设置。
若有多个装饰,用空格隔开。

h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>

还有其他常用的

img: 导入图片

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

<img> 标签没有结束标签。从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
有两个必需的属性：src 属性 和alt 属性。

src: 图像 的url
alt: 规定图像的替代文本。说明多于 1024 个字符，那么可以使用 longdesc 属性来设置指向它的链接。
height:值单位可以是px,或%,定义图像的高度。width一致.
align:left 把图像对齐到左边,right middle top bottom

• ismap 属性

<a href="/example/html/form_action.asp">
	<img src="/i/eg_tulip.jpg" ismap />
</a>
<p>点击这幅图像，点击坐标会以 URL 查询字符串发送到服务器。</p>

当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件（在本例中是 demo_form.asp 程序）可以根据这些坐标来做出响应。

• usemap 属性
  应用如: 将一幅图像 planets.gif 映射为 3 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。
  更多查看链接:HTML <img> 标签的 usemap 属性