Web前端—基本结构的属性、基本元素、图片标签

基本结构中的属性
定义HTML文档，这个元素浏览器看后就知道这个是个HTML文档，所以你的其他元素包裹在他的里面，标签限定了文档的起始点和结束点。在它们之间是文档的头部和主体。

<html>
          <head>
                   <title>我的第一个HTML页面 </title>
          </head>
          <body>
                     <p>body 元素的内容会显示在浏览器上。</p>
         </body>
</html>

<head>标签用于定义文档的头部，它是所有头部元素的容器。
<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的各种属性和信息，包括文档的标题、在web中的位置以及其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容展示给读者。
可运用到head的标签：
<title> :
1.可定义文档的标题
2.它显示在浏览器窗口的标题栏或状态栏上
3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称
4.<title>标签是<head>标签唯一必须包含的东西 title写和你网页相关的关键词有利于SEO优化
补充：SEO(搜索引擎优化)，通过对网站内容调整，满足搜索引擎的排名需求，提高自己网站被搜索引擎平台录取的几率，把精准用户带到网站。网站都有目标群体，通过title,meta标签可以让目标群体通过关键词搜索找到你的网站，定义的关键词很重要。

<meta>：元素可提供有关页面的元信息（meta-information）,用来像浏览器或搜索引擎描述页面。比如文档的描述和关键词，它只可以放在head中。属于元信息标签。
常见的meta有
Keywords(关键字) keywords用来告诉搜索引擎网页的关键字是什么。

<meta name="keywords" content="web前端，cqupt">

description(网站内容描述) description 用来告诉搜索引擎你的网站主要内容。
<link>：引入外部的CSS样式
<style>：引入内部样式
<script>：引入JavaScript
把<head>标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签之前
文档的头部经常会包含一些标签，用来告诉浏览器关于文档的附加信息。
标签之间可以相互嵌套，但要注意嵌套顺序
Web前端—基本结构的属性、基本元素、图片标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片标签</title>
</head>
<body >
<!--
<img/>注意：单标签，必须有属性src
1.src 引入图片
2.width 宽 height高 单位：像素（px） 百分比
3.alt当图片未能正常显示时，用于给用户提示信息
4.title
5.border 边框
-->
<img src="images/Together.jpg" width="350px" height="600px"  border="2px" title="Corleone Yao & Skye Zeng"/><br>

</body>
</html>

Web前端—基本结构的属性、基本元素、图片标签

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

</head>
<body>
    <!--
       超链接 <a> </a>
       注意：1.有开始和结束标签 2.必须有属性herf 3.网站链接地址 http://开头 4 本地连接必须加后缀
           5.标签可以嵌套
       属性：
           1.herf 链接URL
              绝对路径
                  互联网地址： 格式：http://域名
                  本地绝对地址：格式：file://盘符/目录...（禁止使用）
              相对路径（相对于自己当前位置）
                  ./代表当前目录
                  ../代表上一级
             2.target 代表新窗口的位置
             属性值 _blank在新的窗口打开
                   _self在本地窗口打开（默认值）
             3.title 定义了鼠标经过时的提示文字
             -->>
    <a href="http://www.baidu.com" target="这是百度"><img src="images/sunset.jpg" width="600px"></a>
    <a href="http://www.sina.com.cn" target="_blank">新浪</a>

    <a href="first.html">跳转到本地</a>
</body>
</html>

Web前端—基本结构的属性、基本元素、图片标签 PS:欢迎补充和指正

Web前端—基本结构的属性、基本元素、图片标签

相关推荐