Help us understand the problem. What is going on with this article?

HTML備忘録1

HTML

HTMLファイルの型

<!DOCTYPE html>はhtmlのバージョン(HTML5)を宣言している。
<head>要素はページに関する情報。Webページの設定を記述する。
<body>要素は実際に表示したい内容を記述する。

注意)
headを記述し終えてから、bodyを記述すること
relはファイルとの関係性を示す。rel="stylesheet"ならcssファイルとの関係性。
hrefにページのurlを記述する

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>Title</title>
       <link rel = "stylesheet" href="stylesheet.css">
    </head>
    <body>
    </body>
</html>

ブロック要素とインライン要素

ブロック要素 : 前後で改行が入り、親要素の幅いっぱいに広がる要素。
インライン要素 : インライン要素の前後で改行が入らない。インライン要素はCSSのプロパティでwidthやheightを調整できない。ただし、marginは左右方向のみ調整できる。

ブロック要素の例) <div> <h1> <p>
インライン要素の例) <span> <a>


タグ(HTML)

<h1> </h1> 

h1(見出し)。h1~h6まで存在。
ブロック要素。

<a> </a>

#リンク先が存在しない時はhref="#"を指定
<a href="#"> </a>

<a href="url"> </a>

#クリックしたいときに別の新しいタグでページを開きたいときは以下の属性を追加。
<a href="url" target="_blank"> </a> 

a(リンク)という意味付けをもつ。リンクの飛び先を設定するにはhref属性が必要。
インライン要素。

<p> </p>

p(aragraph)タグで段落に分ける。自動的に改行される。
ブロック要素。

<span> </span>

#例
この部分が<span class="change_red">赤色</span>に見える。

spanは文の一部をインライン要素にする。つまり文中の一部にCSSを適用したいときに使用する。

<img src ="url">

#オプションこと「属性」を追加できる。widthやheightで横幅や縦幅を調整する。altは説明。
<img src="url" width="100" height="100" alt="このイメージの説明">

imgは画像を表示させるタグ。src属性のurl部分に画像リンクを載せる。

<li>
    <ul>a</ul>
    <ul>b</ul>
    <ul>c</ul>
</li>

<li>
    <ol>金賞</ol>
    <ol>銀賞</ol>
    <ol>銅賞</ol>
</li>

liはリストをつくる。ulは黒点が先頭につく。olは数字が連続でつく。

<div>
</div>

<section>
</section>

<article>
</article>

レイアウトタグ。
以下はclassをつけた例。複数のclassをつけるにはスペースで区切る。

<div class="example1 example2">
 サンプルテキスト
</div>
<form>
    <p>コメント</p>
    <input>

    <p>コメント(複数行)</p>
    <textarea></textarea>
</form>

input要素は1行のテキスト入力を受け取る。<input>だけで良い。
textarea要素は複数行のテキスト入力を受け取る。

☆送信ボタンの作成。

<form>
  <input type="submit">
  <p></p>
  <input type="submit" value="保存">
</form>

type属性をsubmitにすると送信ボタンが作成される。
value属性でテキストを変更できる。

参考文献

サルワカ
https://saruwakakun.com/html-css/basic/link-rel
TAG index
https://www.tagindex.com/html_tag/form/input_submit.html
Progate
https://prog-8.com/languages/html
ドットインストール
https://dotinstall.com/lessons/basic_html_v5
https://dotinstall.com/lessons/basic_css_v5

417834
Unity、3DCG、Webアプリ開発を勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away