HTML的列表、表单、语义化使用方法总结-tutorial js-php.cn

1.有序列表ol>li；列表有顺序编号（默认列表前加1.，2.，3.，...编号），适用于有逻辑顺序的排列项目，而且次序不能乱。
2.无序列表ul>li；列表无顺序（默认列表前加"."），适用于并列显示的项目，项目无先后顺序
3.自定义列表dl>dt表头>dd表内容,dt为项目名称，dd项目名称的描述，一个项目名称可以有多个项目描述。自定义列表更简单，精准
如何嵌套：把一个元素放在另外一个元素中称为"嵌套"，在列表中，可以把一个ol或者ul作为某个li的内容，这样就在列表中嵌套了另一个列表。
示例：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>html4-001</title>
</head>
  <body>
    <ol class=&#39;order&#39;>
      <li>有序列表0001</li>
      <li>有序列表002
        <ul class=&#39;unordered&#39;>
          <li>嵌套无序列表001</li>
          <li>嵌套无序列表002</li>
        </ul>
      </li>
      <li>有序列表0003</li>
      <li>有序列表004
        <dl>
          <dt>
            自定义列表001<dd>自定义列表项目描述</dd>
          </dt>
        </dl>
      </li>
    </ol>
  </body>
</html>

Salin selepas log masuk

去除列表前面默认样式
ul{list-style:none;}

CSS 标签中 class 和 id 的区别

id在页面上是唯一标识，class在页面上标识某一类型的样式，具有普遍性，可以重复使用。某元素的class名可以写成class="intro other"，即可以有多个class名，代表叠加两个类名称对应的样式。id名不能这样写。ID名常用在页面布局（标记大框架），class一般在局部页面布局中使用，用于样式定义，因为class可以重复，所以为多个元素赋予同一class简化代码量。

块级元素、行内元素的区别

块级元素：独占一行可设置宽,高,margin,padding。块级元素是其他元素的容器元素，可以容纳其他块元素或者行内元素;行内元素只能够容纳文本内容或者其他的行内元素。常见块级元素：p,p,h1..h6,table,tr,ul,li,dl,dt,form
行内元素：占用空间是他自身的宽度。对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的。行内元素可以通过line-height来设置高度。常见行内元素：a,span,img,input,button,em,textarea
块级元素中宽高和内外边距都可以设置的；行内元素设置宽高是无效的，它本身内容的宽度就决定了它的宽高，不能手动设置，行内元素的左右margin和padding是有效的，上下的margin和padding是不占据空间的，但是加边框后能看见其范围。注意上下方向设置margin，padding元素范围是增大了，但是对元素周围的内容是没影响的。a元素为行内元素，改变上下padding时元素范围增大（边框可看出），但对周围元素无影响。

display: block、display: inline、display: inline-block的区别

display:none;将元素设置成不显示，脱离文档流，但在dom树中还存在
display:table-cell;将元素设置成表格单元格，可通过vertical-align=middle设置垂直居中（vertical-align仅对行内元素和表格单元格元素生效）
display:block; 将元素设置成块级元素
display:in-line;将元素设置成成行内元素
display:inline-block;将元素设置成行内块元素，既像行内元素水平排列，又能像块级元素设置宽高，设置上下左右padding，margin。inline-block:IE8以下浏览器不支持

HTML CSS 语义化

选择正确合适的标签，合理的标签命名，使用合理的代码结构，语义化使页面结构更清晰，代码更加便于阅读和维护，同时便于爬虫和浏览器更好的解析。标签语义化明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。书写代码时注意的细节：命名要有含义，单词组用中横线连接，大小写规则统一。在网页上要展示出来的页面内容一定要放在body标签中。

常用的input 标签

form表单的作用是把用户输入的数据提交到后台。其name属性为表单提交的名称，action属性为提交到的网址（如不写默认提交到当前页面），method属性为提交方式get/post。
常见input标签

<form action="">
      <input type="text" name="username"> 单行文本区 <br />
      <input type="password" name=&#39;pwd&#39;>密码区  <br />
      <input type="radio" name="sex" value="male"> 男 <br />
      <input type="radio" name="sex" value="female"> 女 <br />
      <input type="checkbox" name="lov[]"> 汽车 <br />
      <input type="checkbox" name="lov[]"> 游戏 <br />
      <input type="checkbox" name="lov[]"> 旅游 <br />
      <textarea>请输入文本</textarea> <br />
      <select multiple="multiple">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      </select> <br />
      <input type="submit" name="submit"> 提交 <br />
      <input type="reset" name="reset"> 重置 <br />
      <input type="hidden" name="hidden"><br />
    </form>

Salin selepas log masuk

input标签中 post 和 get 方式的区别

get（GET用于信息获取）:把要提交的数据拼装成url，提交的数据信息可见。get一般用于提交少量数据，浏览器限制最多提交1K（浏览器地址栏装不下超过1K的信息啊）。get提交的数据会保存在浏览器历史记录中，不安全。
post（向服务器传送数据，是可能修改服务器上的资源的请求）:提交的数据不是url，所以数据内容不可见，可提交大量数据，浏览器无限制，文件大小受服务器限制.

如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为URL的一部分。而另一方面，使用POST样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容.

在input标签中的name属性

input标签设置了name属性，才能在提交表单时传递属性和value值。另外，input在checkbox,radio类型中，name一致时代表选项为一组。

<input type="checkbox" name="love[ ]" value="bike" checked/>自行车
<input type="checkbox" name="love[ ]" value="car" />小车

Salin selepas log masuk

love[ ]为数组形式，当可选项太多时，用这种数组方式便于js获取数组对应的值

input标签中radio分组

单选按钮radio元素，当radio元素的name值一样时，这些input标签归为一组。即同一组的单选按钮，name 取值一定要一致，比如下面例子输入性别的时候，name属性为同一个名称“sex”，这样同一组的单选按钮才可以起到单选的作用。如果name不一致，那么两个选项就都能选，这样就失去了单选按钮的意义。

<input type="radio" name="sex" value="男">男</input>；
<input type="radio" name="sex" value="女">女</input>；

Salin selepas log masuk

input标签中的placeholder 属性

在输入框的提示信息
<input type="text" name="username" placeholder="默认信息"> 单行文本区

input标签中的type=hidden隐藏域的作用

隐藏域（暂存数据用户不可见，可用作后台预埋密钥信息以验证用户提交数据是否为伪造，只有当服务器接收到的hidden和服务器预埋在页面的信息一致时，才能成功提交表单数据）
示例：type="hidden"的元素用户不可见，但提交表单时，hid的值test已提交后台。

按钮的常见样式及区别

<button>提交</button>
普通按钮，需要绑定js事件后点击后才有效

<a class="btn" href="#">提交</a>
应用了自定义按钮样式的a链接，点击后跳转到某个页面，让a链接应用按钮的样式是因为鼠标悬停a链接时有手势，让用户觉得是可点的。

<input type="submit" value="提交">
是form表单的提交按钮，将form表单中的数据发送给后台服务器

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7653

Tutorial CakePHP

1393

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Jawapan silang kata NYT mini

110

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles