html: Hypertext Markup Language
Erstellen Sie die Seite mithilfe semantischer Tags „Struktur“
CSS: Cascading Style Sheet
ist für den „Stil“ der Seite und die Verschönerung der Seite verantwortlich
js: leichte Skriptsprache; Interaktion bezieht sich auf zwei Orte (Verhalten)
das Frontend selbst „Animation“ auf der Seite geschrieben
Die „Dateninteraktion“ von Front und Backend
Die Kombination aus Struktur, Stil und Verhalten
Eingebettet; (eingebettet)
<style>
body{
height:100%;
background-color: red;
}
</style>Inline-Stil
<body style="height:100%; background: #333333">
Typ des externen Links (echte Entwicklung, alle externen Links werden verwendet)
<link rel="stylesheet" href="style.css?1.1.11"/>
Inline>eingebetteter>externer Link
Bei falscher Einstellung wird manchmal in der Chrome-Konsole ein gelbes Ausrufezeichen, Aufforderung
Farbe: Farbwert; es gibt drei Möglichkeiten, Farbe auszudrücken
Tastenkombination: C+Tab
Auf Englisch: rot
rgb(255,0,0)
#fff
Schriftgröße: Schriftgröße
Tastenkombination: fsz30-> Schriftgröße:30pxfont:400 14px/28px "宋体";
Hintergrund: Hintergrund hinzufügen
Das Bild wiederholt sich standardmäßig horizontal und vertikal
Position:
Horizontale Position: links Mitte rechts
Vertikale Position: oben Mitte unten
Umfassendes Schreiben: background: url("images/bg2.png") no-repeat left center red;
background-image:url("image address")
Hintergrundwiederholung:no-repeat; /repeat-x;/repeat-y
Hintergrundposition:0 0
Hintergrundfarbe :rot
Ob die Schriftart schräg ist
Schriftstil: kursiv schräg ／ normal Normal
Unterstrichen und durchgestrichen
Textdekoration: durchgestrichen; durchgestrichen
Textdekoration : keine; Unterstreichung entfernen
Textdekoration: Unterstreichung hinzufügen
1. Etikettenauswahl: div p ul li dt dd em i u del strong b Eingabeetikett aus Tabelle
Nachteile: Es können nur allgemeine Vorgänge ausgeführt werden, und einzelne Operationen können nicht ausgeführt werden
2. Klassenauswahl
3.id:
.class名, die gleiche Seite kann unzählige gleiche Klassennamen haben
#id名, die gleiche Seite kann nur einen ID-Namen haben (ID-Namen können nicht wiederholt werden);
Im realen Entwicklungsprozess wird die Klasse zum Festlegen von Stilen und die ID zum Abrufen von Elementen verwendet
<div class="div1 div2 div3" id="div1"></div>
4. Nachkommenselektor: div p (wählen Sie alle p Elemente von Nachkommen unter dem div-Container aus)
5. Untergeordneter Selektor: div > (wählen Sie den Sohn unter dem div-Container aus); kompatibel mit IE7+
6. Schnittpunktselektor: div.div1
7. Union-Selektor: div, p
8. Platzhalter *: Stellt alle Elemente dar
9. Bestellauswahl: Kompatibel mit IE8+ >
Einzeiliger Text Zentrierung: Höhe = Zeilenhöhe
padding是内边距
padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色
padding是复合值
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下为20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左
如果现设置padding:30px
再设置padding-left:10px
请问最后的值各是多少？
左10px; 其他都是30px
margin：外边框
border:
border:1px solid #000;
border-width
border-style：solid（实体）,dashed（虚线）,dotted（点）
border-color
p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行
文本元素：p span a i em u b strong img
容器级：div li dt dd h级（不建议）
除了p，所有的文本元素，都是行内元素
所有容器级别的元素，都是块元素
块和行内元素的相互转化
display：inline; //行内
display:inline-block;//行内块
display：block; //块
关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
关于脱离文档流的方法
浮动 float:left; float:right;
绝对定位 position:absolute;
固定定位 position:fixed;
重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽
清除浮动
固定高度height:xxxpx;
缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度
overflow:hidden
clear:both
缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度
伪类清除浮动
ul::after{
display: block;
height:0;
content: '';
clear: both;
}溢出隐藏
清除浮动
缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了
透明度处理
rgba() 背景透明，文字不透明；
opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7浏览器*/ filter:alpha(opacity=10);
images文件夹：放切好的图片
css文件夹：放置css文件：index.css
index.html文件
宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
font可以继承
color可以继承：当遇到a标签的时候， color无效；
line-height可以继承
单行文本出超固定宽度出现省略号的写法：
white-space:nowrap; overflow:hidden; text-overflow:ellipsis
英文不折行的问题处理： word-wrap:break-word;
出现滚动条的写法overflow-y:scroll;
伪元素：用:和::都可以，现在建议用::
伪类：给当前选择器添加动效，只能用:
Das obige ist der detaillierte Inhalt vonZusammenfassung einiger Wissenspunkte zu HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
