ホームページ > 記事 > ウェブフロントエンド > HTML-はじめに_html/css_WEB-ITnose

HTML-はじめに_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:51:061032ブラウズ

HTMLとは何ですか?

HTMLはWebページを記述するために使用される言語です

HTMLはハイパーテキストマークアップ言語(Hyper Text Markup Language)です

HTMLは言語ではなくマークアップ言語です

HTMLの新機能

用途絵画キャンバスタグ

ビデオおよびオーディオ要素

ローカルオフラインストレージをより適切にサポートするために、新しい特別なコンテンツ要素

：記事、フッター、ヘッダー、ナビゲーション、セクション

> ;

HTML にもさまざまなバージョンがあり、ページで使用されている正確な HTML バージョンを完全に理解することによってのみ、ブラウザーは HTML ページを完全に正しく表示できます。それが 1a309583e26acea4f04ca31122d8c535 の目的です。

<!-- HTML 5： --><!DOCTYPE html><!-- HTML 4.01: --><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”><!-- XHTML 1.0: --><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML 基本タグ:

html---すべてのタグは要素を表すために使用され、要素はペアで表されます。始まりがあり、終わりがある。要素の終わりを示すには「73a6ac4ed44ffec12cee46588e518a5e」を使用します。要素の先頭と要素の終わりの中間が要素のコンテンツです。

<!DOCTYPE html><html><head>    <title></title></head><body></body></html>

head---「head」を定義するために使用される情報。次のようなものです。エンコード形式

このエンコード形式を定義する必要があります。定義されていない場合、プレビュー中に文字化けが表示されます

。

<html> <!-- en代表英文，zh代表中文 -->    <head lang = "zh">    </head>    <body>        我就是要在body里面直接写文字。哼哼。    </body></html>

エンコーディング UTF-8 を定義すると、テキストが正常に表示されるようになります。

<html> <!-- en代表英文，zh代表中文 -->    <head lang = "zh">         <!-- 编码格式“UTF-8” -->        <meta charset = "UTF-8">    </head>    <body>        我就是要在body里面直接写文字。哼哼。    </body></html>

body---メインテキストを表すために使用され、通常はページのコンテンツを表示します。すべての基本的な Web ページのコーディングは本文で行われます。 title タグに加えて、いくつかの特別なタグがあります

title--- タイトルを表すために使用されます

h--- タイトルを表すために使用されます。それぞれ異なるものを表すために h1、h2、h3、h4、h5、h6 が使用されます。 text

rreee

のサイズ

p---段落を表すために使用されます

実際、p タグは本文に直接書いたのと同じ効果がありますただし、 p タグは本文にテキストを直接記述する場合、テキストを折り返すことはできません

<html> <!-- en代表英文，zh代表中文 -->    <head lang = "zh">         <!-- 编码格式“UTF-8” -->        <meta charset = "UTF-8">        <!--  标题 “Hello HTML” -->        <title>我是title，我就是浏览器的标题，O(∩_∩)O</title>            </head>    <!-- 用来显示正文 -->    <body>        我是body，你看到我了吗？         <h1>我是h1，我是最大的，O(∩_∩)O</h1>        <h2>我是h2，我是还算比较大了啦~</h2>        <h3>我是h3，我还算正常吧。</h3>        <h4>我是h4，我不是太大</h4>        <h5>我是h5，我怎么这么小？？</h5>        <h6>我是h6，我是最小的，T_T</h6>    </body></html>

HTML 属性

タグには、要素の詳細情報を提供する属性を含めることができます。フォームに表示されるキー/値です。例: href = "www.baidu.com"

共通のタグ属性:

040a8a15d8ad23cbb829774910e71a9d

f800d4160a1380b3ed3c4d7d1cc32100

0d035abfc44c7545796b08b57fb26447

一般属性:

class

style

一般属性は、後でこの名前を使用してラベルの名前を定義し、スタイルを変更できます。

36e1541c805bbfe2d2e1d0f9ace679d4---そのプロパティについて

<html> <!-- en代表英文，zh代表中文 -->    <head lang = "zh">         <!-- 编码格式“UTF-8” -->        <meta charset = "UTF-8">        <!--  标题 “Hello HTML” -->        <title>我是title，我就是浏览器的标题，O(∩_∩)O</title>            </head>    <!-- 用来显示正文 -->    <body>       我就是要在body里面直接写文字。哼哼。        我是第二行。        我是第三行。         <p>我还是老老实实呆着小p里面吧~</p>        <p>我是第二行。</p>        <p>我是第三行。</p>    </body></html>

b06b333258e05196653f3ffaf90a4a03---背景色

<html>    <head lang = "zh">        <meta charset = "UTF-8">    </head>    <body>        <h3 align="center">我是标题3，我是center居中的属性</h1>        <h3 align="left">我也是标题3，我是left左对齐的属性</h1>        <h3 align="right">我还是标题3，我是rigth右对齐的属性</h1>    </body></html>

fe6a2f80d4124875a12e5f756260fab0--- ハイパーリンクの属性には、URL を入力できます

0d035abfc44c7545796b08b57fb26447---target は、ハイパーリンクをクリックした後に開くメソッドです。デフォルトはselfです。_banlkに設定すると、新しいタグで開くことができます。ページが開きます。

すごいです

クリックすると、新しいタブページが表示されます

HTMLの書式設定

下付き文字は書式設定の使用です

タグ

説明

7956b5caf3cf54d05df341871318f62b大きなテキストを定義します907fae80ddef53131f3292ee4f81644b強調テキストを定義します5a8028ccc7a7e27417bff9f05adf5932 斜体テキストを定義しますfda1720b885000015fa956a59b9c863b小さいテキストを定義しますc7000f18278549256c0e5bea8258f7bf下付きテキストを定義しますff62dd5b0eb4f8a56d59ca2561aedd0d定義マークのテキスト < ;ins>挿入テキストを定義823db3943044a0a9a620ada8d4b1d965削除テキストを定義

<html>    <head lang = "zh">        <meta charset = "UTF-8">    </head>    <body>        <b>我是b标签格式，我是加粗的</b>        <br /><br />        <big>我是big，我是显示大字体</big>        <br /><br />        <em>我是em，我代表着重语气</em>        <br    /><br />        <i>我是i，我定义斜体的文字</i>        <br /><br />        <small>我是small，我定义小号字体</small>        <br /><br />        <strong>我是strong，我定义加重语气</strong>        <br /><br />        我的出现是为了体现出sub是下标的<sub>我是sub，我是下标文字</sub>        <br /><br />        我也是出了让sup体现上标的<sup>我是sup，我是下标文字</sup>        <br /><br />        <ins>我是ins，我是插入文字，我有一条下横线</ins>        <br /><br />        <del>我是del，我是删除文字，我中间有条横线代表我已经被删除了。</del>    </body></html>

HTML样式

外部样式表

使用link可以用来调用css更改标签样式

e2dc2971d9340b3653455e3cdf6523af

这个link要写在头文件里面，也就是head标签里面，一般样式都会写在head里面。写在头文件里面比较方便，而且后期如果想要更改，也可以很快的找到link

html代码

<html>    <head lang = "zh">        <meta charset = "UTF-8">        <link rel="stylesheet" type="text/css" href="hello_css.css">    </head>    <body>        <h1>我是标题1，我会被hello_css.css给引用成红色的</h1>    </body></html>

css代码

h1{    color: red;}

内部样式表

就是将css样式直接写进style标签里面

<html>    <head lang = "zh">        <meta charset = "UTF-8">        <link rel="stylesheet" type="text/css" href="hello_css.css">        <style type="text/css">            h2{                color: green;            }        </style>    </head>    <body>        <h1>我是标题1，我被css样式引用成红色的</h1>        <h2>我是标题2，我被style改成绿色的</h2>    </body></html>

内联样式表

就是直接在标签里面写style，当然，这种方法后期修改就得一个一个的改了。非常麻烦

<html>    <head lang = "zh">        <meta charset = "UTF-8">        </style>    </head>    <body>        <p style="color: blue">我是小p</p>    </body></html>

HTML的链接

可以在3499910bf9dac5ae3c52d5ede7383485标签中实现链接，当然，也可以加入图片

比如我有一种皮卡丘的图片，在与html文件同目录的img文件夹下，下图是目录结构

<html>    <head lang = "zh">        <meta charset = "UTF-8">        </style>    </head>    <body>        <!-- 文字链接 -->        <a href="http://www.baidu.com">点我进百度</a>        <br />                <!-- 图片链接 -->        <a name="pika" href="http://www.baidu.com">            <img src="img/pika.png" alt="pika" width="250" height="200">        </a>    </body></html>

点击皮卡丘后，进入百度首页

好吧，今天就写到这里。其实HTML还是蛮简单的，学习之后，对于测试、开发、网页游戏都会有一定的帮助。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：css Tab_html/css_WEB-ITnose次の記事：css Tab_html/css_WEB-ITnose

続きを見る