前端成长记录-第一天

该文章主要写了如下几个方面：
1.前端包含的内容
2.常见的浏览器及其内核
3.html基本结构及标签
4.图片img标签的用法
5.在html中几种常见的相对路径

一、前端简介

前端主要包括以下三种内容：
1. html:在网页中真实存在的文本、图片、输入框、按钮、音视频等都属于html的范畴
2. css:就是给HTML进行装饰的内容
3. javaScript(简称js):网页中进行交互的内容一般都是js
常见浏览器及其内核：
1. IE：trident内核
2. Firefox:gecko内核
3. safari:webkit内核
4. Chrome:webkit的分支blink内核
web标准
Web标准由万维网联盟（W3C）制定的用于规范web编写的标准集，主要包含以下内容：
1. 结构：html
2. 表现：css
3. 行为：javascript

二、 HTML

HTML简介
HTML（Hyper Text Markup Language）:超文本标记语言，主要是通过HTML标记对网页中的文本、图片、按钮等内容进行描述。
学习HTML就是学习其中的各种标签/标记/元素。

html基本标签

	    <!DOCTYPE html>  
	    <html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title></title>
	    </head>
	    <body>     
	    </body>
	    </html>

HTML基本标签解释
1. <!DOCTYPE html> ：版本类型声明，告诉浏览器你用的哪个版本的语言书写的
2. <html></html>：网页的根标签，包括头部<head></head>标签和主体<body></body>标签两大部分
3. <head></head>：头部标签，关于网页的配置信息，该标签里的内容不能直接在网页中体现
4. <meta>：用于配置一些头部信息，比如字符集charset等等，常见的charset如下：
  1. utf-8:目前最常见的、包含世界上所有国家的字符。
  2. gb2312：简单中文，包括6763个汉子
  3. BIG5:繁体中文，港澳台等地使用
  4. GBK:包含全部中文字符，是GB2312的扩展，支持繁体字，兼容gb2312
5. <title></title>：标题标签，该标签中的内容显示在浏览器的选项卡中
6. <body></body>：主体标签，所有直接在网页中显示的内容都要写在该标签下。
HTML常用标签
1. <h1></h1>:标题标签,一共有6级
2. <hr>:水平线标签
3. <p></p>:段落标签
4. <font></font>:文本标签
5. <br>:换行标签
6. <!–注释–>
7. <img>:图片标签
标签的类型
1. 双标签：有开始有结束的标签，列如：<body></body>标签、<p></p>标签、<h1></h1>标签
2. 单标签（自结束标签）：只有一个开始标签，例如：<hr>标签、<br>标签、<img>标签
标签间的关系
1. 嵌套/包含/祖先与后代的关系，例如：<html><body></body></html>之间的关系
2. 并列/同级/兄弟关系，例如：<head></head>标签和<body></body>标签之间的关系

图片标签及其属性
插入图用<img>标签标记，语法如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="图片的路径" 
         width="设置图片的宽度，默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" 
         height="设置图片的高度，默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" 
         border="设置图片的边框" 
         title="用于设置鼠标悬停时的提示文字" 
         alt="当图片加载不出来时，出现的提醒文字">
    </body>
    </html>

路径

路径：网页和其他文件的位置关系
路径是忽略大小写的

相对路径

同级相对路径

网页和其他文件在同一个文件夹目录下，有两种书写方式：

    <!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>   
          <!--第一种  -->
          <img src="mm.jpg">
          <!-- 第二种 ./表示当前文件所在目录-->
          <img src="./mm/jpg">
    </body>
    </html>

下一级相对路径

当其他文件在另一个目录下时，需要准确的写出目录的名字，有几个写几个；

目录名/目录名/…/文件名称相当于双击鼠标的动作

    <!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>   
          <img src="wc/1/mm.jpg">
    </body>
    </html>

上一级相对路径

网页在其他文件夹下时，需要返回上一级，有几级就返回几级
…/…/…/文件名称，是鼠标点击返回的动作

	                <!DOCTYPE html>  
	                <html lang="en">
	                <head>
	                    <meta charset="UTF-8">
	                    <title></title>
	                </head>
	
	                <body>   
	                      <img src="../../../mm.jpg">
	                </body>
	                </html>

如有错误，欢迎斧正；如有疑问，欢迎留言讨论。

前端成长记录-第一天

猜你喜欢