cari

HTML学习笔记二

Apr 19, 2018 pm 02:32 PM
htmlbelajarnota


这篇文章介绍的内容是关于HTML学习笔记二 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

1、表格f5d188ed2c074f8b944552db028f98a1

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

a34de1251f0d9fe1e645927f19a896e8......fd273fcf5bcad3dfdad3c41bd81ad3e5定义行,b6c5a531a458a2e790c1fd6421739d1c......b90dd5946f0946207856a8a37f441edf定义列

表头表示:

<tr>
<th>heading</th>
</tr>

如果要表示一个空行,可以用 空格占位符填充。


2、列表



第一种:无序列表——ff6d136ddc5fdfeffaf53ff6ee95f185,使用粗体圆点标记

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>


或者使用23ec1a299af46ad32652ba28fd007bda……使用的是空心圆点。


第二种:有序列表——c34106e0b4e09414b63b2ea253ff83d6,使用数字标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>


或者使用61a13d49ba8636eb9c26f7a27b511a73……表示数字从50开始标记。




第三种:自定义列表——5c69336ffbc20d23018e48b396cdd57a

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>


说明:

5c69336ffbc20d23018e48b396cdd57a表示列表开始



73de882deff7a050a357292d0a1fca94表示列表项

67bc4f89d416b0b8236eaa5f43dee742表示列表项的定义



注意,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。




3、HTML类

对HTML进行分类,能为元素的类定义CSS样式。



对相同的类设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<p class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</p> 

</body>
</html>



e388a4556c0f65e1904146cc1a846bee是块级元素,用于设置相同类。

45a2772a6b6107b401db3c9b82c049c2是行内元素。

<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>



4、HTML网站布局

(1)使用e388a4556c0f65e1904146cc1a846bee进行布局

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>


使用1b1ac9566b1620cdb08777896eff50cf......94b3e26ee717c64999d7867364b1b4a3

(2)HTML5提供的新语义元素



1aa9e5d373740b65a0cc8f0a02150c53定义文档或节的页眉

c787b9a589a3ece771e842a6176cf8e9定义导航链接的容器



2f8332c8dcfd5c7dec030a070bf652c3定义文档中的节

23c3de37f2f9ebcb477c4a90aac6fffd定义独立的自包含文章



15221ee8cba27fc1d7a26c47a001eb9b定义内容之外的内容(侧栏)(?还没搞清楚这是什么)

c37f8231a37e88427e62669260f0074d定义文档或节的页脚



a5e9d42b316b6d06c62de0deffc36939定义额外的细节

631fb227578dfffda61e1fa4d04b7d25定义details元素的标题




5、框架

通过使用框架,可以在同一个浏览器窗口显示不止一个页面。每份HTML文档成为一个框架,并且每个框架都独立与其他的框架。



(1)框架结构标签f900b4fc197b16ab214eecf015bb6bd2

每个f900b4fc197b16ab214eecf015bb6bd2定义列一系列行、列



rows/columns的值规定了每行或每列占据屏幕的面积

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>


(2)其他

一般地,一个框架有可见边框,用户可以拖动边框来改变它的大小。若想避免,可以在04a0d55efbbfd646a993fbc01f262c57中添加 noresize="noresize" 。



不能将6c04bd5ca3fcae76e30b72ad730ca86d标签与f900b4fc197b16ab214eecf015bb6bd2标签同时使用。不过添加包含一段文本的37f861bd36cef5b6406eba87d20a5bab标签,就必须将这段文字嵌套于6c04bd5ca3fcae76e30b72ad730ca86d标签内。

<html>

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>

</frameset>
</html>

04a0d55efbbfd646a993fbc01f262c57中可以使用name锚属性,来转跳到指定节。



d5ba1642137c3f32f4f4493ae923989c用于在网页内显示网页

用法:6b73adb9df5d60664962433b1d64d459065276f04003e4622c4fe6b64f465b88



iframe可用作链接的目标(target),该链接的target属性必须引用iframe的name属性。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>


注意,由于链接的目标匹配iframe的名称,所以链接会在iframe中打开。

相关推荐:

HTML学习笔记一

Atas ialah kandungan terperinci HTML学习笔记二. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apr 25, 2025 am 12:01 AM

Atribut Boolean adalah atribut khas dalam HTML yang diaktifkan tanpa nilai. 1. Atribut Boolean mengawal tingkah laku elemen dengan sama ada ia wujud atau tidak, seperti dilumpuhkan melumpuhkan kotak input. 2. Prinsip kerja mereka adalah untuk mengubah tingkah laku elemen mengikut kewujudan atribut apabila penyemak imbas. 3. Penggunaan asas adalah untuk menambah atribut secara langsung, dan penggunaan lanjutan dapat dikawal secara dinamik melalui JavaScript. 4. Kesalahan umum adalah tersilap berfikir bahawa nilai -nilai perlu ditetapkan, dan kaedah penulisan yang betul harus ringkas. 5. Amalan terbaik adalah untuk memastikan kod ringkas dan menggunakan sifat Boolean dengan munasabah untuk mengoptimumkan prestasi laman web dan pengalaman pengguna.

Bagaimana anda boleh mengesahkan kod HTML anda?Bagaimana anda boleh mengesahkan kod HTML anda?Apr 24, 2025 am 12:04 AM

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML vs CSS dan JavaScript: Membandingkan Teknologi WebHTML vs CSS dan JavaScript: Membandingkan Teknologi WebApr 23, 2025 am 12:05 AM

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Html sebagai bahasa markup: fungsinya dan tujuannyaHtml sebagai bahasa markup: fungsinya dan tujuannyaApr 22, 2025 am 12:02 AM

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebMasa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AM

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

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

Alat panas

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.