Rumah hujung hadapan web html tutorial HTML/CSS从零开始-HTML基础(一)

HTML/CSS从零开始-HTML基础(一)

Oct 09, 2016 pm 03:29 PM

一、web标准

1.1结构

(1)xhtml(Extensible Hypertext Markup language) 可扩展超文本标记语言  
(2)W3C(world wide web consortium)万维网联盟

a、制定了结构(xhtml、xml)、表现(css)、标准。

1.2表现

(1)css(cascading style sheets)层叠样式表

1.3行为

(1)ECMA(Europan Computer Manufactures Association)欧洲电脑场商联合会
a、制定了行为 DOM(Document Object Model) 文本对象模型
b、ECMAscript标准

二、HTML基本结构

<!doctype html>
<html>
  <head>
  <meta charest="utf-8">     <!--编码格式-->
  <title></title>
  </head>
  <body>
  <h1></h1>                   <!--标题-->
      .
      .
      .
  <h6></h6>
  <p></p>                      <!--段落-->
  </body>
</html>
Salin selepas log masuk

三、基本语法

3.1常规标记

<标记 属性1="属性值1" 属性2="属性值2" >
如下:

3.2空标记

<标记 属性="属性值"/>
如下:


<!--水平线-->



空格

四、常见标记(标签)

4.1列表

a、有序列表

 <ol>  ordered
  <li></li>
  <li></li>
  <li></li>  
</ol>
Salin selepas log masuk

b、无序列表

<ul>  unordered
  <li></li>
  <li></li>
  <li></li>  
</ul>
Salin selepas log masuk

c、自定义列表

<dl>  definition list
  <dt>被解释</dt>  
  <dd>解释</dd>  definition description
</dl>
Salin selepas log masuk

说明:dd可以重复,但是dt只允许有一个;
      有序列表中参数 tyle="A",start="3",//第一个序列从C开始。

4.2图片标签

图片(插入错误时)替换文本

4.3超链接

路径分为:绝对路径(https//www.baidu.com),相对路径如(images/inder.html).
target默认属性值为_self;_blank为打开新窗口

4.4块标签

说明:a、块之间自动换行
      b、如果p块限定宽、高,内容为中文时,自动换行;如果是英文不换行,会溢出。

说明:a、span块之间不换行,宽高不能限定,随着文本的长度变化。

4.5表格标签

1、语法:

2、说明;在表格给定宽高后,用属性cellpadding时,如果给定宽度超出设定的宽高,表格会被撑开。

 
     
        
     
     
     
     
        
     
     

3、单元格合并属性

colspan 合并列
   rowspan 合并行
   语法:rowspan="3"  //合并三行

4、表单
a、表单框
 语法:


说明:

b、文本框


c、密码框


d、单选框

如下:



e、多选框

择偶标准


185


东北

disabled="disabled"(禁用、禁选)
checked="checked"(默认选中)
f、重置
(1)  (重置,清空以上填写的数据)
g、按钮
(1)
(2)

说明:按钮作为标签时既跳转,又提交

h、下拉列表
(1)

i、文本域


注明:
(1)以上文本框放在表单form里;

(2)在form中属性method的属性值post/get的区别?
    a、get是从服务器上获取数据,post是向服务器传送数据;
    b、get是把参数值加到提交表单的Action的属性所指的URL中,值和表单内的各个字段一一对应,在URL中可以看见,
       post是通过HTTP,post机制将表单内的各个字段与其内容放置在HTML HEADER内一起传送给ACTION属性的URL地址,用户看不见这个       过程。
   c、对于get方式,服务器端的ReqestQueryString获取变量的值,对于post方式服务器用Request.Form获取提交数据。
   d、get数据传输量小不大于2kb,post的传输量大,一般不受限制
   f、get安全性低,post安全性高,但传输效率高

 (3)value在input中的用法
  a、type="button" /"reset"/"submit";表示按钮上的文本
  b、type="text"/"password";表示初始值
  c、type="check"/"radio"定义与输入相关值

 (4)表单嵌套


 
 
    
    
 
 
    
    
 

Kenyataan Laman Web ini
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

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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

See all articles