HTML と CSS を使用してビジネス サイトを開発する_html/css_WEB-ITnose

第一章HTML 基础
1.html 的基本结构？
解析：
2.HTML 全称
Hyper Text Markup Language（超文本标记语言）
扩展XML:Extendsible Markup Language(可扩展性标记语言)
3.高级记事本
Ue（UltraEdit）
nodepad++
Editplus
快捷键用熟一个即可。
4.编写html 文档的注意点
01.所有标签字母均小写。
02.有开始就要有闭合标签
03.每个层次的标签有一定程度的缩进。
解析：如果发现body 内书写了内容，用浏览器打开后发现没有内容，那么
就需要检查下title 标签有没有闭合。
5.三种文档类型
严格类型，过渡类型，框架类型
6.编码方式
gb2312
Gbk
Gb2312 和gbk 的区别
GB2312 是中国规定的汉字编码，也可以说是简体中文的字符集编码;GBK 是GB2312 的
扩展,除了兼容GB2312 外，它还能显示繁体中文，还有日文的假名
utf-8:全球通用编码
用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
7.W3C：组织
解析：是一个组织，专门用来给各个浏览器厂商等指定规范的。
8.标签
01.h 标签：从h1 到h6 字体逐渐减小。
效果：自身加粗，并且可以控制字号。
02.p 标签：和其他的内容行之间有一个空行。
03.br 换行标签：是自身闭合标签。

04.hr 水平线标签，是自身闭合标签。
05.strong（加粗）、06.em（倾斜）
07.特殊符号：所有的特殊符号都是包括在&;中
空格：
大于号：>
小于号:<
双引号:"
版权符号:©
林徽因：冰心(谢婉莹)，小桔灯() 99
你是人间的四月天
9.图像标签
夏洛特的网
html 中两种路径：
第一种：绝对路径，就是挂着盘符的路径形式，例如：c:\\123\\01.jpg
相对路径：相对的对象时当前你访问的html 文档。符号是../(上一级目录)
注意问题：相对路径../：去该html 文件对应的上层文件夹
一般不会使用绝对路径：D:\\1.html
显示的文字”/>
自身闭合标签
10.超链接
分类：页面间链接，锚链接，功能性链接。
页面间链接：
去百度
锚链接：
01.同页面间锚链接
分两步：第一步：在页面目标位置设置一个锚记。/>
第二步：在另一处创建出一个超链接：去看明星的隐私信
息吧
02.跨页面的锚链接
功能性链接：
站长信箱
打开QQ
迅雷
电驴
ek2k://
QQ 旋风
第二章列表、表格与框架
第二章列表、表格与框架
收作业
听写
补充a 标签的一个属性target
1._blank:在新选项卡中打开
2._self:如果没有设置target 属性，默认取值是_self
01.列表
001.无序列表：

002.有序列表

003.定义描述标签：应用场景：在图文混编的情况下使用

放置图片

....

02.表格

北京	上海	广州
北京	上海	广州
北京	上海	广州

キー ポイント: テーブルの行と列にまたがる
手順: 1. 行と列は何行ありますか?
分析: 3行2列
2. クロス行(rospan)、クロス列(cospan)
3. 基本原則: クロス行とクロス列はtdでのみ表示されます
必ず注意してください。すべての行間および列間操作は td で発生します。
テーブルが行と列を越える手順:
01. テーブルの行と列を決定します
03. 必要に応じて、冗長な td (セル) を削除します
3. しましょうFrameset を再度実行します
機能: 比較的大きなページを複数の小さなページに分割する必要がある場合、通常、バックグラウンド管理者のレイアウトに使用される FrameSet を使用できます。
重要な内容: FrameSet と本体は共存できません。
実装:
最初: 3 つのサブページを作成します:top.html、left.html right.html
次に、メイン ページのindex.html の Frameset タグを介して 3 つのサブページを導入します










注: 01.border は境界線の幅を設定できます。これが 20 に設定されている場合、境界線の幅は 20 ピクセルであることを意味します。
0 にすると、境界線がないことを意味します。
02.noresize=”noresize” では、ユーザーはフレームをドラッグできません。
03.scrolling=”no” では、スクロール バーが表示されません。
Iframe の使用法:
アプリケーション シナリオ: 外部ページをリンクして、スタイルのコードの再利用を実現します。
FrameSet:
01. body
02 と共存できません。インデックス ページを 3 つのページに結合し、大きな
ページ インデックスを 3 つの小さな部分に切り取り、それぞれの小さな部分が 1 つのページ
top.html
right に対応します。 html
04. フレームセットとインラインフレーム iframe
frameset は、Web ページをレイアウトしたり、複数のページを結合したりするために使用されます。これはより複雑で、iframe は通常、オフサイト リンク、天気予報を導入するために使用されます
report
frameset key 属性:
border: set border: 100 の値を取ることができます
frameborder:0 と 1
borderColor: color
frame :noresize srcolling
iframe: noresize srcolling width height
第 3 章 フォーム
第 3 章 フォーム
01. フォームとは? ?
分析: フォームはフォームです

method=”post”>
リセット ボタンを有効にするには、フォームに配置する必要があります

注意点:
02. フォーム要素?
分析: フォーム内のタグはフォーム要素です
03. Lao Shi: get 送信メソッドと post 送信メソッドの違いは何ですか?
分析: get は送信されたデータをアドレスバーに表示します (危険)
2k
1byte=8bit(bit))
(1kb=1024byte(byte)
1mb=1024kb
1Gb=1024mb
1Tb=1024Gb
4M: 4m/ s 512k/s
post フォームでは、開発者ツール (セキュリティ
安全) を通じて、上限がないことがわかります
form 要素の値をサーバーに送信したい場合、
form 要素は次のようにする必要がありますname 属性がありますか?
分析:
フォーム要素:
input: type="text" テキスト ボックス
type="passsword" パスワード ボックス
type="radio" ラジオ ボタン
type="checkbox" チェックボックス
type="submit" 送信ボタン
type="reset" リセットボタン
type="button" 通常ボタン
type="image" 画像ボタン
type="file" ファイルフィールド
type="hidden" 隠しフィールド
ドロップ-ダウン ボックス
選択 -- -オプション ドロップダウン ボックス
複数行のテキスト エリア
複数行のテキスト エリア
属性
: readonly readonly="readonly"
Disabled:disabled="disabled 『
-->
第4回 初めてのCSS入門
1. タスク
1. 3章と4章の語彙
2. 考察
3. 最初の3章のまとめ
4. 4章の内容説明
はじめにDreamweaver ツールの使い方
2. 内容:
1. CSS を使用する意義: コードとスタイルの分離を実現する
01. CSS とは: (Cascading Stylesheet) ページ内での CSS の適用
02. :
分析:

03.CSSの利点
CSSの基本構文CSS
01.CSS の基本構文構造
02.スタイルについて理解する
03.CSS セレクター
タグ セレクター: タグ名を通じて要素のスタイルを設定する
クラス セレクター
分析: 2 つのステップ: ステップ 1: 名前を付けるクラスとしてスタイル設定されるターゲット タグ。属性名
ステップ 2: style タグで、.attribute name{}
を使用して設定します。ID 选择器
解析：
第一步：在要设置样式的标签中起一个名称为id 的属性，
第二步：在style 标签中通过#属性名{}设置
在HTML 中引入CSS 样式
01.行内样式
解析：直接在html 代码的标签中设置style 属性，这种方式缺点做不到代码和样式分离。
02.内部样式表
解析：直接在style 标签中书写样式代码，但是真正在项目发布的时候，还是最好将样式
单独出一个文件，这样会提高网站的性能。
03.外部样式表
解析：通过link 标签引入当前网站css 文件夹中某一个后缀名是.css 的文件，

04.样式优先级
规律：
行内>内部样式表>外部样式表
也就是遵循的是就近原则。
CSS 高级应用
01.CSS 复合选择器
A.后代选择器
B.交集选择器
C.并集选择器
02.CSS 继承特性
A.继承关系
B.继承的应用
注意点：
01.如何调整dreamweaver 中代码视图的字体大小。
.
2.问：
声明：下次课的预习大家一定要好好预习，因为里面的东东很多很杂，所以需要大家多用点
心。
总结：
1.为什么使用CS
2.CSS 语法

3.选择器的优先级
近者优点
4.三种引入样式表方式
第一种：行内样式
第二种：内部样式表
第三种：外部样式表
5. 复合选择器
01.后代选择器空格
02.并集选择器，，，，
03.交集选择器连接写，第一个只能是标签，后续跟的是类样式，ID
6.CSS 当中的继承
作业：
1.预习第五章（难点，希望大家好好预习）
第五章CSS 美化网页元素
内容回顾：
01.CSS：让网页看起来更加美观，可以实现页面样式的复用。层叠样式表
02.CSS 选择器：ID 类选择器标签
03.复合选择器：交集，并集，后代
现阶段，大家所用的选择器，只要能满足题目要求即可，没有必要刻意去使用复合选择器，
等到有一天，你发觉使用常见3 种选择器，定位某一个标签特别麻烦的时候，思路可以往这
个方向偏移。
交集选择器：p.name div#name
并集选择器：p,div
后代选择器: p ul li
04 选择器的.优先级
ID>类选择器>标签选择器
05.CSS 中的继承
子标签可以继承父标签的样式
CSS 美化网页元素
1.span 标签引入
老师说了，通过span 标签，我们学了一个知识点，就是行级标签和块级标签。
行级标签：；所有的行级标签都显示在同一行（span，img）
块级标签：独占一行（p ，div）
2.字体样式
大家教了我一点，就是如果font-family 属性值有多个，用逗号
隔开。如果英文字体和中文字体同时出现，英文位于前面。
02.如果字体属性值有空格，必须有””,
03.如果字体属性是中文，也要有””
分开设置属性：
设置字体类型:font-family:到底是楷体呢还是宋体”楷体_GB2312”
设置字体大小:font-size：设置字体大小
设置字体风格:font-style;倾斜：font-style:italic
设置字体粗细font-weight:bold; 700px
整体设置属性：font:字体风格字体的粗细字体大小字体类型;

----------------------------------------------------

水が油に変わります
3. テキストのスタイル
テキストの色を設定します: color: 前景色
要素の水平方向の配置を設定します: text-align: center left
テキストのインデントを設定します: text-indent:20px;
テキストの行の高さを設定します line- height:20px; line-height と height を同じ高さに設定すると、
ボックス内のコンテンツを垂直方向に中央揃えにすることと同じになります。
テキストの装飾を設定します。 text-decoration: Underground ;
画像とテキストの垂直方向の配置
画像を設定します Vetical-align:middle;
4. ハイパーリンク疑似クラス
a タグ内の img タグの周囲の境界線を削除します。
01.img{border:0px; 02.img{border:none;}
疑似クラス: セレクター (#div .div div): ステータス値 (リンク、訪問済み、ホバー、アクティブ)
a:link: みんなの小さな手がハイパーリンクをクリックしていないときのスタイルの
A:visited: 全員の大きな手のスタイルがハイパーリンクをクリックしました
A:hover: 全員の小さな足がハイパーリンク上にホバリングするスタイル
A:active: 全員の大きな足がハイパーリンクを踏んでいるスタイルですが、スタイルはまだポップアップしていません
マウスの形状を設定します
Cursor:pointer; 小さな手に設定します
Cursor:wait:小さな砂時計のビジーアイコン
5.Div
Div ブロックであることを認識して使用していますレベルラベル、後でレイアウトします
のときによく使います。
6. 背景スタイル: 背景オフセット技術!
div {
background-color: ピンク;//ボックスの背景色を設定します。
background-image: url(image/02.jpg);//特定のラベルを付ける、または単刀直入に言うと
HTML ページ上のボックスの背景画像を設定するものもあります
background-repeat: no-repeat; / /画像がラベルの幅と高さより小さい場合、背景画像は 1 つだけ表示されます
background-repeat:repeat-y: 並べて表示します。垂直方向。
background-position:-104px 0px;
//position は位置を表します。 2 つの値があります。
画像を左に移動する必要がある場合は、負の値を指定します。 2 番目の値は垂直方向のオフセットを表します。画像を移動する必要がある場合は、値を負の値にする必要があります。
width: 300px;
height: 300px;
}
上記の 4 つの属性は記述するコードが多すぎるため、1 つの属性に結合することができ、非常に特殊であり、
共同書き込みを使用することをお勧めします。
背景:ピンク url(image/beauty.jpg) 0px 0px no-repeat;
7. リスト スタイル
List-style-image:url(image/02.jpg)
List-style:none;デフォルトを削除タグ
リストスタイル: 円: 中空円
リストスタイル: 正方形; 正方形
リストスタイル: 10 進数; は、順序なしリストから順序付きリストへの変換を実現します。
第 6 章 ボックス モデル
第 6 章 ボックス モデル
1. ボックス モデル
ボックス モデルには、コンテンツとボックスの属性 (ボーダー、パディング、マージン) が含まれます
ボックス モデルの実際の幅: コンテンツの幅 + 左右のパディング値側面 + 左右の両側の境界線の値
ボックスの実際の高さ: コンテンツの高さ + 上下のパディング値 + 上下の境界線
2. ボックス モデルの共通テスト問題
/*
境界線: 色を設定します。パラメータの数と意味による
1パラメータ: 4つの境界線 色はすべてこの色です
2パラメータ(赤青): 上下の色は赤、左右は青です
3パラメータ(赤青黄) : 上の線の色は赤、
左右の線は青、下の線は黄色です
4つのパラメータ()は上/右/下/左のルールに従って色を設定します
*/
の重要性ボックス モデルを Web ページ レイアウトに変換します:
注: コンテナーにパディングを設定すると、コンテナー自体のサイズが変更されるため、レイアウトするときは十分に注意してください。また、マージンを介して実装できる関数については、パディングを使用しないようにしてください。
Ul の li を ul で囲むことはできません。これは特殊なケースです。 ulにpaddingを設定してもul自体のサイズは変わりません。
2. 標準ドキュメント フロー
ブロック レベルのタグと行レベルのタグ
注: ブロック レベルのタグは、表示属性を通じて行レベルのタグに変換できます
display:block;
display:inline;
3 つの値表示属性の:
01.none: 特定の要素を非表示にします。 display: none; *Hide div*
02.block: 特定の要素を表示します。
03.inline: ブロックレベルのラベルを行レベルのラベルに変換します。
3. img 行をクリックしたときの単一の画像非表示スキーム
Transitional//EN"
"http://www.w3.org/TR/ xhtml1/DTD/ xhtml1-transitional.
dtd">