Maison >interface Web >tutoriel HTML >Notes de base HTML (recommandé)

Notes de base HTML (recommandé)

黄舟
黄舟original
2016-12-21 16:07:131188parcourir

一,网页基础结构:

<html>  
    <head>  
                <title>我的第一个网页</title>  
    </head>  
    <body>  
                这是我的第一个网页   
    </body>  
</html>

注意:在HTML中,标签大部分都是成对出现的。有开始就有结束

如果不是成对出现的标签,在标签的后面加上/表示结束。

二、基本标签

1、h1-h6 标题标签
2、em 斜体
3、strong 粗体
4、hr 切割线
5、br 换行
6、p 段落标签
7、 特殊符号,空格
8、> 特殊符号,>
9、< 特殊符号,aa72fddf007c9d60039993af252e1dc5注释
13、img 图片标签

属性:src:图片的路径,alt:当图片找不到时,显示的文字
title:鼠标悬浮显示的文字
用法:
4bb88475d2540325c2d9d81479babcbd

14、a 超链接标签
属性:href:链接到哪里去
用法:
735bf6b68e3f72a266f16e9d00d44639链接5db79b134e9f6b82c0b36e0489ee08ed
锚链接
先在一个位置写上b8ded65deddd97d98c113f107406a08f5db79b134e9f6b82c0b36e0489ee08ed
然后另一个位置写上d6319e5216399bef0ef117418ac1ca1c5db79b134e9f6b82c0b36e0489ee08ed
点击这个链接,会找到这个?所在的位置

用法:
b8ded65deddd97d98c113f107406a08f链接到这了来5db79b134e9f6b82c0b36e0489ee08ed
d6319e5216399bef0ef117418ac1ca1c从这了链接5db79b134e9f6b82c0b36e0489ee08ed

15、ul-li 无序列表
用法:
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6列表项1bed06894275b65c1ab86501b08a632eb
.......
25edfb22a4f469ecb59f1190150159c6列表项nbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

注意:没有顺序,每一个li就是一行
默认情况下,每一个li前面都有一个实心小点

16、ol-li 有序列表 
用法:
c34106e0b4e09414b63b2ea253ff83d6
25edfb22a4f469ecb59f1190150159c6列表项1bed06894275b65c1ab86501b08a632eb
.......
25edfb22a4f469ecb59f1190150159c6列表项nbed06894275b65c1ab86501b08a632eb
f6f112ef45f603be226bc581f9dd5e90
就是将无序列表的实心小点换成了序号

17、dl-dt-dd定义列表
用法:
5c69336ffbc20d23018e48b396cdd57a
73de882deff7a050a357292d0a1fca94标题1c72c1af5e0e7f90179c047c5ef85885e
67bc4f89d416b0b8236eaa5f43dee742内容182e295699cff932a4d4dabba39074c35
73de882deff7a050a357292d0a1fca94标题2c72c1af5e0e7f90179c047c5ef85885e
67bc4f89d416b0b8236eaa5f43dee742内容282e295699cff932a4d4dabba39074c35
cd324b2387ec29e44e8e788c60648872

实现效果:
标题1
内容1
标题2
内容2

18、表单元素
a、text 单行文本框 
b、password 密码框
c、radio 单选按钮
d、file 文件选择器
e、checkbox 复选框
f、select 下拉列表
g、submit 提交按钮
h、reset 重置按钮
i、textarea 文本域

用法:
8fcdfe93b952e679e5a087f0d893c422
12345678941515641
40587128eee8df8f03d0b607fe983014

j、form标签 提交标签
语法:
7d106560d23a6951c56138b9e15d252a

f5a47148e367a6035fd7a2faa965022e
如果action为空,则表示提交到当前页面
method可选属性:post、get
post安全性高,提交的信息不会显示在地址栏
get安全性较低,提交的信息显示在地址栏
如果不写method属性,默认是get

k、input标签 可选值:就是表单元素a-i

l、select 下拉列表

用法:
221f08282418e2996498697df914ce4e
5a07473c87748fb1bf73f23d45547ab820164afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab820154afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab820144afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

m、2e1cf0710519d5598b1f0f14c36ba674名字:c511d7463583a6bb83e9956113e0d9b38c1ecd4bb896b2264e0711597d40766c 关联表单

作用:点击名字这两个字,鼠标会聚焦在名字后面的文本框中

三、注意:
1、标签名应该小写
2、HTML标签应闭合(结束)
3、标签应正确嵌套

四、表单属性
1、readonly="readonly" 只读
2、disabled="disabled" 禁用

五、表格
1、什么是表格?
最简单的就是队列,表格之间,可以写东西

2、表格怎么使用?
先画一个大框,再画每一行,再画每一列
f5d188ed2c074f8b944552db028f98a1
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

3、数据或者说是元素都可以放在td里面

4. Quelques attributs du tableau :
width : définir la largeur
border : l'épaisseur de la bordure
align : l'alignement, le plus courant, le centre, l'alignement horizontal
valign : l'alignement , l'alignement commun, central, haut et bas le plus courant
cellspacing="20": la distance entre la grille et la grille, la valeur par défaut est 0
cellpadding="20": la distance entre le contenu et la grille, la valeur par défaut est également 0
bgcolor : Changer la couleur d'arrière-plan

5 Fusionner :
colspan="2" : Fusionner les cellules, fusionner horizontalement
rowspan="2" : Fusionner les cellules, fusionner verticalement

Ce qui précède est le contenu des notes de base HTML (recommandé). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


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.cn