目次
1. HTMLの概要
html、ハイパー テキスト マーク言語、ハイパーテキスト マークアップ言語。単純な Web コンテンツを作成するためにフロントエンド スタッフが学ばなければならないコンピュータ言語は、コンパイルせずにブラウザ上で直接実行できる比較的単純な言語です。
ハイパーテキストとは、ストリーミング メディア、サウンド、ビデオ、写真などの非プレーン テキスト コンテンツを指します。
マークアップ言語: この言語は多数のタグで構成されます。
例: <label>: 開始ラベル </label>: 終了ラベル
厳密に言えば、html は単なる仕様書であり、ブラウザ上に表示される仕様書 (ラベル言語) はプログラミング言語とは言えません。html には変数、データ型、制御文がないからです。HTML には、これらのプログラミング言語の特徴的なコンテンツがありません。
2.html動作環境
htmlはブラウザ上で動作します。
現在、世界の主流のブラウザは、edge、chrome、Firefox などです。
html が実行される環境は比較的単純なので、ここでは繰り返しません。
3.html開発環境
HTML 開発の場合は、.html または .htm で終わるファイルを新規作成し、それをメモ帳で開いて書き込み、開発するだけで、コンパイルせずにブラウザ上で直接実行できます。
ただし、開発効率を向上させ、コードを標準化するために、vscode や webstorm などの主流のコンパイラを使用することをお勧めします。エディタには、シンプルで快適なインターフェイスの vscode が使用されます。
vscodeのインストールと環境構築については、公式サイトから最新版を直接ダウンロードでき、設定環境に関する内容はcsdnで問い合わせることができます。
4.htmlの基本タグ
HTMLの基本タグは暗記がメインなので、どんどん書いていくことで使いこなせるようになります。
<!--这是HTML的注释信息-->
<!--这是根-->
<html>
<!--头-->
<head>
<!--标题栏-->
<title> 基本标签 </title>
</head>
<!--网页体-->
<body>
<!--这里的内容显示到网页上-->
<p>段落标记</p><!--分段-->
<p>段落标记</p>
<!--标题字-->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<!--一共有6种标题字，由h1到h6-->
<!--换行标记-->
hello
world<!--不可行-->
hello<br>world!<!--独目标记-->
<!--画一条水平线-->
<hr><!--独目标记-->
<!--color是一个属性，用来指定属性-->
<!--color是属性名，red是属性值-->
<hr color="red">
<hr color='red'>
<hr color=green>
<!--HTML语法较为松散，大小写，有无单双引号也不影响-->
<!--文本框-->
<input>
</body>
</html> <!--预留格式-->
<!--保留格式，在HTML源码上是什么格式，到网页上还是什么格式，保持不变。-->
<pre>
for i in range(10):
print(i)
if i >=5:
brek
</pre>
<!--粗体字-->
<b>粗体字</b>
<!--斜体字-->
<i>斜体字</i>
<!--插入字-->
<ins>插入字</ins>
<!--删除字-->
<del>删除字</del>
<!--右上标-->
10<sup>2</sup>
<!--右下标-->
m<sub>2</sub>
<!--font字体标签-->
<font>hello world</font>HTMLには基本的なタグがたくさんありますが、中には広く使われているタグもあるので、すべてを覚える必要はなく、印象程度で構いません。
5.htmlエンティティシンボル
<!--凡是html页面中第一行是以下代码的，表示该页面是一个html5页面，h5-->
<!DOCTYPE html>
<html>
<head>
<!--这个是告诉浏览器采用哪一种字符编码方式打开该页面，一般与文件编码方式相同，否则会乱码-->
<!--windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文方式打开
，这是因为我们的windows操作系统是简体中文环境-->
<!--而我们程序员工作区当中文件的编码方式是utf-8，因为unicode更加通用-->
<!--当前这个文件就是utf-8的编码方式，如果不写如下代码，浏览器就会默认用GBK打开，会乱码-->
<meta charset="utf-8">
<title>实体符号</title>
</head>
<body>
<!--空格-->
a bc
<br>
<!-- 这是一个空格，属于实体符号-->
a bc
<!--大小于号-->
a<b>c<!--<是小于号>是大于号-->
</body>
</html>
HTML には物理記号の数が少なくなりますが、大なり記号と小なり記号の使用に注意する必要があります。HTML の 2 つの記号 <> には特別な意味があるため、大なりまたは小なり記号を示すために使用することはできません。もう1つ注意すべき点は、ファイルのエンコード形式の問題で、作成したHTML Webページをブラウザで開いたときにテキストが文字化けしないように、テキスト編集形式とテキスト編集形式の指定に注意する必要があります。開くエンコード形式。
6.htmlフォーム
テーブルは、HTML に記述して Web ページにテーブルを実装するために必要です。
<html>
<head>
<meta charset="utf-8">
<title>html表格table</title>
</head>
<body>
<!--border 用来设置边框的宽度，1px表示一像素-->
<table border="1px" width='300px' height='200px' align="center">
<!--width,height分别表示表格的宽度和高度-->
<!--高度宽度还可以写成百分比的方式-->
<!--align表示表格的对齐方式-->
<!--tr表示表格中的一行，td表示一行中的一个单元格-->
<!--第一行-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--第二行-->
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--第三行-->
<tr>
<td>1</td>
<td>2</td>
<td align="center">3</td>
</tr>
</table>
</body>
</html>htmlにおけるセルの結合操作は、垂直結合と水平結合に分かれます。
<tr>
<td>1</td>
<td colspan="2">xy</td>
<!--<td>y</td>-->
<!--同一行中左右单元格合并为一个，这项操作为纵向合并，只需要保留其中一个单元格
在使用clospan来表示合并的单元格数量-->
</tr>
<!--第二行-->
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">king queen</td>
<!--同一列中上下单元格合并为一个，这项操作为横向合并，只需要保留其中一个单元格
在使用rowspan来表示合并的单元格数量-->
</tr>
<!--第三行-->
<tr>
<td>1</td>
<td>2</td>
<!-- <td>queen</td> -->
</tr>もう 1 つは、HTML テーブルでの th の使用に関するもので、td の代わりに th を使用すると、テーブル内のコンテンツが自動的に太字で中央揃えになります。
<html>
<head>
<title>th标签</title>
</head>
<body>
<table border='5px' wider='1000px' height='200px'>
<tr>
<!-- <td>员工编号</td>
<td>员工姓名</td>
<td>员工薪资</td> -->
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
<!--th可以代替td做单元格，th中的内容可以自动加粗自动居中。-->
</tr>
<tr>
<td>369</td>
<td>小编</td>
<td>0.00</td>
</tr>
<tr>
<td>370</td>
<td>小小编</td>
<td>1.00</td>
</tr>
</table>
</body>
</html>thead、tbody、tfoot を使用してテーブルを 3 つの部分に分割することもできます。
<!--一个table可以被thead tbody tfoot分割为三部分-->
<!--这个语法主要是为了后期JavaScript提供方便-->
<table border='5px' wider='50%' height='200px'>
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>369</td>
<td>小编</td>
<td>0.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>370</td>
<td>小小编</td>
<td>1.00</td>
</tr>
</tfoot>
</table>7.htmlの背景色と背景画像
<html>
<head>
<title>背景颜色以及背景图片</title>
</head>
<!--body标签的bgcolor属性指定背景颜色-->
<!--body标签的background属性指定背景图片-->
<body background="images/公子.jpg">
</body>
</html>背景画像を設定する場合は、ファイル ディレクトリに配置する画像があることを確認する必要があることに注意してください。html フォルダーに新しい画像フォルダーを作成して、必要な画像を保存することをお勧めします。使用。
8. HTML内の画像img
HTML の画像は背景画像とは異なり、Web ページ内の要素であり、背景に浮かび上がります。写真の場合は、それらを設定するための一連の操作があります。
<html>
<head>
<title>图片</title>
</head>
<!--背景图片与图片不同-->
<body>
<!--图片是网页中的一个元素-->
<!--<img src="images/百度.png"></img>-->
<!--开始标签结束标签之间没有内容的话可以将结束标签删除，在开始标签末尾加上/-->
<img src="images/百度.png"/>
<!--img 这个标签有什么属性？-->
<!--scr属性指定图片的路径-->
<!--width属性，用来指定图片的宽度，高度会等比例缩放，
尽量不要自定义高度，容易导致图片失真-->
<!--title属性用来设置鼠标悬停在该图片上的提示信息-->
<img src="images/百度.png" width ='200px' title="点击我跳转到百度哦" />
<!--alt属性，当图片加载失败时的提示信息-->
<img scr = 'abc/公子.jpg' alt="图片找不到哦！"/>
</body>
</html>9. ハイパーリンク
Web ページ上では、Web ページ上の一部の単語に下線が引かれ、フォント上にマウスを置くと自動的に小さな手になるという状況によく遭遇します。新しいウィンドウ、これがハイパーコネクションです。また、ハイパーリンクの種類はテキストだけでなく、画像もハイパーリンクになる可能性があります。
<!--链接到百度的超链接-->
<!-- href属性表示，hot reference，用来指定链接的路径-->
<a href="http://www.baidu.com">百度</a>
<br>
<!-- 链接路径可以时一个网络中的路径，也可以是本地的一个路径 -->
<a href="html表格.html">链接到本地表格</a>
<!-- 超链接特点：1.鼠标停留在超链接上时自动变成小手2.超链接自动添加下划线 -->
<!-- 图片也可以做热链接（起始标签和结束标签中的内容会变成链接） -->
<a href="http://map.baidu.com"><img src="images/百度.png" title="点击我跳转到百度地图哦"></a>
ここでは、ハイパーリンクの属性であるターゲットについても理解する必要があります。これはその後の開発に役立ちます。
<!-- 关于超链接的target属性 -->
<!-- targer属性用来设置最终打开窗口的位置 -->
<!--
target:
_self:当前窗口
_blank:新窗口
_parent:当前窗口的父窗口
_top:当前窗口的顶级窗口
-->
<a href="http://www.baidu.com" target="_self" >百度（当前窗口）</a><br>
<a href="http://www.baidu.com" target="_blank" >百度（新开窗口）</a>
<br>※10.余談。
B/Sアーキテクチャの原理について：（大まかに）
ステップ 1: ユーザーはブラウザに URL を入力します。
ステップ 2: request (リクエスト) を入力します (このステップは、ブラウザーを介してサーバーにリクエストを送信するのと同じです)。
ブラウザ --> サーバー (ブラウザはサーバーにリクエストを送信します)
ステップ 3: サーバーはブラウザに応答を返し、最後に HTML コードをブラウザに返します。ブラウザは HTML コードを実行して結果を表示します。応答
サーバー --> ブラウザ (サーバーはブラウザに応答を返します)
私たちの日常生活では、1. URL を入力してページにアクセスするか、2. ハイパーリンクをクリックして新しいページにアクセスしますが、これらはすべて B/S アーキテクチャによるものです。
11. 順序なしリストと順序付きリスト
順序なしリストは比較的単純なので、詳細は説明しません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 无序列表 -->
<!-- ul的tyoe属性是指定列表前的标识 -->
<ul type='circle'>
<!-- 列表项 -->
<li>中国</li>
<ul>
<li>北京</li>
<ul>
<li>烤鸭</li>
<li>爆肚</li>
<li>炒肝</li>
<li>糖葫芦</li>
</ul>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
<li>华夏</li>
<li>东方</li>
<li>雄狮</li>
</ul>
</body>
</html>順序付きリストと順序なしリストの唯一の違いは、並べ替えラベルがないことです。
<!DOCTYPE html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol type='A'>
<li>水果</li>
<ol type="1">
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>菠萝</li>
</ol>
<li>蔬菜</li>
<li>茶</li>
<ol type="I">
<li>普洱</li>
<li>龙井</li>
<li>铁观音</li>
<li>绿茶</li>
<ol>
<li>毛尖</li>
</ol>
</ol>
<li>肉</li>
</ol>
</body>
</html>12. フォーカス——フォーム
12.1 フォームの概要
html学習においてフォームは最も重要であるとも言えますが、フォームの使い方をマスターできていないということは、html学習が不十分であると言えます。
それで。フォームとは正確には何ですか? 写真を見てみましょう:
これはBaiduのアカウント登録ページのスクリーンショットですが、上記がフォームです！
1. フォームとは何ですか? 用途は何ですか?
リクエストを送信し、データをサーバーに送信します
フォームとハイパーリンクには共通の機能があります。つまり、どちらもサーバーにリクエストを送信できるということです。
ハイパーリンクはユーザーが直接クリックしてリクエストを送信するものであり、データを入力することはできません。
ユーザーがフォームをクリックして送信すると、リクエストが送信されるだけでなく、入力データもリクエストに含めることができます。
フォームの主な機能はユーザー情報を収集することです
形に対応する単語: 形
2. フォームオブジェクトを定義するにはどうすればよいですか? 文法形式
<フォーム>
フォーム項目 1:
フォーム項目 2:
</form>
また、次の点にも注意してください: Web ページ上には複数のフォーム オブジェクトが存在する場合があります。
3. form タグには、ハイパーリンクの href と同じ action 属性があり、両方に URL を入力する必要があります。
12.2 ログインフォームの作成方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录的表单</title>
</head>
<body>
<!-- 画一个登录的表单 -->
<!-- "http://192.168.145.2:8080/crm/login"
协议：http协议
访问的服务器IP地址是：192.168.145.2
访问这个服务器上的哪个软件：8080端口对应的一个服务
/crm/login:是这个服务器上的某个资源名！（他可能是一段处理登录的java程序） -->
<!-- 重点*****重点*****重点*****重点*****重点*****重点*****重点*****
表单最终提交的时候，表单项的name属性非常重要，有name属性才会提交
并且浏览器向服务器提交数据的格式是：
url?name=value&name=value&name=value&name=value&name=value
以上提交数据的格式，是W3C制定的格式，所有浏览器都是这样的。
这个格式非常重要，必须背会，所有浏览器都是这样提交数据的。
重点*****重点*****重点*****重点*****重点*****重点*****重点***** -->
<form action="http://192.168.145.2:8080/crm/login">
<!--input是输入域，type不同，展示样式不同-->
<!-- type="text"是文本框 -->
<!-- value属性是不需要填写 -->
用户名：<input type="text" name="x"/>
<br>
<!-- type="password"表示密码框，输入的内容会被修饰 -->
密码：<input type="password" name="y"/>
<br>
<!-- 提交表单的按钮 -->
<input type="submit" value="登录"/>
</form>
</body>
</html>フォームを作成する過程では、その後の開発プロセスを容易にするために、フォーム項目データの送信方法を念頭に置く必要があります。
12.3 ユーザー登録フォームの作成
このフォームにはさまざまな入力オプション式が含まれています。入力オプションのさまざまな属性設定の効果を体験するには、自分でコードを作成することをお勧めします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册表单</title>
</head>
<body>
<!--若表单项是由用户自己填写，则value不需要程序员提供，若是由用户选择，则需要提供value-->
<!--表单中，如果有一些项用户没有填写，默认提交的就是空字符串-->
<form action="http://localhost:80/cr/register">
用户名：<input type="text"name='username'/><!--value不需要程序员提供-->
<br>
密码：<input type="password"name="userpwd"/><!--value不需要程序员提供-->
<br>
性别：<!--最终提交给服务器的数据是，sex=1或sex=0-->
<!--同一组的单选按钮，name是需要一致的-->
<!--checked表示默认选择-->
<input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex"value="0"/>女
<br>
兴趣：<!--复选框（可以同时选择多项），同一组的复选框name也是一致的-->
<input type="checkbox" name="aihao" value="basketball" checked/>打篮球
<input type="checkbox" name="aihao" value="yuanshen"/>原神
<input type="checkbox" name="aihao" value="duanlain"/>锻炼
<br>
学历：<!--下拉列表-->
<select name="xueli" ><!--假设选择**，则提交的是xueli=**-->
<!-- selected表示默认选中 -->
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk" selected>本科</option>
<option value="yjs">研究生</option>
</select>
<br>
简介：<!--文本域,其中value也是用户来填写的-->
<textarea name="jianjie" cols="60" rows="10">
</textarea>
<br>
<input type="submit"value="提交注册">
<!--提交按钮不可以由name，不然提交按钮也会提交给服务器-->
<!-- reset是重置表单 -->
<input type="reset" value="重置">
</form>
</body>
</html>13. 断片的な知識点の整理
13.1 ドロップダウンリストでの複数選択
ドロップダウン リストを作成するときに、表示される項目の最大数を設定し、複数の選択をサポートできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表多选</title>
</head>
<body>
<!--multiple表示下拉列表支持多选-->
<!--size是设置下拉列表一次最多显示的条目数量-->
<select name="province" size="3" multiple>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="shandong">山东省</option>
<option value="shanxi">山西省</option>
<option value="hunan">湖南省</option>
<option value="hubei">湖北省</option>
</select>
</body>
</html>13.2 ファイル制御
このコントロールの主な機能は、ファイルを転送することです。
<!DOCTYPE html>
<html>
<head>
<title>file控件</title>
</head>
<body>
<!--后台java程序使用IO六的方式接收这个文件-->
<form action="http://www.baidu.com">
文件：<input type="file"/>
<br>
<input type="submit" value="文件上传">
</form>
</body>
</html>13.4hidden隠しフィールド
これは、ユーザーが見たくないがサーバーに送信する必要がある一部の情報を非表示にするために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>hidden控件</title>
</head>
<body>
<!-- hidden的隐藏域空间 -->
<form action="http://127.0.0.1:8080/crm/save">
<!--隐藏域-->
<!-- 不希望用户在浏览器上看到，但希望可以将这个数据提交过去 -->
<input type="hidden" name="uesrcode" value="111111"/>
<!--提交按钮-->
<input type="submit" value="提交"/>
</form>
</body>
</html>13.5読み取り専用と無効化
コードを直接入力して実際に体験することをお勧めします。
<!DOCTYPE html>
<html>
<head>
<title>readonly和disable</title>
</head>
<body>
<!-- readonly和disable 都是只读的 -->
<!-- readonly修饰的表单项可以提交给服务器，但是disable修饰的不会提交 -->
<form action="http://127.0.0.1:8080/crm/save">
机构代码 <input type="text" name="orgcode" value="1111" readonly/>
<br>
用户代码 <input type="text "name="usercode" value = "2222" disabled/>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>13.6 フォーム項目の maxlength 属性
簡単に言えば、フォーム項目に入力できる最大文字数を制限することです。
<!DOCTYPE html>
<html>
<head>
<title>maxlength属性</title>
</head>
<body>
<!-- 最多输入maxlenth个字符 -->
<input type="text"maxlength="3">
</body>
</html>13.7 HTML の要素の id 属性
HTML の各ノードには固有の id 属性があり、後続の JavaScript 学習で使用されます。
1. HTML のどのノードにも id 属性があります
2. 同じ Web ページ内で id 属性を繰り返すことはできません
3.id はこのノードを表し、id はこのノードの ID 番号です。
4. 後ほど JavaScript を学習した後、JavaScript を通じて HTML ノードを追加、削除、変更したい場合
まず、ノード オブジェクトを取得する必要があります。id 属性を使用すると、ノード オブジェクトを簡単に取得できます。
5. ノードは JavaScript で id 属性を使用して簡単に取得できます。
次に、このノードを操作して、最終的に Web ページの動的な効果を生成します。
13.8 div レイヤーとスパンレイヤー
1. どちらもレイヤーです
2. レイヤーの意味と機能:
各レイヤーは Web ページ内の独立したボックスです
レイヤーの主な機能は次のとおりです: Web ページのレイアウト
3.テーブルはテーブルレイアウトではありませんか？なぜレイヤーなのか?
テーブルのレイアウトが十分に柔軟ではない
divとspanのレイアウトがより柔軟になりました
4. 各 div および Span の左上隅の頂点には x 座標と y 座標があります。
この座標を通じて、Web ページ内の div の位置を特定できます。後々CSSを勉強する際に、
CSS スタイルを通じて配置できます。
5. テーブルレイアウトは昔から使われていましたが、最近のWebページはdiv+spanでレイアウトされています。
6. Web フロントエンドのデバッガー:
すべてのブラウザにはデバッガが組み込まれています
ショートカット キー f12 を使用してデバッガを起動します
7. divとspanの違い:
div はデフォルトで 1 行を占めます
スパンは行を占有しません
8. divはdivとspanをネストできます
14. まとめ
HTML の学習は主に暗記、いくつかの重要なタグの使用、いくつかのコントロールの配置、いくつかの属性の設定などに基づいています。さらに、コードを自分で入力する必要がありますが、練習すれば完璧になります。学びの基礎！がんばり続ける！！