HTML基础知识（二）

一、空格（回车）：文字分割符，几个都等于一个；
在html中，当你在编码区输入空格（回车）时，不论输入几个，均在页面上显示为一个空格。

此时，如果想要现实很长的间隔（好几个空格），可以用 。
 ：html的空格编码形式，写几个空几个；

二、替换标签,less than,great than缩写；<相当于<小于号，>相当于>大于号。

三、<br>代表换行的意思--回车，不是成对出现的；
补充：一般标签是成对出现的，修饰包裹在里面的东西，而<br>标签一个就足以代表它的功能，所以这里不需要成对出现。

四、<hr>横条（单独使用，不成对）：

如图：

 五.有序列表：有序展示

1．<ol>为单选，<ul>为多选。
<ol>--列表架
<li>内容1</li>--列表项
<li>内容2</li>
</ol>

（1）.正序排
a.type="1"默认值是1，所以不写1和写1都是一样的；

代码及其效果：

b.按小写字母排序：

 c.按大写字母排序：

 

 d.按图案排序：

 

e.按小写、大写罗马数字排序：

 

 （2）.reversed=“reversed” 倒序排；

（3）.从某个数开始排：

start="2",从2开始排，可以直接写数字，会自动转换为你的type类型。

 2．<ul> type="disc"，实心圆， type="square"实心方块，type="circle"空心圆

   <li></li>

   <li></li>

</ul> 父子结构

 

六、img 图片标签

1. 在新标签页中打开图片，找到图片的服务器地址；

2.相对路径

当图片为绝对路径时，

3. 绝对路径，父子级

 

相对路径引用示例：

 

绝对路径引用示例：

 

  

讲解绝对、相对路径：（1）.一般情况下使用相对路径的频率更高。

原因：如果你使用绝对路径c:/website/img/photo.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件，但是当你将页面上传到网站的时候就很可能会出错了，因为你的网站可能在服务器的c盘，可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由会有c:/website/img/photo.jpg这样一个路径。那么，在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢？对，应该是用相对路径，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。

（2）.把页面传到服务器上就总是出现看不到图片，css样式表失效等错误。

原因：这种情况下多半是由于你使用了错误的路径，在应该使用相对路径的地方使用了绝对路径，导致浏览器无法在指定的位置打开指定的文件。

 

3.图片占位符：alt="文字描述"，因为后期写错了图片的编码，导致图片加载不出来时，加载出来的文字。（容错信息）。

4.图片提示符：title="文字描述"，鼠标指到图片上时出现一行小字。

5.超文本引用 href  

跳转链接：<a href="网址">显示给用户的网址</a>

 示例：

6.<a>标签可以包裹任何东西，像淘宝里的图片、文字、css都行，在本标签页打开。

7.在新的标签页打开：target="_blank"空页

8.发送信息:

 

 可以前端工程师给后端工程师发送信息：数据名+数据值

<form method="get" action="">

<!--method：发送数据的方式，get：发送给的地址-->

显示用户使用页面时的输入框、密码等：
<input type=“text” name="数据名（登录账户）">--输入框 单标签
<input type="password" name="数据值（登录密码）">--密码框 写出来是密码的样子（隐藏字符）

代码示例：

 

 <input type="submit" value="login">--提交按钮

<!--value：是用来改按钮中显示的文字-->
</form>

提交成功后网址会发生改变，前面数据名，后面数据值；

发送信息2：
贝克汉姆<input type="radio" name="1" value=“贝克汉姆”>
莱昂纳多<input type="radio" name="1" value=“莱昂纳多” >
name：数据名
value：数据值

代码示例：

 

<input type="submit">
三个单选项，通过name 告诉你是一道选择题里面的，这样选项间就互斥了。

如图：

 

<form>传输信息的表单
复选框：
apple<input type="checkbox" name="" value="默认的内容" 默认选中checked="checked">
下拉菜单选项:
<select name="">用父子结构统一写数据名，数据值（value）<option>里有
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
</form>