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

小咪咪 2022-09-06 01:34 97阅读 0赞

### 文章目录 ###

*  标签
 *   *  先说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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]  
如果您点击提交，表单数据会被发送到名为 demo\_form.asp 的页面。这个参见form

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

输入字段的形式(type字段)有:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]  
使用示例参考:[HTML 标签的 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>

![在这里插入图片描述][3a7c2b4d02d14784b3542e3c27f2c155.png]  
<label> 标签为 input 元素定义标注。在 label 元素内点击文本，就会触发此控件。

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

### 表单: form ###

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

其中, 标签用于为用户输入创建 **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" />

![在这里插入图片描述][b6ef2424f7f34cf0b30271a49a94dc0d.png]  
![在这里插入图片描述][1a069155e4db4242be2783d77b43b1a5.png]  
其中:

> form 属性规定 input 元素所属的一个或多个表单。(多个时,空格分开)  
>   
>   
> form 属性的值必须是其所属表单的 id。

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

![在这里插入图片描述][5d5c076fa789450188dbc7fd903338f2.png]  
注意: 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>

![在这里插入图片描述][1c061caa1a8247de8b9c3f7abb2a609b.png]  
<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>

![在这里插入图片描述][6eeee94caba045398d13c139f9820947.png]

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

*  `rowspan`: 规定单元格可横跨的行数。
 *  `valign`: 规定单元格中内容的垂直排列方式。  
    值有top,上对齐。  
    middle,居中对齐（默认值）。  
    bottom,下对齐。  
    baseline,基线对齐。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 2]

## 行内元素 ##

### 一些特点 ###

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

#### 行内元素不支持设置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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 3]

#### 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>

![在这里插入图片描述][a1d8e1dccf0d456d9a6a833bcc6d74a4.png]  
可以看到,它们的显示并无二致.那么,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>

![在这里插入图片描述][679e8f3ab39e48c6af7d1ec9cde48bfd.png]

# 再来说说文本 #

*  先说说单位:

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 4]  
也可以指定某种具体的字体. 但为了避免有的浏览器没有这种字体,常结合通用字体使用:

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>

![在这里插入图片描述][b098853e4c6a4defb0fa0c7b6152afdf.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 5]  
注意:

> 如果将元素的加粗设置为 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 6]  
\-基于父元素的,还有`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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 7]

此外还有:

*  还可以根据父元素尺寸调节  
    `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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 8]  
对于中文的适配,单词形式的扩张不能用:

p.letter {
    	letter-spacing: 20px;
    }
    p.word{
    	word-spacing: 20px;		
    }
    
    <p class="">原文: 这是个啥嘛!</p>
    <p class="letter">字母: 这是个啥嘛!</p>
    <p class="word">单词: 这是个啥嘛!</p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 9]

### 如何处理空白符? white-space ###

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

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

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

*  pre

p {
        white-space: pre;}
    
    <p>
    This(2 space)  paragraph has(Tab)		many(next line)
    spaces           in it.
     </p>

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

*  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>

![在这里插入图片描述][42fd79b6942245f6ac86a30521de1877.png]

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

*  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

![在这里插入图片描述][b609dd25e5a64ac39fe26ed172acd4e3.png]

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

p{
        white-space: nowrap}
    
    <p>
    有空格 一些文本。
    有TAB			一些文本。
    这是一些文本。
    这是一些文本。
    这是一些文本。
    这是一些文本。
    哈哈哈到我这儿才完!
    </p>

![在这里插入图片描述][37a25426daef446286fb8ed2ac749664.png]

### 转换大小写: 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 10]

*  文本中图像的垂直对齐方式：参见[垂直对齐][Link 2]

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

## 文本外 ##

### 对齐方式: `text-align` ###

h1 {
      text-align: center;
    }
    
    h2 {
      text-align: left;
    }
    
    h3 {
      text-align: right;
    }
    
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 11]  
注意: `<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>

![在这里插入图片描述][12a645f4459849d0a250d46ad0c1e59e.png]

#### 首行悬挂 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 12]

#### 其他示例 ####

*  使用百分数值

div {width: 500px; border-style:solid;}
    p {text-indent: 20%;}
    
    <div>
    <p>this is a paragragh</p>
    </div>

![在这里插入图片描述][f097cb519df145c9ab18ebd8bb275e1a.png]

*  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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 13]

### 文本方向 : 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>

![在这里插入图片描述][3a3f3ab779524956b686661e3e8482fd.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 14]  
注意:

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 15]

## 还有其他常用的 ##

### img: 导入图片 ###

<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 属性][HTML _img_ _ usemap]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]: /images/20220829/4286555284e3438d94498662695c4bf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/6186bdc5ad5849639a85df997bb79a25.png
[HTML _ type]: https://www.w3school.com.cn/tags/att_input_type.asp
[3a7c2b4d02d14784b3542e3c27f2c155.png]: /images/20220829/5312812336a84cd4814d1b5e0698d385.png
[b6ef2424f7f34cf0b30271a49a94dc0d.png]: /images/20220829/25d8254af4894aa2938d02c724c00190.png
[1a069155e4db4242be2783d77b43b1a5.png]: /images/20220829/17850c78b84941baaa71ba5c976c3d82.png
[5d5c076fa789450188dbc7fd903338f2.png]: /images/20220829/8b5ce1ec7e4540e99cfb0a08433438b1.png
[1c061caa1a8247de8b9c3f7abb2a609b.png]: /images/20220829/f54bda51e0b4417dabbf565cf4a483f0.png
[6eeee94caba045398d13c139f9820947.png]: /images/20220829/28e071fa11d946da8cf640a863e74da3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/dc0b83504e2a4085af5e6d2b51e9332e.png
[Link 1]: https://www.bilibili.com/video/BV1XJ411X7Ud?p=52
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/c095067559a04334a485db70807bfcd4.png
[a1d8e1dccf0d456d9a6a833bcc6d74a4.png]: /images/20220829/aa3e43263b6c4c1bac49251258aa37b3.png
[679e8f3ab39e48c6af7d1ec9cde48bfd.png]: /images/20220829/d6691ca1b0ef447bacc5c454fb55ac05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/36a2d73d45a64e63acb6ccd199d1f6c1.png
[b098853e4c6a4defb0fa0c7b6152afdf.png]: /images/20220829/b54f695cb227421b97626879c1f3251a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/34ce9cb2922941e1a6a4d7108638e690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/a3b99d8bf9d147fda3b6f5fb949dd448.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/39e22a88b4394a0fac9e44bd6e3bb016.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/9740d4a78c084132b45d26fc78537fde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/8609a4f893d64743a6d9303f04eae29c.png
[9acc5b61318f417aaba4cad2d77b4ebe.png]: /images/20220829/f81501b9ebb44bdeb58017f4f7e58190.png
[42fd79b6942245f6ac86a30521de1877.png]: /images/20220829/6ae8f226b16146f097617d5c58bc08c0.png
[b609dd25e5a64ac39fe26ed172acd4e3.png]: /images/20220829/6b91d02f6199409fb2a40622fd6246f4.png
[37a25426daef446286fb8ed2ac749664.png]: /images/20220829/684d927d05564877aedcb4ef76da7f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/90911995e53046abb75897d99d4a65bf.png
[Link 2]: https://www.w3school.com.cn/css/css_text_align.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/148e86f3afe94148a07076f651ecf2a4.png
[12a645f4459849d0a250d46ad0c1e59e.png]: /images/20220829/5290408e296d41e0b7bfbe6b66542d77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/4af96737c1a34b5f89db643d55d9b3d4.png
[f097cb519df145c9ab18ebd8bb275e1a.png]: /images/20220829/a9b2eed36e7d4a479314c4ed8c18c1e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 13]: /images/20220829/c731066c9c8946b98c687f13f7b8ab24.png
[3a3f3ab779524956b686661e3e8482fd.png]: /images/20220829/ea90d07c004546a3865c7e56d1af3013.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 14]: /images/20220829/55916d5a19f54a28bdc863f6c0b93742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 15]: /images/20220829/e0062b24eb504febac0087142409f68d.png
[HTML _img_ _ usemap]: https://www.w3school.com.cn/tags/att_img_usemap.asp