HTML4(二)

来源：互联网发布：mac上什么软件处理图片编辑：程序博客网时间：2024/05/19 04:28

上一篇介绍了html是什么和一些简单的html标签，最后简单的介绍了一下通常作为容器使用的span和div标签。div中其实还有一些问题，比如我现在为div标签加一些样式和文字；

<html>    <head>        <meta charset="utf-8">        <title>前端真好玩</title>    </head>    <body>        <div style="width:100px;height:100px;background-color:red;">多出去的怎么办</div>    </body></html>

我们会发现当文字到达div边框的时候文字就会自动换行了，但是当你把中文换成连续输入的英文例如文本处写“thisisagoodday”,会发现超出边框的文字不会自动换行了，这是为什么呢？
因为每一个汉字，计算机都会认出是一个单独的词，每一个汉字都会默认的和其他的汉字进行分隔。但是如果你写英文，计算机不知道多长才算是一个单词，所以产生了如果写连续的英文字母在到达边框的时候也不会换行。

文字分隔符

那么我们怎么才能让计算机认识我们写的每一个单词呢？这里我们就需要在每个单词中间加一个空格，将单词和单词之间隔开，计算机就可以认识了。所以在html中空格的作用就是文字分割符（回车也属于文字分隔符），它们作用就只是用来分割每一个单词的，没有之前的加大间距(换行)的作用。

那我们真正想要在页面上打印空格怎么办呢？

这里就需要提到html编码问题空格的html编码  如果我们想页面有多个空格直接敲空格是不好使的，因为在html里空格是文字分隔符，这里就需要用到编码 ，使用多个就可以达到多个空格的效果了。

同样当我们想要打印”<”和”>”的时候,也需要用到html编码，他们对应的编码格式是：”<” 对应 < “>” 对应 >

这一值得注意的是回车没有html编码，我们可以用<br>标签来代替

继续介绍一些重要的标签

1.<ol></ol>
ol标签叫做有序列表 ol总是和li标签一起出现 <ol><li></li></ol>

<ol>    <li>星期一</li>    <li>星期二</li>    <li>星期三</li></ol>

页面上显示的效果就是这样，会发现每一段文字前面都有序号，这就是有序列表的作用。

ol有一个type属性，这个属性的作用是用来设置每一个子项前面的显示的。默认情况下按照数字来排序的，我们可以改成type=”a” ，这样前面序号是按照小写字母来排序的。type属性的值还可以设置为”i”是按罗马数字排序。ol还有reversed属性,它的值只有一种就是”reversed”，就是使ol下面的子项按照逆序排列。其中还有start属性，他的值大小表示子项序列从第几项开始，例如start="2" 那么li前面的序号显示将从2开始一次排列。
最重要的一点是有序列表我们并不会经常的用它，我们更常用的是他的兄弟无序列表

2.<ul><li></li></ul>
ul是无序列表，用的形式和ol相同，只不过前面的序号都没有了，而是变成了圆点

ul中的type属性是设置子项前面符号样式的，设置成”square”前面的符号就变成方块了，设置成”circle”前面的符号就是空心圆，当然type的默认值就是”disc”实心圆。

ul li 通常用来做导航栏

3.<img>
img是image的意思，img标签是一个但标签，可以把网页上的图片和本地的图片引入到我们的页面上显示。

img标签上有一个src属性，src的属性值是图片的地址<img src="">
src的地址分为三种：

     1. 网站上的url     2. 本地的相对路径     3. 本地的绝对路径

img上的alt属性：这个属性的属性值就是你要添加的图片信息，也叫图片占位符，当图片加载不出来的时候，图片的位置就会显示alt里面设置的文字。

img上的title属性：用法和alt属性一样，如果设置了title属性，当把鼠标移到图片上的时候，就会出现title上设置的文字，title属性也叫做图片提示符

4.<a></a>
a标签中有一个固定要加的属性“href”所以a标签的写法一般是这样

<a href=""></a>

href—->hyperText reference（超文本引用）
所以说href属性中要填的值也就是地址。也就说你想让这个a标签链接到哪里，href属性的值就填哪里。比如

 <a href="http://www.baidu.com">点我跳转</a>

这时当我们点击这个a标签的时候就会跳转到百度了。

a标签中的a是英文anchor（锚点）的缩写，所以我们不难猜出a标签的作用。

(1) <a href="#only">find you!</a>这时我们点击”find you!” 的时候，页面就会id等于only的那个元素的位置,所以a标签的第一个作用就是当作锚点用，也就是定点跳转。
(2) 就像刚才说的这个标签是可以当作超链接来用的，将要跳转的页面地址写在href属性上，点击a标签就可以实现跳转了。

**我们还可以在href属性中写js代码，例如<a href="javascript:while(1){alert("叫你点");}">千万别点</a> 这里的javascript:又叫做协议限定符

**在移动端我们可以通过a标签添加href="phoneto:123xxxxxxxx"，当点a标签的时候就会调出拨打电话的功能

5.<table></table>
table标签又叫做表格标签，他一般是和tr和td标签一起使用的

<table>    <tr>        <td></td>    </tr></table>

其中tr就是表格的行，td就是表格的一个单元，也就是一列；

但是！这个标签现在已经不太常用了

以前经常用table标签来为页面布局，但是当加载页面的时候，本来应该是加载一点执行一点的，table却不是这样，只有将table中的内容全部加载出来才可以在页面上显示的，这样的用户体验不是很好，所以现在基本已经不用table标签了。

下面的标签非常的重要

6.<form></form>
form表单可以实现前端和后台的通信，可以充当数据通信的作用。
介绍一下form表单上的属性：
(1)method : 表示通信的方法，method属性的值有很多种，但是我们一般接触的就只有GET和POST两种.
(2)action : 表示发送信息需到达的目标，所以action属性值就是要发送信息到达的地址。

但是如果单独写一个form表单，打开页面你会发现什么也看不到，其实form表单也是成组出现的，需要在 <form></form>表单中添加东西，我们叫添加的东西为组件。

input组件

<input>是一个单标签，单独写input也不会有什么变化，它会跟着type属性的变化呈现不同的形式

下面介绍几种input标签的type属性值
(1)type=”text”

<form>    <input type="text" name=""></form>

这样写之后页面上的效果就是这样的
这里写图片描述
也就是说text属性值，就是文本输入框的意思。

(2)type=”password”
这个属性值的意思就是密码框，在这里输入的文本信息都会自动变成小圆点，表示保密的密码。

(3)type=”submit”
submit就是提交的意思，也就是说设置了这个属性，就会出现一个提交按钮，我们也可以通过value属性的属性值来设置按钮的文案。

学完这三个属性值之后我们就可以写一个简单的提交信息的表单了，但是我们提交数据需要成键值对的形式提交的也就是name—value,这就需要在input标签里面设置一个name和value属性了

<form aciton="#" method="get">    username:<input type="text" name="username" value="">    password:<input type="password" name="password" value="">    <input type="submit"></form>

这就是一个简单的提交数据的表单，注意：但凡是数据就一定有数据名和数据值。

(4)type=”radio”
这个属性值得意思就是单选框的意思当我们写多个单选框的时候会发现所有的单选框都可以被选中，这是因为我们没有给单选框设置相同的name值，当我们设置了相同的name值之后，他们就表示一组的了就可以满足单选的要求了，这是name值相同的单选框，就只有一个可以被选中。

(5)type=”checkbox”
这个是复选框的意思，基本的用法和radio一样，也需要相同的name值，但是他可以多选。这里我们有时候想要某一个选项默认是被默认选中的，这里就需要添加一个checked=”checked”属性和属性值，这样有该属性的input标签就默认被选中了。

7.<select></select>

select是下拉菜单，这个标签是和成组出现的,用法如下

<select>    <option>Beijing</option>    <option>Shanghai</option>    <option>Tianjin</option></select>

但是这里需要注意的是，提交数据需要的name属性是添加到select上面的，value可以写在每一个option上面，当然如果你不写的话，那么提交的value就是你选中的那个option标签中包裹的文本内容。

0 0