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

文章目录

  • 标签
    • 先说input这一簇
      • 获取信息: input
      • 标记: label
      • 表单: form
    • 再说table这一簇
      • 表格: table
      • 表格行: tr
      • 表格头: th
      • 表格内容: td
    • 行内元素
      • 一些特点
        • 行内元素不支持设置width和height
        • display用来设置元素显示的类型
      • 行内加关注:span
  • 再来说说文本
    • 文本内
      • 字体: font-family
      • 斜体文字: font-style
      • 字体加粗: font-weight
      • 字体大小: font-size
      • 字母间距,单词间距
      • 如何处理空白符? white-space
      • 转换大小写: text-transform
    • 文本外
      • 对齐方式: `text-align`
      • 缩进: text-indent
        • 首行缩进
        • 首行悬挂
        • 其他示例
      • 文本方向 : direction
      • 文字行高: line-height
      • 文本装饰: text-decoration
    • 还有其他常用的
      • img: 导入图片

标签

先说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> 

051 <css语法> 学习之: 常用标签(input等)_第1张图片
如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。这个参见form

在 HTML 中, 标签没有结束标签。
标签用于搜集用户信息。

输入字段的形式(type字段)有:
051 <css语法> 学习之: 常用标签(input等)_第2张图片
使用示例参考:HTML 标签的 type 属性

标记: label

其中,

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

在这里插入图片描述

表单: form

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

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

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

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" />

051 <css语法> 学习之: 常用标签(input等)_第3张图片
051 <css语法> 学习之: 常用标签(input等)_第4张图片
其中:

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


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

  • legend
    legend 元素为 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>Monthth>
		    <th>Savingsth>
	  tr>
	  <tr>
		    <td>Januarytd>
		    <td>$100td>
	  tr>
table>

051 <css语法> 学习之: 常用标签(input等)_第5张图片

标签定义 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

标签定义 HTML 表格中的行。

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

表格头: th

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

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


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

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

表格内容: td

table-docs
下面是

的一些属性:

  • align: 规定单元格中内容的水平对齐方式。
    值有left,right,center,justify(每行拉长到相同长度)
  • colspan:规定单元格可横跨的列数。
    示例如下:
<table width="100%" border="1">
	 <tr>
		   <th>Monthth>
		   <th>Savingsth>
	 tr>
	 <tr>
			<td>Januarytd>
			<td>1000000td>
	 tr>
	 <tr>
	   		<td colspan="2">Februarytd>
	 tr>
table>

051 <css语法> 学习之: 常用标签(input等)_第6张图片

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

  • rowspan: 规定单元格可横跨的行数。
  • valign: 规定单元格中内容的垂直排列方式。
    值有top,上对齐。
    middle,居中对齐(默认值)。
    bottom,下对齐。
    baseline,基线对齐。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。
    051 <css语法> 学习之: 常用标签(input等)_第7张图片

行内元素

一些特点

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

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

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

  • 可以设置padding,border,margin
    但是垂直方向padding不会影响页面布局
    但是垂直方向border不会影响页面布局
    但是垂直方向margin不会影响页面布局
.s1{
	background-color:yellow;
}
.box1{
	background-color:red;
	width:200px;
    height:200px;    
}

"s1">这是span
"box1">这是div

051 <css语法> 学习之: 常用标签(input等)_第8张图片

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

值可以设置为:

inline : 将原始设置为行内元素
block : 将元素设置为块元素,如果应用于行内元素,就可以设置widthheight
inline-block : 行内块,既可以设置widthheight,又不会独占一行.
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;
	}

"tip">提问1:你学习好努力是为了什么?

"tip">回复1:是为了自由?

在这里插入图片描述

再来说说文本

  • 先说说单位:

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 ;}

This is a paragraph.

This is a paragraph.(sans_serif)

This is a paragraph.(serif)

This is a paragraph.(monospace)

This is a paragraph.(cursive)

This is a paragraph.(fantasy)

051 <css语法> 学习之: 常用标签(input等)_第9张图片
也可以指定某种具体的字体. 但为了避免有的浏览器没有这种字体,常结合通用字体使用:

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

斜体文字: font-style

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

"normal">This is a paragraph, normal.

"italic">This is a paragraph, italic.

在这里插入图片描述

字体加粗: 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}

"slim">This is a paragraph ----100

This is a paragraph ---- Normal Size

"thick">This is a paragraph ----thick

"thicker">This is a paragraph ----900

051 <css语法> 学习之: 常用标签(input等)_第10张图片
注意:

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

字体大小: font-size

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

This is a paragraph in the body

This is a paragraph 字体继承自div

This is a paragraph body中默认的

'double'>This is a paragraph 自行设置的

051 <css语法> 学习之: 常用标签(input等)_第11张图片
-基于父元素的,还有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;}

This is heading 1

This is heading 2

This is a paragraph.

This is a paragraph.

051 <css语法> 学习之: 常用标签(input等)_第12张图片

此外还有:

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

字母间距,单词间距

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

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

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


"">Do you like me so much.

"letter">Do you like me so much.

"word">Do you like me so much.

051 <css语法> 学习之: 常用标签(input等)_第13张图片
对于中文的适配,单词形式的扩张不能用:

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

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

051 <css语法> 学习之: 常用标签(input等)_第14张图片

如何处理空白符? white-space

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

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

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

  • pre
p {white-space: pre;}

This(2 space) paragraph has(Tab) many(next line) spaces in it.

在这里插入图片描述
上面的有一个问题,就是文本行很长时,又没有换行符时,不会自动换行,解决就用:

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

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

051 <css语法> 学习之: 常用标签(input等)_第15张图片

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

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

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

051 <css语法> 学习之: 常用标签(input等)_第16张图片

  • 只是不让换行
    与normal相比,只是不让自动换行. 除非使用了一个 br 元素。
p{white-space: nowrap}

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

在这里插入图片描述

转换大小写: text-transform

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

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

"uppercase">Be BEGGER.Or be smaller (原文)

"uppercase">Be BEGGER.Or be smaller

"lowercase">Be BEGGER.Or be smaller

"capitalize">Be BEGGER.Or be smaller

051 <css语法> 学习之: 常用标签(input等)_第17张图片

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

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

文本外

对齐方式: text-align

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

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

051 <css语法> 学习之: 常用标签(input等)_第18张图片
注意:

标题 1\

不会生效,因为h1没有text-align属性. 所以要应用style样式.
此外,还有属性值:

text-align:center

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

缩进: text-indent

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

首行缩进
p.indent {text-indent: 2em}

这是段落中的一些文本。它会缩进.

这是段落中的一些文本。它不会缩进,真的.

在这里插入图片描述

首行悬挂
p.indent {text-indent: -2em; padding-left: 2em;}

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

这是段落中的一些文本。它不会缩进,真的.

051 <css语法> 学习之: 常用标签(input等)_第19张图片

其他示例
  • 使用百分数值
div {width: 500px; border-style:solid;}
p {text-indent: 20%;}

<div>
<p>this is a paragraghp>
div>

在这里插入图片描述

  • text-indent 属性可以继承,比如,下面的段落1 继承了 id 为 inner 的 div 元素的缩进值。
div#outer {width: 500px; border-style: solid; }
div#inner {text-indent: 10%;}

"outer">
"inner">In inner, There are some text. some text. some text.

Inside innner, this is a paragragh 1.

outside innner, this is a paragragh 2.

051 <css语法> 学习之: 常用标签(input等)_第20张图片

文本方向 : direction

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

"right2left">Some text. Right-to-left direction.
"left2right">Some text. Left-to-right direction.
"ex1">Some text. Right-to-left direction.

在这里插入图片描述

文字行高: 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; 
}

"high">I have suffered a lot before.

"">I have suffered a lot before.

"low">I have suffered a lot before.

051 <css语法> 学习之: 常用标签(input等)_第21张图片
注意:

如果设置段落行高,使用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}

这是标题 1

这是标题 2

这是标题 3

"http://www.w3school.com.cn/index.html">这是一个链接

051 <css语法> 学习之: 常用标签(input等)_第22张图片

还有其他常用的

img: 导入图片

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

标签没有结束标签。从技术上讲, 标签并不会在网页中插入图像,而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
有两个必需的属性: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 标签的 usemap 属性

你可能感兴趣的:(项目,笔记,css,html,html5)