我的位置:首页 > 前端>html学习笔记

html学习笔记

时间:2019-05-10 19:45:00 来源:互联网 作者: 神秘的大神 字体:

Html的学习

                                                                                                                                -------关于我为啥要学html:

         web方面很多东西都和html有一定的关系,在杂七杂八看了一堆东西之后,觉得还是要去打好基础,所以就决定去学习html,为以后的各种骚操作打基础

html代码检查网站https://validator.w3.org

在线学习网站http://www.w3school.com.cn

网页模板:

      每个网页都包括html,head , title, meta和body元素

<!DOCTYPE html>

<html lang=”en”>                     lang用于指定文档书面语言的属性

<head>                                     页头

<title>文件的标题</title>

<meta charset=”utf-8”>            meta显示网站特征,比如字符编码等

</head>

<body>                                     主体部分

文件的主体

</body>

</html>

 

 

 

 

2.1标题元素:

    标题分为h1到h6六级,<h1>最大,<h6>最小。这个标题是放在body内的,用于所写文章的标题。

2.2段落:

    <p>和</p>之间的文本形成段落

       <br>表示换行(丢在哪都可以)例:<p>这个:<br>是实验</p>

       <hr>表示水平标尺(其实就是画一条长直线,一般不用)例:<p></p><hr>

       <blockquote>表示块引用元素(其实就是对文本进行缩进)例:<p>你好:</p><blockquote>我是<blockquote>

       短语元素指定容器标记之间的文本的上下文与含义(类似于word的加粗,加下划线等功能)详细操作可以百度

       有序列表和无序列表和描述列表:

  1. 有序列表(可以对列表的东西进行排序,但是必须用<ol>,否则就不行)

<ol>

<li>BLUE</li>

<li>red</li>

<li>WHITE</li>

                                   </ol>

  1. 无序列表(不对列表的元素进行排序,但是前面可以有个小圆点)

用法和有序列表相同,但是无序列表的开头是<ul>

  1. 描述列表

描述列表以<dl>标记开始,以</dl>结束;每个要描述的语句以<dt>开始

以</dt>结束;每项描述的内容以<dd>标记开始,</dd>结束

       例子:

<body>

<h1>Heading level 1</h1>

<dl>

       <dt>TCP</dt>

       <dd>TCP的内容</dd>

       <dt>IP</dt>

       <dd>IP的内容</dd>

</dl>

</body>

       关于特殊字符

              可以参考这个网站http://www.w3school.com.cn/html/html_entities.asp

2.11结构元素:

    除了常规性的div元素,html5还引入了许多语义上的结构元素来配置网页区域.

             

分为

  1. Div元素

Div元素在网页中创建一个常规结构区域,块元素以<div>开始,以</div>结束

  1. Header元素

Header元素的作用是包含网页文档或文档区域的标题,以<header>开始,以</header>结束.header通常包含一个或多个标题元素(<h1>到<h6>)

  1. Nav元素

作用是建立一个导航链接区域。块显示元素,以<nav>开始,以</nav>结束

  1. Main元素

作用是包含网页文档的主要内容。每个网页只因有一个main,以<main>开始,以</main>结束

  1. Footer元素

作用是为网页或网页区域创建页脚,以<footer>开始,以</footer>结束

例子:

<!DOCTYPE  html>

<html lang="en">

<head>

    <title>Trillium Media Design</title>

    <meta charset="utf-8">

</head>

<body>

<header>

  <h1>Heading level 1</h1>

</header>

<nav>     编码nav元素来包含主导航区域的文本

  <b>Home  &nbsp; Services &nbsp; Contact</b>            b表示加粗

</nav>

<main>

  <h2>New Media and Web Design</h2>

  <p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services.</p>

  <h2>Meeting Your Business Needs</h2>

  <p>123456789</p>

 <div>

       <strong>Casita Sedona Bed &amp; Breakfast</strong><br>

       612 Tortuga Lane<br>

       Sedona, AZ 86336<br>

  </div>

</main>

<footer>

   <small><i>456789</i></small>         i表示斜体

</footer>

</body>

</html>

 

 

2.13锚元素:

       锚元素的作用是定义超链接,它指向你想显示的一个网页或者文件。锚元素以<a>标记开始,以</a>j结束。两个标记之间是可以点击的链接文本或者图片。用href属性配置链接应用,即要访问(链接到)的文件的名称和位置。

       例子:<a href=” https://www.baidu.com/”>baidu</a>(然而用www.baidu.com就不行)

              Href=”绝对链接”(绝对链接:协议名称http://和域名

       但是如果要链接到自己网站内部的网页时,可以使用相对链接(这种链接的href值不以http://开头,也不含域名,只需要包含想要显示的网页文件名(或者文件夹和文件名的组合))

       例如:为了从主页index.html链接到同一文件夹下的contact.html,就可以直接<a href=”contact.html”>Contact</a>

      

新建文件夹保存多个网页

       访问的方法

       <nav>

  <b>

     <a href="index.html">Home</a> &nbsp;

     <a href="services.html">Services</a> &nbsp;

        <a href="contact.html">Contact</a>

  </b>

</nav>

电子·邮件链接:

    锚标记也可以用于创建电子邮件链接,和外部链接相似但是有两点不同:

  1. 它使用mailto:,而不是http://
  2. 它打开浏览器配置的默认邮件程序,将E-mail地址作为收件人

例如,要创建指向help@webdevbasics.net的电子邮件链接,要按如下方法

        <a href=”mailto:help@webdevbasics.net”>help@webdevbasics.net</a>

<li>E-mail:

<a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a>

</li>

 

 

 

HTML的基础学习到此结束