Maison >interface Web >tutoriel HTML >Partagez un parcours d'apprentissage du HTML
Partagez un parcours d'apprentissage du HTML
- 零下一度original
- 2017-06-24 13:23:222439parcourir
Développer le processus du site Web
Déterminer le style et les fonctions (forum, babillard électronique, paiement, connexion utilisateur, etc.).
Production artistique des rendus de pages web (page d'accueil, page de liste, page de contenu).
L'équipe de production découpe les images et les met en page dans une page Web.
Le programme d'arrière-plan commence à écrire le programme.
Le front-end et le back-end sont combinés.
Commentaires HTML
Remarque : les commentaires sont uniquement destinés à l'avenir utilisation d'entretien.
Attributs communs des puces
<ul><li>内容</li> <li>内容</li> <li>内容</li></ul>
- ou
-
l Type : Type de puce, valeur : disque (petit point noir), cercle (cercle), carré (carré plein)
Liste de numéros HTML (ordonnée)
<ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>
Attributs communs de
Type : Type de numérotation , valeurs : 1, a, A, i, I
-
Début : À partir de quel numéro commencer la numérotation
Marque de sous-titre roulant (obsolète)
<marquee> 内容….. </marquee>
Attributs communs
Direction : sens de défilement, valeurs : haut, bas, gauche, droite
Largeur : Largeur de défilement
Hauteur : Hauteur de défilement
BgColor : Couleur d'arrière-plan de défilement
ScrollAmount : Valeur de l'étape de défilement
ScrollDelay : La valeur de maintien entre deux étapes
Boucle : Le nombre de défilements de boucle
Marque d'image
Format de syntaxe :
Attribute="value">
Attributs communs :
Largeur : Largeur de l'image.
Hauteur : Hauteur de l'image.
Bordure : La bordure de l'image.
Src : Le chemin de l'image.
Aligner : gauche, centre, droite. (Peut réaliser une disposition mixte d'images et de texte)
Hspace : espacement gauche et droite entre les images et le texte.
Vspace : L'espacement supérieur et inférieur entre les images et le texte.
Lien hypertexte
Format de syntaxe : Attribute="Valeur"> ; Contenu
Attributs communs :
Href : fichier cible Adresse URL .
Cible : Méthode ouverte. _blank : nouvelle fenêtre, _self : cette fenêtre, _parent : la fenêtre précédente s'ouvre, top : la fenêtre de niveau supérieur s'ouvre.
Nom : Définissez le nom du point de dessin.
mailto
#Lien vide.
Représentation des couleurs HTML
Il existe trois façons d'exprimer :
Mots de couleur : bleu, vert, rouge, jaune.
Représentation décimale : rgb (255, 0, 0)
Représentation hexadécimale #FF0000 (rouge), #00FF00 (vert), # 0000FF (bleu)
Lien d'ancrage
Signification : le lien d'ancrage permet d'accéder à différentes zones d'une page Web
Aller au point d'ancrage (marqueur) :
Syntaxe : Contenu…..
Balises
Fonction : Fournir des méta-informations du Web pages. Spécifiez des mots-clés de recherche pour les pages Web.
La balise a deux attributs : http-equiv et name
1. Attribut http-equiv
Fonction : simuler un fichier de protocole http. les informations d'en-tête indiquent au navigateur comment ouvrir la page Web.
L'attribut http-equiv est généralement utilisé en conjonction avec l'attribut content. L'attribut Content spécifie les attributs détaillés de l'information
Définissez le jeu de caractères de la page Web :
Actualiser automatiquement la page Web :;
2. > définit le mot-clé de recherche et le droit d'auteur des informations sur la page Web, les auteurs, etc.
（1） 设置网页搜索关键词
（2） 设置网页描述信息
Xhtml规范
l 所有标记和属性全部小写
l 单边标记必须关闭。如：
-----l 所有的属性值都必须加引号。
l 所有属性都必须有值。如：
---l 标机之间要顺序嵌套，外层套内层。
l Xhtml网页必须有DTD文档类型定义代码
DTD文档类型定义
三大类型：
表格标签
（1）结构：(一行四列)
<table border=“1”> <tr><td> </td><td> </td><td> </td><td>< /td> </tr></table>
（2）border属性：
Width：宽度
Height：高度
Border：边框
Bordercolor：边框颜色
Bgcolor：表格背景色
Background：背景图片
Cellpadding：单元格与内容距离
Cellspacing：单元格与单元格距离
Rules：合并边框线，取值：all
（3） tr属性：
bgcolor
align
height：水平：left、center、right
valign：垂直：top、middle、bpttom
（4） td属性：
colspan：合并单元格（左右）
rowspan：合并单元格（上下）
background
width
height
bgcolor
align
valign
表单
（1）结构：
<form name=”form1” method=“get” action=“login.php”> 用户名：<input type=”text” name=”username”/> 密码：<input type=”password” name=”userpwd”/> <input type=”submit” value=”提交表单”/></form>
（2）标记属性----块元素
name
method:提交方式 get、post
action：指定表单的处理程序，一般是PHP文件
enctype：指定表单数据的编码方式。只能在method=post情况下。
application/x-www-form-urldecoded //默认加密方式
multipart/form-data //上传文件，值是他自己
（3）get和post方法
Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全
如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。
POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。
单行文本域
语法格式：属性=“值”>
属性：
name：文本框的名字
Type：表单元素类型
Value：文本框的值
Size：文本框的长度
Maxlength：最多可以输入多少个字符。
Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
Disabled：禁用属性 同上。
单行密码域
语法格式：
属性：
name：文本框的名字
Type：表单元素类型
Value：文本框的值
Size：文本框的长度
Maxlength：最多可以输入多少个字符。
Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
Disabled：禁用属性 同上。
单选按钮
语法格式:男
女
属性：
name：元素名称
Checked：默认选择checked=“checked”
Value：值
复选框
语法格式： 游戏
杀人
放火
属性：
name：元素名称
Checked：默认选择checked=“checked”
Value：值
下拉列表
语法格式：
<select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>
：只有一个name属性。 ：两个属性value、selected Selected：默认选中
层叠样式表方式改下拉列表宽度：type=”width:100px”
文本区域
语法格式：
属性：
name：元素名称
Cols：宽度
Rows：高度
各种按钮
提交按钮
重置按钮
图片按钮
普通按钮
普通按钮本身不具备任何功能，需与js配合使用。
上传文件域
语法格式：
属性：
Name：名称
Value：上传文件名。Value属性是只读属性，
必须与
隐藏域
功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。
语法格式：
表格标题 语法格式：
是 的子标记。
放在 的后面。
网页多媒体
网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。
图片热点
图片热点：给一张图片加多个热点。
语法结构：
<ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /></map>
标记常用属性：
Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）
Coords：热区的坐标
如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”
（x1,y1）为左上角坐标，（x2，y2）为右下角坐标。
如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。
普通框架
框架集和框架页：
框架集：
:主要用来划分窗口。框架页：:主要用来指定默认显示的网页地址。
属性：
Cols:划分左右型框架。
Cols=”200,*” 左边为宽度200px，剩下的为右边。
Cols=”180,*,180” 左右框架为180px，剩下的为中间框架
Rows：划分上下型框架
Rows=”200,*” 上框架高度为200px，剩下的为下框架。
Frameborder：是否显示边框线，取值0或1.
Border：边框粗细。
Bordercolor：边框颜色。
框架页的属性 ：
Src：该小窗口中，默认显示的网页地址。
Noresize：不能调整大小。Noresize=”noresize”
Scrolling:是否显示滚动条，取值：auto、yes、no
Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。
</strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容 内嵌框架（行内框架）
与普通框架区别：
常用属性：
Src：引入文件地址。
Width：宽度
Height：高度
Frameborder：是否显示框架的边框线，取值：yes或no。
Scrolling：是否显示滚动条。取值：yes、no、auto。
Name：制定小窗口的名称，改名称也是给标记的target属性来用。
Align：框架在网页中对齐方式，取值：left、center、right。
CSS简介
CSS 层叠样式表。
CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。
语法格式：
<style type=”text/css”> h1{Color:red; //文本颜色 Text-align:center; //对齐方式 Border:1px solid #444; //半框样式 Background-color:#ffff00; //背景色}</style>CSS选择器
基本选择器
(1) “*”选择器：通配符
描述：将匹配所有的html标记，所有标记都会改变。
语法：*{color：red；}
（2）标签选择器
描述：将匹配指定的html标记
语法：h1{color：red；}
（3）class选择器（类选择器）-----使用最多的选择器
描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。
格式：
(3) Sélecteur d'élément enfant
Description : Ajouter un style aux éléments enfants d'un élément
Attribut de taille CSS
Largeur : largeur de l'élément , assurez-vous d'ajouter des unités px.
Hauteur : Hauteur de l'élément.
Propriétés de la police CSS
Taille de police : taille du texte. Par exemple : taille de police : 14px ;
Famille de police : police. Par exemple : famille de polices : Microsoft Yahei ;
Style de police : italique, valeur : italique. Par exemple : font-style : italic ;
Font-weight : gras, valeur : gras. Tels que : font-weight : gras ;
Attribut de texte CSS
Couleur : couleur du texte
Décoration de texte : ligne de décoration de texte, valeurs : aucune, souligné, surligné, traversé
Alignement de texte : alignement horizontal du texte, valeurs : gauche, centre, droite
Line-height : hauteur de ligne, qui peut être une valeur fixe ou un pourcentage, telle que : line-height : 24px ;
Text-indent : La première ligne est en retrait. Retrait du texte : 28 px ; - Espacement des lettres : espacement des mots.
- Sélecteur de pseudo-classe
Un lien hypertexte à quatre états
- Etat normal (:lien) : souris Le style de le lien précédent n'est pas placé.
- Put status (:hover) : Le style lorsque la souris est placée sur le lien.
- Etat d'activation (:action) : Maintenez enfoncé le bouton gauche de la souris sans le relâcher.
- Statut visité (: visité) : appuyez sur le bouton gauche de la souris et faites-le apparaître, le style à ce moment-là.
A:link,a:visited{ color :#444;text-decoration:none; } //Combinez "l'état normal" et "l'état visité" en un seul.
A:hover{ color:#990000;text-decoration:underline; } //"Survoler la souris" pour créer un seul effet
Attribut de liste CSS
Liste - style : style de liste, valeur : aucune. Supprimez divers symboles avant les puces ou les chiffres.
>
-
Attributs de bordure CSS : Chaque élément peut ajouter une ligne de bordure
Border-left : ligne de bordure gauche.
Format : bordure gauche : Couleur des lignes épaisses et fines
Style de ligne : aucun, plein, pointillé (ligne pointillée), pointillé ( Ligne pointillée)
Exemple :- bordure gauche : 5px en pointillés rouges
- Bordure droite : bordure droite Fil ; .
- Border-top : Ligne de bordure supérieure.
- Bordure-bas : ligne de bordure inférieure.
Bordure : ajoutez des bordures sur quatre côtés en même temps.
Propriétés de remplissage CSS : remplissage de la ligne de bordure au contenu
Remarque : Lorsque nous appelons habituellement les propriétés width et height, elles font référence à la largeur et à la hauteur du contenu . N’inclut pas les marges intérieures et extérieures ni les lignes de bordure. - Padding-left : distance de remplissage intérieure gauche, distance de la ligne droite au contenu.
- Rembourrage à droite : distance de rembourrage intérieure droite. Idem que ci-dessus
- Rembourrage-top : Top.
Paddingbottom : Suivant.
Forme abrégée
Rembourrage : 10px ; //Le rembourrage sur les quatre côtés est respectivement de 10px
- Remplissage : 10px 20px ; //Le haut et le bas font 10px ; la gauche et la droite font 20px ;
- Remplissage : 20px 10px 5px 20px ; en haut à droite, en bas à gauche
- Marge-gauche : La distance vers l'extérieur de la ligne gauche
- Marge-droite : Droite...
- Marge supérieure : Haut…….
- Marge inférieure : Bas…….
- Abréviation :
- Marge : 10px 20px ; //Les marges supérieure et inférieure sont de 10 px, et les marges gauche et droite sont de 20 px.
Marge : 10px 20px 50px ; //La marge supérieure est de 10px, les marges gauche et droite sont de 20px et la marge inférieure est de 50px.
Marge : 10px 20px 30px 40px ; //L'ordre est en haut à droite, en bas à gauche.
Propriété d'arrière-plan CSS
Couleur d'arrière-plan : couleur d'arrière-plan.
Image d'arrière-plan : Adresse de l'image d'arrière-plan. Image d'arrière-plan : url (image/banner.jpg)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cnArticle précédent：Comment résoudre le problème selon lequel une partie de la fenêtre contextuelle « reste toujours sur la page » après l'avoir fermée dans iOS ?Article suivant：Comment résoudre le problème selon lequel une partie de la fenêtre contextuelle « reste toujours sur la page » après l'avoir fermée dans iOS ?