web_01_基础知识

一、web标准构成

　　结构：用于对网页元素进行整理和分类，对应于HTML

　　表现：外观样式，对应于css

　　行为：网页交互，对应于JavaScript

二、html标签初识

1、单标签，双标签(成对出现)

　　双标签关系：包含关系、并列关系

2、第一个页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>一分代码一分钱，想要薪资多写代码！</p>
</body>

</html>

3、标签

<!DOCTYPE html> 文档类型的声明标签，指页面采取html5版本显示页面
<html lang="en">  当前文档的显示语言：en——英文 （lang语言种类）

<html lang=" zh-CN">   zh-CN ——中文

<meta charset="UTF-8">  用"UTF-8"字符集保存文字

   

三、html常用标签

1、标题标签<h1>---<h6>

2、<p>段落 </p>、换行标签<br/>      (br 指break，强制换行）

3、文本格式化标签

  <strong>加粗(推荐)</strong>           <b>加粗</b>
  <em>倾斜（推荐）</em>             <i>倾斜</i>
  <del>删除线（推荐）</del>          <s>删除线</s>
  <ins>下划线（推荐）</ins>          <u>下划线</u>

4、盒子标签：（div是divsion,分割，分区，span为跨度跨越）

    <div> 用来布局，一行放一个（大盒子） </div>
    <span>用来布局，一行可放多个 （小盒子）</span>
    <span>111</span>
    <span>222</span>
    <span>333</span>
    <span>444</span>
 
5、图像标签和路径  <img src="图片文件名 " alt=" ">
 

 

 

 如：

   <img src="web_01.jpg" alt="这是小可爱呀">
    <img src="web_01.jpg" title="这是小可爱呀">
    <img src="web_01.jpg" alt="这是小可爱呀" width="200PX">
    <img src="web_01.jpg" alt="这是小可爱呀" width="200PX">
    <img src="web_01.jpg" alt="这是小可爱呀" height="200PX">
    <img src="web_01.jpg" alt="这是小可爱呀" border="15px">

 

 注：

　　①、图像标签可以拥有多个属性，必须写在标签名的后面

　　②、属性不分先后顺序,属性与属性之间用空格分开

　　③、属性采用键值对形式 ，如，key=“ ”，即，属性="属性值";

 

 路径：

　　目录文件夹：就是普通文件夹，里面存放了我么做页面所需要的相关素材，不如html文件，图片等。

　   根目录：打开目录文件夹的第一层就是根目录

 　  相对路径：以引用文件所在位置为参考基础，（图片相当于html页面的位置！）

　　　　　　①、同一级路径（ ）     <img src="web_01.jpg">

　　　　　　②、下一级路径 （/ ）   <img src="images/web_01.jpg">

　　　　　　③、上一级路径 (../ )  　<img src="../web_01.jpg"> (回到上一级载找到图片)

    　　　　　　　　　　　　　    　  <img src="../../web_01.jpg">(回到上上一级)

　   绝对路径:指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

　　　　　　例：<img src="C:\Users\16941\Pictures\so.jpg" >

　　　　　　       <img src="https://p0.ssl.qhimgs1.com/t01497383325fc41f94.jpg" alt="">  网络绝对路径

 

6、链接标签    <a href=" 跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

 

 ·

连接分类、

　　①、外部链接  、  <a href="http://oeasy.org/" target="_blank"> oeasy</a>

　　②、内部链接、   网站内部之间的相互链接，直接链接内部的网页名称  <a href="index.html">内部链接</a>

　　③、空链接 、<a href="###">空链接</a>

　　④、下载链接：地址链接的是 文件.exe 或者是zip等压缩包的形式  

<a href="web_01.zip"> 下载链接</a>

 　　⑤、网页元素的链接、在网页中的各种网页元素，如文本，图像，表格，音频，视频都可以添加超链接

　　⑥、锚点链接、快速地定位到页面中的某个位置 

　　　　在链接文本的href属性中，设置属性值为 #名字 的形式，如，<a href="#jane"> 锚点链接</a>

　　　　找到目标位置标签，里面添加一个id属性，如，<h1 id="jane">简爱</h1>

 

 7、注释标签    <!-- 内容 -->   快捷键： ctrl+/

8、特殊字符标签  &lt; &gt; &nbsp;

  

posted @ 2020-10-25 11:16  鄧、先森  阅读(86)  评论(0)    收藏  举报