html 新人入門學習資料

時間  2019-12-09
標籤 html 新人 入門 學習 資料 欄目 HTML 简体版
原文   原文鏈接

Day1：html

  1. 1.       表頭的（標註格式的做用）

注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。有些瀏覽器(如 360 瀏覽器)會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。程序員

  1. 2.       <!DOCTYPE html>通常寫在網頁文件的開頭（清除文件中其餘html文件的做用）
  2. 3.       程序自己

A.（基礎程序---標題+主題+字體內容）web

<!DOCTYPE html>(清理文件的做用)編程

<html>瀏覽器

    <head>框架

    <meta charset="utf-8">（標註網頁所在的環境）學習

    <title>易趣，在線購物商城</title>（標註文件的標題：如：網頁叫什麼名字）字體

     </head>（外部環境：head來表達出來）ui

   <body>搜索引擎

    <h1>這是一個標題</h1>（頁面顯示的大標題）

    <P1>這是個人第一個段落</P1>（頁面顯示的段落內容）

    </body>(內部環境：內部標題性的表達)

</html>

 

注意：通常主頁的結構就是按照模板（html大框架+網頁配置網頁名稱+網頁內部文字段落格式），更改通常在body中更改。

  特殊的內部段落的格式排版 ：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>心靈雞湯</title>

    </head>

    <body>

        <h1>哪些老闆常給員工說的哪些話</h1>

        <P1>有句話說，錢是人的膽。</P1>

        <h1>哪些老師常給員工說的哪些話</h1>

        <P1>好好好學習的帶我</P1>

        <h1>哪些老闆常給員工說的哪些話</h1>

        <P1>有句話說，錢是人的膽。</P1>

        <h1>哪些老師常給員工說的哪些話</h1>（加連接時至關於另起段落，可點擊標題）

        <P1>好好好學習的帶我</P1>（兩個 p1屬因而同行的加內容）

    </body>

</html>

顯示的效果：

以下圖所示

    可是在更改它的內部信息時，這個框架未加任何的格式修飾作出來的 html文件

 

<h1> 定義最大的標題。 <h6> 定義最小的標題。

 

B.程序  +連接連接

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>心靈雞湯</title>

    </head>

    <body>

        <h1>哪些老闆常給員工說的哪些話</h1>

        <P1>有句話說，錢是人的膽。</P1>

        <h1>

           <a href="http://www.baidu.com">百度一下，您就知道</a>（字體中含連接）

        </h1>

    </body>

</html>

 

 

 

 

 

 

 

 

C.程序+圖片外聯連接綜合形式

<!DOCTYPE  html>

 <html>

    <head>

     <mate charset="utf-8">

     <title>重慶白底黑字的數據分析兼得數據</title>

    </head>

    <body>

    <h4>咱們都是一個數據中的一部分</h4>

    <p2>好比咱們每一個人都在數據中直接，處理咱們平常的數據，進行

        天天的相應的工做總結上的付出</p2>

    <strong>因此咱們要過好咱們每一天</strong>（加粗內部書寫的字體）

    <a href="http://www.baidu.com">若是你不懂能夠點擊學習</a>

<img src="C:/Users/pc/Desktop/logo.jpg"width="258" height="335"/>

（圖片必須是本級的連接圖片，通常不知道圖片地址的時候，鼠標右鍵屬性，查看位置，「/」能夠更改，圖片自己不須要加.jpg等格式屬性。）

    </body>

 </html>

 

 

 

 

 

 

 

 

Day2

知識點：

1.<br>換行的使用：能夠穿插在段落及標題甚至是完整編程的整句/段截斷-----主要的做用換行。

2.<a href=http://www.baidu.com>  點擊 </a>  

延伸出<a>連接 </a>的做用。

  1. 4.     標籤訂義<hr />水平線下面+水平線

 

              5. <!-- 這是一個註釋 -->這是一個註釋   通常瀏覽器中不會顯示，可是做爲一個代碼程序員解釋的做用。

例如：

 

 

<!DOCTYPE  html>

 <html>

    <head>

     <mate charset="utf-8">

     <title>重慶白底黑字的數據分析兼得數據</title>

    </head>

    <body>

    <h4>咱們都是一個<br>數據中的一部分</h4>

    <p2>好比咱們每一個人都在<br>數據中直接，處理咱們日<br>常的數據，進行

        天天的相應<br>的工做總結上的付出</p2>

     <br>

    <strong>因此咱們要過好<br>咱們每一天</strong>

    <a href="http://www.baidu.com">若是你不懂能夠點擊學習</a>

   <br>

    <img src="C:/Users/pc/Desktop/logo.jpg"width="258" height="335"/>

    <br>

    </body>

 </html>

 

 

 

 

6.<b></b>知識點的將字體加粗

7. <i>斜體文本</i>

8. 這是 <sub> 下標</sub> 和 <sup> 上標</sup>

 

9.<mate>元素

 

及<hesd>元素以內，編輯的主要內容屬於網頁的主要內容，網頁的數據地址/編寫環境/編寫的編寫人等信息

如：

爲搜索引擎定義關鍵詞:

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

爲網頁定義描述內容:

<meta name="description" content="免費 Web & 編程 教程">

定義網頁做者:

<meta name="author" content="Runoob">

每30秒鐘刷新當前頁面:

<meta http-equiv="refresh" content="30">

 

 

10.直接跳轉到另外的頁面及網頁內部存儲圖片功能

<base>

<base href="http://www.baidu.com//images/" target="_blank">

 

它會把圖片保存到網頁形式，就不太須要- 注意這裏咱們設置了圖片的相對地址。能正常顯示是由於咱們在 head 部分設置了 base 標籤，該標籤指定了頁面上全部連接的默認 URL，因此該圖片的訪問地址爲 http://www.baidu.com/images/logo.pngbaidu.com - 注意這個連接會在新窗口打開，即使它沒有 target="_blank" 屬性。由於在 base 標籤裏咱們已經設置了 target 屬性的值爲 "_blank"。

<p><img src="logo.png" > - 注意這裏咱們設置了圖片的相對地址。能正常顯示是由於咱們在 head 部分設置了 base 標籤，該標籤指定了頁面上全部連接的默認 URL，因此該圖片的訪問地址爲 "http://www.runoob.com/images/logo.png"</p>

 

<p><a href="http://www.runoob.com/">runoob.com</a> - 注意這個連接會在新窗口打開，即使它沒有 target="_blank" 屬性。由於在 base 標籤裏咱們已經設置了 target 屬性的值爲 "_blank"。</p>

綜合功能描述：

<!DOCTYPE tml>

<html>

<head>

<mate charset="utf-8">

<title>遠離你身邊的中國式「好人」</title>

<base herf="http://www.baidu.com//images/" target="_blank">

</head>

<body>

<i>阿何有話說</i>

<br>

<br>

<h1>遠離你身邊的中國式「好人」</h1>

<p>有人總結了中國式的八大寬容：

 

大過年的、人都死了、來都來了、都不容易、仍是孩子、歲數大了、爲了你好、習慣就好。

 

有這樣一類人，他們永遠置身事外，卻永遠喜歡指指點點。

 

他們不顧事實地偏袒弱者，以近乎病態的寬容來知足自身的道德優越感。

 

他們習慣稱本身爲心懷寬廣的「好人」，實則是最可怕的一羣人。

 

01

 

知乎網友「汣是我」曾分享過她遇到過的一件事。

 

有一次，她在中午11點的時候點了外賣，是附近的一家沙拉。

 

那時候的她很忙，幾乎沒有時間去吃午餐，若是外賣超過12點15分送到，她就一口都吃不上了。

 

因此她每次都會提早下單、各類備註。

 

結果那天，外賣小哥一開始打電話說「要到了要到了，先給你點送達」，說完就失聯了，1點15分都沒有送到。

 

她打電話過去問，外賣小哥說：「旁邊還有幾棟樓，送完到你。」

 

她說不要了，退單。外賣小哥說：「不行，都快到了，你體諒一下。」

 

她氣憤地說：「體諒什麼？都要餓得胃痛了，並且沙拉曬了那麼久還能吃嗎？」

 

外賣小哥說：「你這人太不友好了，咱們送餐容易嗎？」

 

她說：「我工做就容易了？」以後就被外賣小哥掛了電話。

 

由於實在鬱悶，她在微博上吐槽了這件事，結果被一羣網友狂撕：

 

「隨便投訴別人，害別人罰款扣錢，你說你是否是賤？」

 

「送餐不容易，寬容點好，你這麼狹隘當心往後婚姻生活。」

 

「一看就知道她沒有家人！」

......

 

對於那些觸犯咱們底線的行爲，咱們固然有權利生氣、維權。

 

然而中國式「好人」，卻老是奉勸別人要寬容、要善良，要以和爲貴。

 

郭德綱說過一句話：

 

「不明白任何狀況就勸你必定要大度的人，你要離他遠一點。由於雷劈他的時候會連累到你。」

 

你根本就不瞭解我經歷過什麼，就站在道德高地上評判我，誰給你的資格？</P>

<br>

<br>

<p><img src="logo.jpg"><br><br><br> <strong>你根本就不瞭解我經歷過什麼，就站在道德高地上評判我，誰給你的資格？</strong>  </p>

<br>

<hr/>

<br>

<br>

<p><a href="https://mp.weixin.qq.com/s/NLPXqCvM_AxifCkbpo5Msw/">閱讀更多原文</a> 趕快點擊</p>

 

</body>

</html>

 

 

 

 

 

 

Day 3.

標籤

描述

<b>

定義粗體文本

<em>

定義着重文字

<i>

定義斜體字

<small>

定義小號字

<strong>

定義加劇語氣

<sub>

定義下標字

<sup>

定義上標字

<ins>

定義插入字

<del>

定義刪除字

<em>強調文本</em>

顯示效果：強調文本

<small> Copyright 1999-2050 by Refsnes Data.</small>

顯示效果：

runoob.com - the world's largest web development site.

Copyright 1999-2050 by Refsnes Data.（顯示出的效果，比上一段文字字體小）

 

<p>這個文本包含 <sub>下標</sub>文本。</p>

<p>這個文本包含 <sup>上標</sup> 文本。</p>

顯示效果：

這個文本包含 下標文本。

這個文本包含 上標 文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

顯示效果：

My favorite color is blue red!

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程