前端是从哪里开始的4?

297 阅读4分钟

前言:因为本人很喜欢番茄,连头像都设成了番茄,我觉得生活就是需要有自己喜欢的东西的 陪伴,哪怕只是一个照片呢~ 你说呢?

今天分享的是关于HTML我们在前三节没有讲到的点,,,,,,,,,,

HTML 补充

4-1 url 协议

URL协议:全称:Uniform Resource Locator,中文:统一资源定位符(是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, 是互联网标准资源的地址。互联网上的每个文件都有协议规定格式)

常见的协议有:httphttpsftpJavaScript


4-2 img 标签

看例子:

  <img src="./imges/1.jpg" title="鼠标悬停时显示的文本" border="1"  width="200"  alt="图片未能加载时显示的替换文本">

4-2-1 关于路径

  • dos中的cd命令就是让当前的命令行进入某个路径下。

  • cd命令格式:cd 路径

  • “./”表示当前目录

  • cd ../ 返回上一级菜单(../表示上一级)

  • cd ../../ 返回相对于当前目录的上两级菜单

  • cd C:\Users\malunmac\ 直接到c盘的一个具体位置,这就是绝对路径。

  • 相对路径: / ../ ../../ 两个文件之间的相对情况

  • 绝对路径:

1、C:\Users\  

2、http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

4-3 图片的类型及特点

  • jpg 色彩还原高,适合复杂颜色图片,比如banner

  • gif 色彩效果最低,支持透明,支持动画,适合颜色比较少,不适合渐变色。

  • png

    PNG的优点是,清晰,无损压缩,压缩比率很高,可渐变透明,具备几乎所有GIF的优点;缺点是不如JPG的颜色丰富,同样的图片体积也比JPG略大。

  • PNG有着另一个优点,那就是逐次逼近显示(progressive display):传输图像文件的同时,可以先把整个轮廓显示出来,然后逐步显示图像的细节,即先显示低分辨率显示图像,从模糊到清晰,然后逐步提高它的分辨率。这是一个很好的用户体验。

总结:

gif 和 png 基本差不多,色彩比较少的直接 gif,如果图片动画用 gif。对色彩要求高的用 jpg 。

4-4 input 标签

input控件的基本语法格式如下:

<input type="text" name="txtName" value=''>

注:1.在上面的语法中,<input>标记为单标记,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。

注:2. 除了type属性之外,<input>标记还可以定义很多其他的属性,其常用属性 如下表所示:


4-5 文本域

如果需要输入大量的信息,就需要用到 <textarea> </textarea> 标记。通过textarea控件可以轻松地创建多行文本输入框

<textarea rows="4" cols="20">这是文本的内容</textarea>

注: 两个属性:

Rows:值是整数,显示多少行,高度

Cols:值是整数,显示多少列,宽度


4-6 select 控件

如果想要在网页中实现下拉列表,则 需要select 标签

  <select>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">天津</option>
    <option value="4">重庆</option>
  </select>

注:在上面的语法中,<select> </select> 标记用于在表单中添加一个下拉菜单

注:<option> </option> 用于定义下拉菜单中的具体选项

注: 每对 <select> </select> 中至少应包含一对 <option> </option>


4-7 内联框架标签

iframe标签,元素会创建包含另外一个文档的内联框架(即行内框架)。

 <iframe src="http://www.baidu.com" frameborder="1" width="400" height="400"></iframe>

注:可以设置高度和宽度(height,width)

去掉边框:frameborder 设置为 0

Src 属性,可以是相对路径或者绝对路径


4-8 form 表单标签

在HTML中,<form> </form> 标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,<form> </form> 中的所有内容都会被提交给服务器

代码:

<form method="post" action="#"></form>

注:Form表单的两个属性

method属性用于设置表单数据的提交方式,其取值为get或post

Action属性用于指定表单数据提交到后台哪个地址处理,不指定默认提交回当前请求的地址


4-9 link 标签

属于头部标签,需要放到head标签中。 引入DNS预先解析 dns预解析(了解)


<link rel="dns-prefetch" href="http://mimg.127.net">

引入网站icon图标:


<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />

引入css样式,【后面讲】 放在head标签中。


<link rel="stylesheet" href="css/bg.css">

好啦, 今天是周六, 也不要忘记充实自己哦~

谢谢阅读!

下节内容:html到底是什么呢?