HTML基础知识(常见成分、列表、链接成分、图片成分)

1、HTML有关概念

1、HTML有关概念

万事俱备: Hyper Text 马克up Language(超文本标记语言)
其文件扩张名字为“.html”或“.htm”

万事俱备: Hyper Text 马克up Language(超文本标记语言)
其文件扩充名字为“.html”或“.htm”

     * 超文本 – 在一般的文书基础上,添加超链接、图片、音频或摄像等

     * 超文本 – 在平凡的文书基础上,添加超链接、图片、音频或摄像等

     * 标记 – 标记正是HTML中的标签(成分),特点:<a>

     * 标记 – 标记正是HTML中的标签(成分),特点:<a>

* 语言 – 如今指标所能识其他

* 语言 – 近日目的所能识其他

本子: HTML 四.0一 <肆.01与4.0不是贰个本子>; HTML 五;
XHTML:严苛版本的HTML

本子: HTML 四.0一 <四.0壹与4.0不是二个版本>; HTML 五;
XHTML:严峻版本的HTML

  • Ø 基本构造:
  • Ø 基本结构:

 图片 1

 图片 2

 附:<!doctype html>:
阐明版本,则浏览器能够先行明白文书档案类型,从而科学显示网页内容

 附:<!doctype html>:
注明版本,则浏览器能够先行领会文书档案类型,从而科学展现网页内容

<meta charset=”UTF-捌”> : 设置编码格式

<meta charset=”UTF-8″> : 设置编码格式

meta标签提供了元数据(不出示在页面上,但会被浏览器解析)。

meta标签提供了元数据(不展现在页面上,但会被浏览器解析)。

meta成分常用于钦点网页的叙述、关键词、文件的最终修改时间、小编、和任何元数据。元数据可使用浏览器(怎么样展示内容或另行加载页面),搜索引擎(关键词),或别的Web服务。

meta成分常用于内定网页的叙说、关键词、文件的终极修改时间、小编、和其它元数据。元数据可选择浏览器(如何体现内容或再度加载页面),搜索引擎(关键词),或别的Web服务。

eg:为寻找引擎定义关键词、为网页定义内容、为网页定义小编….

eg:为寻找引擎定义关键词、为网页定义内容、为网页定义小编….

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<meta name=”description” content=”Free Web tutorials on HTML and
CSS”>

<meta name=”description” content=”Free Web tutorials on HTML and
CSS”>

<meta name=”author” content=”King”>

<meta name=”author” content=”King”>

  • Ø 元素
  • Ø 元素

空成分 – 只有开头标签,未有终止标签;

空成分 – 唯有开头标签,未有甘休标签;

起先成分 – 具有开端标签和终止标签 —–成对出现

起初成分 – 具有起初标签和竣事标签 —–成对出现

注: 成分名(大小写均可)- W3C预约义,提议选用小写

注: 元素名(大小写均可)- W3C预约义,建议选用小写

  • Ø 属性
  • Ø 属性

效益:定义当前成分的音信            格式:属性名=”属性值”  

成效:定义当前成分的消息            格式:属性名=”属性值”  

(a.属性必须定义在上马标签中   b.同2个因素具有多少个属性)

(a.属性必须定义在开首标签中   b.同多少个要素具有几个属性)

i   通用属性 – 差不离拥有的HTML成分都负有的品质

i   通用属性 – 大概全数的HTML元素都独具的性情

  id: 表示方今因素的标识(唯壹的)        name: 表示近日成分的称谓

  id: 表示近来因素的标识(唯一的)        name: 表示方今成分的称号

  style: 表示定义CSS样式              class: 表示定义CSS样式

  style: 表示定义CSS样式              class: 表示定义CSS样式

i 私有属性 – 有个别成分独有的属性

i 私有属性 – 有个别成分独有的习性

  • Ø 注释
  • Ø 注释

效益:解释当前的要素的成效          特点:不会显得在浏览器的页面中

作用:解释当前的因素的效果          特点:不会显得在浏览器的页面中

  格式:<!– 注释内容 –>               火速键:CTCR-VL + ?

  格式:<!– 注释内容 –>               快捷键:CTSportageL + ?

2、HTML常见成分

2、HTML常见成分

ü  标题 <h1> ~ <h6> (常用的<h1> ~
<h3>,尤其是<h1>)

ü  标题 <h1> ~ <h6> (常用的<h1> ~
<h3>,尤其是<h1>)

       <h一>:用于搜索引擎抓取HTML页面

       <h一>:用于搜索引擎抓取HTML页面

寻找引擎抓取HTML内容时,优先级:

搜索引擎抓取HTML内容时,优先级:

      <title>成分中的内容 大于 <meta name=”keywords”
content=””>大于<h1>元素

      <title>成分中的内容 大于 <meta name=”keywords”
content=””>大于<h1>元素

ü  段落 <p></p>   

ü  段落 <p></p>   

特征:自动换行,行间距相比大

本性:自动换行,行间距相比较大

eg:  <p> </p>  <p></p>

eg:  <p> </p>  <p></p>

   或  <p> </p>

   或  <p> </p>

图片 3

图片 4

<p> </p>

<p> </p>

eg: <p> <br> </p> 

eg: <p> <br> </p> 

 图片 5

 图片 6

ü  <hr> – 水平线       

ü  <hr> – 水平线       

ü  <br> – 换行      [快捷键 – 标签名 + TAB]

ü  <br> – 换行      [快捷键 – 标签名 + TAB]

3、列表

3、列表

(壹)有体系表      (二)冬辰列表        (三)定义列表

(一)有连串表      (二)冬天列表        (叁)定义列表

      <ol>             <ul>              <dl>     
   – 表示定义列表

      <ol>             <ul>              <dl>     
   – 表示定义列表

         <li></li>         <li></li>       
  <dt></dt>   – 表示列表项(列表的标题)

         <li></li>         <li></li>       
  <dt></dt>   – 表示列表项(列表的标题)

      </ol>             </ul>           
   <dd></dd>  – 表示列表项的叙述(列表项)

      </ol>             </ul>           
   <dd></dd>  – 表示列表项的叙说(列表项)

                                             </dl>

                                             </dl>

 图片 7

 图片 8

稳步列表 type属性:规定列表类型一、A、a、l、i; start属性:规定起首数字

稳步列表 type属性:规定列表类型一、A、a、l、i; start属性:规定初叶数字

快捷键:标签:*数量 + TAB;   alt+鼠标左键

快捷键:标签:*多少 + TAB;   alt+鼠标左键

四、链接成分

四、链接成分

   格式:<a href=” “></a>

   格式:<a href=” “></a>

   属性:<a href=”当前要跳转到的地方”></a>     <a
name=”当前因素的名号”></a>

   属性:<a href=”当前要跳转到的地方”></a>     <a
name=”当前因素的名号”></a>

a链接会自失眠划线,若去除下划线,则  a{ text-decoration: none;}

a链接会自腰痛划线,若去除下划线,则  a{ text-decoration: none;}

href:去往的路径即跳转的页面(必写属性)

href:去往的门道即跳转的页面(必写属性)

title:提示文本,也正是鼠标放到链接上显示的文字

title:提醒文本,也正是鼠标放到链接上出示的文字

target = ’_self ’   
暗许值,在小编页面打开(关闭自个儿页面,打开链接页面) 

target = ’_self ’   
默许值,在自笔者页面打开(关闭本人页面,打开链接页面) 

target = ’_blank ’  打开新页面 (本人页面不停歇,打开二个新的链接页面)

target = ’_blank ’  打开新页面 (本身页面不停歇,打开三个新的链接页面)

职能: 完成页面跳转(默许);
完毕回到顶部[锚点(#name)]即指向某一定地方;完结发送邮件

意义: 落成页面跳转(默许);
实现回到顶部[锚点(#name)]即指向某一定地方;达成殡葬邮件

eg: <a name=”top”>那是下边</a>

eg: <a name=”top”>那是上面</a>

    <a href=”mailto:8232876九@qq.com” >邮箱地址</a>

    <a href=”mailto:8232876玖@qq.com” >邮箱地址</a>

    <a href=”#top” >回到顶部</a>      <a href=”#middle”
>回到中间</a>

    <a href=”#top” >回到顶部</a>      <a href=”#middle”
>回到中间</a>

² 相对路径

² 相对路径

即相对于文件本人出发,正是相对路径。

即相对于文件本人出发,便是相对路径。

文本和图纸(html文书档案)在同2个目录(文件夹) ,直接写文件名。

文本和图表(html文书档案)在同1个目录(文件夹) ,间接写文件名。

 图片 9

 图片 10

图表(html文书档案)在文件在下顶尖目录里。文件夹名称/图片(html)名称

图表(html文书档案)在文书在下一级目录里。文件夹名称/图片(html)名称

 图片 11

 图片 12

图表(html)在文件的上一级目录里,.. /图片(html)名称

图表(html)在文书的上顶级目录里,.. /图片(html)名称

 图片 13

 图片 14

图表在文书的上一流的别的目录里,../文件夹名称/图片名称

图形在文书的上一级的别样目录里,../文件夹名称/图片名称

 图片 15

 图片 16

²  相对路径

²  相对路径

图片 17

图片 18

图片 19

图片 20

伍、图片成分

5、图片成分

<img src=”当前引入图片的路径”  alt=” text文本”  width=”图片宽度”
 height=”图片中度” >

<img src=”当前引入图片的路子”  alt=” text文本”  width=”图片宽度”
 height=”图片中度” >

                           图片成分的加载原理

                           图片元素的加载原理

图片 21

图片 22

 

 

 

 

 

 

 

 

 

 

相关文章