masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Jadual Kandungan
1、HTML介绍（了解即可）
2、头标签
8、表格
9、表单
10、注释 特殊字符
 
Rumah hujung hadapan web html tutorial 体育生学编程--html学习_html/css_WEB-ITnose

体育生学编程--html学习_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:49 AM

HTML学习

1、HTML介绍（了解即可）

HTML (Hyper Text Markup Language)：
HTML就是超文本标记语言的简写，是最基础的网页语言

HTML的版本： 
2.0（IETF）、3.0（W3C）、4.01（W3C）、5.0（W3C）
IETF： Internet Engineering Task Force
W3C：World Wide Web Consortium 

  HTML的特点：
是通过标签来定义的语言，代码都是由标签所组成，代码不用区分大小写
由开始，结束
由头部分

和体部分两部分组成
头部分是给HTML页面增加一些辅助或者属性信息，它里面的内容会最先加载
体部分是真正存放页面数据的地方


HTML的标签：
多数标签都是有 开始标签和 结束标签。例如：  

段落段落


其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在 标签内结束。例如：换行
分割线
 也可以写作
斜线可以不写

 HTML标签中的属性：
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性
通过对属性值的改变，增加了更多的效果选择
属性名与属性值之间用“=”连接
属性值可以用双引号、单引号、不用引号，一般都会用双引号（或公司规定书写规范）

2、头标签

<br>       页面的标题 <p class="sycode"> </p> <p class="sycode"> <base> <br>       页面超链接的基本属性 <br>         href：页面所有超链接默认从这个路径开始 <br>         target：页面所有超链接默认的target </p> <p class="sycode"> <br> </p> <p class="sycode"> <meta> <br>         页面描述信息 <br>         <meta name="keywords" content="Java,.Net,Android,iOS"> <strong>蜘蛛爬取时看，搜素引擎SEO有关</strong> <br>         <meta http-equiv="content-type" content="text/html; charset=utf-8"> 告知浏览器此页面内容、类型、编码 <br>         <meta http-equiv="refresh" content="3;url=http://www.maomao.com">三秒后刷新到某个页面 </p> <p class="sycode"> </p> <h2>3、字体<font></font> </h2> <p class="sycode"> 字体标签<font>： <br>         <strong><font size="5" color="red"></font></strong>字体标签示例 <strong></strong></font>  <br>         简单颜色可是直接写对应的英文 <br>         复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列 <br>         如：#FF0000表示红色、#00FF00表示绿色 </p> <p class="sycode"> <br> </p> <p class="sycode"> 标题标签</p> <h1>、<h2> ... <h6>： <br>         标题是文本中常用的内容，为了方便操作而定义的 <br>         其实就是某个字号和粗体的组合 <br> <h2>4、列表<dl> <dt></dt> <dd></dd> </dl> </h2> </h6> </h2> </h1> <p class="sycode"> 无标签： <br>         </p> <dl>列表、<dt>标题、</dt> <dd>列表项 <p class="sycode"> 数字标签： <br>         </p> <ol>列表、<li>列表项 <br>         type属性更改项目符号（a A 1 i I） <br> <p class="sycode"></p> <p class="sycode"> 符号标签： <br>         </p> <ul>列表、<li>列表项 <br>         type属性更改项目符号（circle空心圆、disc实心圆、square正方形）  <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"> <dl> <dt>公司部门</dt> <dd>软件研发部</dd> <dd>财务部</dd> <dd>行政部</dd> <dl> <ol type="i"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol> <ul type="square"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ul> </dl> </dl></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> </li> </ul> </li> </ol> 效果图    <p class="sycode"></p> <p class="sycode"> <br> </p> <h2>5、超链接<a></a> </h2> <p class="sycode"> 链接标签<a>： <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> <a href="http://www.maomao.com" target="_blank">猫猫学编程</a></span></span></pre><div class="contentsignin">Salin selepas log masuk</div></div>         href：要链接的地址 <br>         target：显示位置 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark"></a></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> 在页面的某个位置做出标记 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> 点击链接跳转到标记位置 <br> </a></p> <h2>6、图像<image></image> </h2> <p class="sycode"> 图像标签<img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="体育生学编程--html学习_html/css_WEB-ITnose" >： <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" align="right" border="3" alt="图片说明文字"> </span></pre><div class="contentsignin">Salin selepas log masuk</div></div>         src: 图片路径 <br>         align: 对齐方式 <br>         border: 边框粗细 <br> <p class="sycode"> 图像地图<map>： <br>         在<img src="/static/imghw/default1.png" data-src="Sunset.jpg" class="lazy" alt="体育生学编程--html学习_html/css_WEB-ITnose" >标签中使用usemap属性，指定图像可以用作地图 <br>         使用<map>及<area>标签可以把图像的一部分作为超链接 <br> </map></map></p> <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="/static/imghw/default1.png" data-src="Sunset.jpg" class="lazy" alt="图片说明文字" usemap="#Map"> <map name="Map"> <area shape="rect" coords="50,59,116,104" href="1.html"> <area shape="circle" coords="118,203,40" href="2.html"> </map></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> <br> <h2>7、框架<frameset></frameset> </h2> <p class="sycode"> 框架集合标签</p> <frameset>： <br>         <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br>         <frameset>不能放在body中 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><frameset rows="20%,*"> <frame src="1.html" name="top"> <frameset cols="20%,*"> <frame src="2.html" name="left"> <frame src="3.html" name="right"> </frameset> </frameset></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> rows：框架集合每行的高度 <br> cols：框架集合每列的宽度 <br> src：框架中显示的页面 <br> name：框架的名字，可用做超链接的target <p class="sycode"> <br> </p> <p class="sycode"> 内联框架<iframe>：      <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe> <iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span></pre><div class="contentsignin">Salin selepas log masuk</div></div>         可以在页面中嵌入另一个页面 <br>         src：要嵌入的页面 <br>         innerHTML：如果浏览器无法显示iframe，则会显示该文本 <br> </iframe></p> <h2 id="表格">8、表格</h2> <table> <p class="sycode"> 表格标签</p> <table>： <br>         <caption> 标题 <br>         </caption> <tr> 表格中的一行 <br>         <td> 放在</td> </tr> <tr>中代表一个单元格 <br>         <th> 类似</th> </tr> <tr>通常用在第一行或最后一行 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><table border="1" width="40%"> <!-- 40%会岁窗体大小变化 --> <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin="”center”"> <td>张三</td> <td>23</td> </tr> </table></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> <br> <p class="sycode"> 多行多列</p> <td>： <br>         colspan属性：控制一个单元格占多列 <br>         rowspan属性：控制一个单元格占多行  <p class="sycode"> <thead>、</thead></p> </td> </tr> <tbody>、</tbody> <tfoot>： <br>         三个标签都是放在table下，内部可以放tr标签 <br>         <thead> 表头，通常用在第一行 <br>         </thead> </tfoot> <tbody> 表体，表格中间的内容，可以有多个 <br>         </tbody> <tfoot> 表脚，通常用在最后一行        <br> <br> <br> <h2 id="表单">9、表单</h2> <form>重要<input> <p class="sycode"> 表单标签</p> </form> <form>： <br>         内部可以包含文本框、单选、多选、下拉列表等表单项 <br>         可以把用户在页面中的输入和选择提交到一个地址 <br>         常用属性： <br>         action：提交地址 <br> method：提交方式 <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><form action="%E8%A6%81%E6%8F%90%E4%BA%A4%E7%9A%84%E5%9C%B0%E5%9D%80" method="get"> <input type="text" name="username"> <input type="password" name="password"> </form></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> <br> <p class="sycode"> 输入项<input>： <br>         通过指定type属性可以定义不同的输入项： <br> text：普通文本框 <br> password：密码框 <br> radio：单选按钮 <br> checkbox：多选按钮 <br> file：文件 <br> hidden：隐藏字段 <br> submit：文本提交按钮 <br> image： 图片提交按钮 <br> reset：重置按钮 <br> button：普通按钮 <br> </p> <p class="sycode"> 下拉列表<select> <br>       默认为单选，multipe属性指定是否为多选 <br>         size属性指定显示个数 <br>         内部用<option>标签指定其中选项 <br> </option></select></p> <p class="sycode"> 文本域<textarea> <br>         rows属性指定行数 <br>         cols属性指定列数 <br> 标签<label> <br>         可以用来方便点击或者设置快捷键 <br>         <label><input type="radio"> 男</label> <br>         <label for="user" accesskey="u">用户名(u)</label> <br>         <input type="text" id="user"> <br>          <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"> <form action="success.html" method="get"> <table width="50%" border="1" cellpadding="10" cellspacing="0"> <tr> <td>用户名：</td> <td><input id="user" name="username" type="text"></td> </tr> <tr> <td>密码：</td> <td> <input name="password" id="pass" type="password"> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="radio" name="gender" value="male">男</label> <label><input type="radio" name="gender" value="female">女</label> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="checkbox" name="interest" value="smoke">抽烟</label> <label><input type="checkbox" name="interest" value="drink">喝酒</label> <label><input type="checkbox" name="interest" value="tangtou">烫头</label> </td> </tr> <tr> <td colspan="2" align="center"> <input type="file" name="portrait "> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <!--multiple="multiple" size="10" --> <option>-请选择城市-</option> <option value="bj">-北京-</option> <option>-广州-</option> <option>-成都-</option> <option>-上海-</option> </select> </td> </tr> <tr> <td>自我介绍</td> <td> <textarea name="rusume" rows="10" cols="30"> </textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"> <input type="image" src="../image/reg.gif"> <input type="reset" value="重填"> <input type="button" value="普通按钮" onclick="alert('你好！')"> </td> </tr> <label accesskey="u" for="user"></label><!-- 快捷键到指定id 仅ie支持 --> </table> <input type="hidden" name="xxx" value="ssss"> </form></span></pre><div class="contentsignin">Salin selepas log masuk</div></div> <br> <br> <br> </label></textarea></p> <h2 id="注释-特殊字符">10、注释<!-- --> 特殊字符</h2> <p class="sycode"> 特殊字符： <br>         一些特殊符号，比如 & 等，在代码中会被浏览器识别并解释 <br>         所以用一些特殊的方式来表示 </p> <p class="sycode"> <br> </p> <p class="sycode"> </p> <p class="sycode"> 注释用<!-- 注释内容--> </p> <p class="sycode"> </p> <h2 id=""> </h2> <br> </form> </tfoot> </table> </table> </frameset> </frameset> </frameset> </dd> </dl>
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.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
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
Akan R.E.P.O. Ada Crossplay?
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7552
15
Tutorial CakePHP
1382
52
Apakah format nama akaun stim
83
11
kunci pengaktifan win11 kekal
59
19
Sambungan NYT menunjukkan dan jawapan
22
96
Tunjukkan Lagi
Related knowledge
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; 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

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

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

See all articles