HTMLとCSSは2つの部分です
総括する：
- html部分は、一般的に使用される個々のタグを覚えておくだけで済みます。
- CSSにはたくさんのスタイルがあるので、よく使われるスタイルを覚えておいてください。
- 最初の段階では、それを確認するだけでは不十分です。後の段階でさらにプロジェクトを実行すると、どのプロジェクトが一般的に使用されているかがわかります。そして、これは初期段階でhtml + cssを学習するための単純な蓄積と要約であり、実際、フレームワークは後の段階でより多く使用されます。したがって、この記事では、フレームとページのレスポンシブデザインについては触れていません。
ps：フレーム：自分で作成せずに直接使用し、個々のパラメーターを変更するだけです。
レスポンシブデザイン：携帯電話が携帯電話のページを見て、コンピューターがコンピューターのページを見るということですので、衝突はありません。
テキスト：
HTML
1.関連する概念
1. htmlとは何ですか？
- HTMLは、Webページを記述するために使用される言語です。
- HTMLはハイパーテキストマークアップ言語（ハイパーテキストマークアップ言語）を指します
- HTMLはプログラミング言語ではなく、マークアップ言語です
- マークアップ言語はマークアップタグのセットです
- HTMLはマークアップタグを使用してWebページを記述します
2.ラベル
- HTMLタグタグは通常、HTMLタグ（HTMLタグ）と呼ばれます。
- HTMLタグは、角かっこで囲まれたキーワードです。
- HTMLタグは通常、とのようなペアで提供されます
- タグペアの最初のタグは開始タグで、2番目のタグは終了タグです
- 開始タグと終了タグは、オープンタグおよびクローズドタグとも呼ばれます。
3.一般的に使用される（*）[詳細はコードを参照]
个人补充：标签有很多，但是其实大部分都是在网页前期用的多，
使用html写样式，如<strong>、<center><font>等标签，对于初学者极不友好。
但是通常熟悉记住以下标签，就可以了。因为现在大部分样式都是用css来确定的。
1. <html> <head> <body>
2. <p> <div> <h1-h6> <a> <img> <span> <table> <ul> <ol> <iframe>
3. 知道有就行，用处不多。<br /> <hr />（见5）
- ブロックレベルの要素とインライン要素の簡単な理解は、ブロックと長いストリップの違いです。
4.微妙な知識
覚えておく必要はありません。時間をかけて理解し、「自明」だと考えることができます。
- HTML要素は開始タグで始まります
- HTML要素は、タグを閉じることで終了します
- 要素のコンテンツは、開始タグと終了タグの間のコンテンツです。
- 一部のHTML要素には空のコンテンツがあります
- 空の要素は開始タグで閉じられます（開始タグの終わりで終わります）
- ほとんどのHTML要素は属性を持つことができます
- ケースはある程度敏感ではありませんが、小文字をお勧めします。
5. htmlの属性、理解してください。後でCSSを使用してください。
align 居中；bgcolor 背景色；border 边框
https://www.w3school.com.cn/tags/index.asp 完整参考手册（不用记)
文本格式化：<em> <b><sub><sup>等等等
引用：<q> <blockquote> <abbr><dfn>等等等
7.コメント
<!-- This is a comment -->
8.その他：
- パス-相対パスと絶対パス。
- URL-「UniformResourceLocator」-単にWebアドレス。
- 色-https：//www.w3school.com.cn/html/html_colors.asp
- 次のような文書ステートメント：
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
简单说，就是告诉电脑这是个网页，用网页的方式把“爷”打开。
上面依次是HTML 5/HTML 4.01/XHTML 1.0三个版本的声明方式。
二、コード
1.基本的な「スケルトン」
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div></div>
</body>
</html>
2.基本ラベル
1.标题 1-6
<h1></h1>
2.<p></p> P标签，段落 对应的 <span>行内元素</span>
3.<div></div> “块”
4.<a></a> 超链接
<a href=""> 显示 </a>
target 是否弹出新窗口
name/id 锚属性 （如返回到top）
5.<img> 插图
<img src="" width="" height="" alt="提示" title=""/>
6.表格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<th></th> 表头
<td></td> 空表格
<caption></caption> 标题
7.列表
无序
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3.表单
<form>
<input />
</form>
输入文本
<input type="text" name="firstname">
密码
<input type="password" name="psw"
提交
<input type="submit" value="Submit">
单选框
<input type="radio" name="sex" value="female">Female
复选框
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
按钮
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
其他了解即可
https://www.w3school.com.cn/html/html_form_input_types.asp
https://www.w3school.com.cn/html/html_form_attributes.asp
单选按钮
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
提交表单
<form action="***.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
https://www.w3school.com.cn/html/html_forms.asp
action,name等等，同时还可以将文本提交到后台，还有get/post等方法(method)。
其他
下拉菜单
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
文本域
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
CSS
1.関連する概念
1. CSSとは何ですか？
- CSSはカスケードスタイルシート（カスケードスタイルシート）を指します
- CSSは、画面、紙、またはその他のメディアにHTML要素を表示する方法を説明します
- CSSは多くの作業を節約します。複数のWebページのレイアウトを同時に制御できます
- 外部スタイルシートはCSSファイルに保存されます
2.共通の属性およびその他の参照コード
3.注釈
/* 这是一条单行注释 */
/* 这是
一条多行的
注释 */
二、コード
1.CSSコードを引用します
- 最初はわからない場合は、どのように書くか。たとえば、外部スタイルを乱雑にするのは簡単です。インラインで記述してから内部スタイルに変更し、最後にパッケージ化して外部スタイルに書き込みます。
外部样式：
<head>
<link rel="stylesheet" type="text/css" href="***.css">
</head>
内部样式：
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式：
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
2.基本属性
1.关于背景
background-color 背景色
opacity: 0.3; 不透明度
background-image: url("**.gif") 背景图片
background-repeat 背景重复
background-size 背景图像尺寸
background-attachment 背景图像固定
https://www.w3school.com.cn/css/css_background_attachment.asp
2.font-family、color、font-size 字体、颜色、大小
3.text-align 文本对齐
4.颜色 可以直接使用orange这种也可以使用#ffffff，还有rgb(255, 99, 71)
5.边框
border-width；border-color；border-style；
border：2px solid blue 边框宽度为2px直线蓝色框
border-radius 边框弧度
其他了解
https://www.w3school.com.cn/css/css_border.asp
6.外边距和内边距
【top，right，bottom，left】margin；padding
margin外边距
简写：
margin: 20px 20px 20px 20px 从左边逆时针
margin: a b c d a-c对应，b-d对应
margin：10px 20px 左右10，上下20
margin：10px 20px 30px 左10，上下20，右30
padding内边距同理。
7.width和height
同6
8.盒模型
如下图，所以把写网页当做三维的“俄罗斯方块就行了”，每个div就是对应的方块。
轮廓文本等就不在赘述了。
https://www.w3school.com.cn/css/css_text.asp