html基础_html/css_WEB-ITnose
一、HTML的基本标签
1、html文件的基本结构
a、HTML : Hypertext Markup Language 超文本标记语言
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>网页标题</title> 6 </head> 7 <body> 8 主体 9 </body>10 </html>
b.基本结构:头部(head) 主体(body)
c.所有内容都在标签之内
内放的是头部信息，是对页面的描述，不会直接显示在页面中
内的
是页面的主体，大部分显示内容都定义在这里
d.编辑工具：记事本、UltraEdit等,开发人员用VisualStudio写html就够了2.块级标签(基本的) a.标题标签<h1>~<h6> 段落标签<p> 水平线标签<hr /> b.常用于页面布局的块级标签：有序列表<ol> 无序列表<ul> 定义列表<dl> 表格标签<table> 表单标签<form> 分区标签<div>3.行级标签 a.图像标签<img src="/static/imghw/default1.png" data-src="图片地址" class="lazy" / alt="html基础_html/css_WEB-ITnose" > 超链接标签<a> 范围标签<span> 换行标签<br /> 输入框标签<input /> 文本域标签<textarea> b.常见的图片格式: JPG GIF BMP PNG C.语法:<img src="/static/imghw/default1.png" data-src="图片地址" class="lazy" alt="图像的替代文字" title="鼠标悬停提示文字"/>
4.常使用如下四种块状结构： a.Div-ul(ol)-li：用于分类导航或菜单等场合 b.Div-dl-dt-dd：用于图文混编场合 c.Table-tr-td：用于规整数据的显示 d.Form-table-tr-td：用于表单布局的场合5.XHTML1.0的基本规范： a.标签名和属性名称必须小写 b.HTML标签必须关闭 c.属性值必须用引号括起来 d.标签必须正确嵌套 e.必须添加文档类型声明：
①该声明必须位于HTML文档的第一行
②有三种级别声明：Strict(严格类型) Transitional(过度类型) Frameset(框架类型)
二、HTML的基本标签(二)和表单
1.超链接: (target常用取值:_self(自身窗口)和_blank(新建窗口))
2.超链接的三类应用场合:
a.页面间链接 : A页到B页,用于网站导航
b.锚链接 : A页的甲位置到A页(本页)的乙位置或A页甲位置到B页的乙位置
1 <a href = "#star">[明星专区]</a>2 3 <!-- 链接到同一个网页的特定位置 -->4 <a name = "star"><img src="/static/imghw/default1.png" data-src="images/adv.jpg" class="lazy" alt="明星专区" title="明星专区">a>
c.功能性链接 : 在页面中调用其他程序功能
1 <!--例:电子邮箱链接,mailto:创建电子邮箱链接-->2 <a href="mailto:guimeiWebMater@gmgw.com">站长信箱</a>
3.HTML注释：
4.html中的特殊符号:
a.空格( ) 大于号(>) 小于号(<) 引呈(") 版权符号(©)
5.表单
a.语法格式:
1 <!--2 1.get 是指将用户填写的信息作为一个字符串连接到地址栏一起提交，连接符用"?"隔开3 2.post 是指将用户填写的信息作为一个数据包提交，数据包是经过编码的4 -->5 <form action="表单提交地址" method="提交方法(1.get 2.post)">6 <!--文本框.按钮等表单元素-->7 </form>
b.表单元素的基本格式:
1 <!--type可用的选项有:text\password\checkbox\radio\submit\reset\file\hidden\image\button-->2 <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中(单选或复选才用)" />
6.表单元素介绍
a.文本框(text)
1 <form action="" method="post">2 <p> 用户名:3 <input type="text" value="张三" size="20" name="userName" />4 </p>5 </form>
b.密码框(password)
1 密码:<input type="password" name="pass" />
c.重置\提交与普通按钮
1 <input type="submit" value="提交按钮" name="submit" />2 <input type="reset" value="重置按钮" name="reset" />3 <input type="button" value="普通按钮" name="button" />4 <!--图形提交按钮-->5 <input type="image" src=" " />
d.单选按钮(radio)
1 <input type="radio" name="gen" class="input" value="男"/>男2 <input type="radio" name="gen" class="input" value="女"/>女
e.复选框(checkbox)
1 <input type="checkbox" name="hobby1" value="1" />运动2 <input type="checkbox" name="hobby2" value="2" />聊天3 <input type="checkbox" name="hobby3" value="3" />玩游戏
f.文件域(file)
1 <input type="file" name="file" />
g.下拉列表框(select)
1 <!--name:指定列表 value:可选择的值-->2 向往月份：3 <select name="c"> 4 <option value="0" selected="selected">请选择</option>5 <option value="1" >1月</option>6 <option value="2">2月</option>7 </select>
h.多行文本域(textarea)
1 <!--cols:指定多行文本域的列数 rows:指定多行文本域的行数-->2 <textarea name="textarea" cols="40" rows="6">初始文本内容</textarea>
i.隐藏域(hidden)
1 <!--隐藏用户ID信息333-->2 <input type="hidden" name="userid" value="333">
j.只读和禁用属性
只读:readonly="readonly" 禁用: disabled="disabled"
7.结合表单做的简易求职表
1 <html> 2 <head> 3 <title>简单表单小结</title> 4 </head> 5 <body> 6 <div> 7 <form action="" method="post"> 8 <h3 id="申请表">申请表</h3> 9 <p>10 姓名：<input type="text" name="text" size="20"/> <br />11 密码：<input type="password" name="pass" size="21"/> <br />12 照片：<input type="file" name="files"/><br />13 感兴趣的职位：<br />14 <input type="radio" name="radio" class="input" value="1"/>Web设计15 <input type="radio" name="radio" class="input" value="2"/>Web开发 <br />16 喜欢的月份：<select name="c"> 17 <option value="0">请选择</option>18 <option value="1">1月</option>19 <option value="2">2月</option>20 <option value="3">3月</option>21 <option value="4">4月</option>22 <option value="5">5月</option>23 <option value="6">6月</option>24 <option value="7">7月</option>25 <option value="8">8月</option>26 <option value="9">9月</option>27 </select> <br />28 协议：<br />29 <textarea readonly="readonly" name="textarea" cols="20" rows="4">老鼠爱大米------</textarea> <br />30 <input type="checkbox" name="ckbox"/>我认真阅读并接受以上协议。<br />31 经验：<select name="ca"> 32 <option value="0">无经验</option>33 <option value="1">一年</option>34 <option value="2">三年</option>35 <option value="3">五年</option>36 </select> <br />37 <input disabled="disabled" type="submit" name="button" value=" 提交 "/>38 <input type="reset" name="reset" value=" 重置 "/>39 </p>40 </form>41 </div>42 </body>43 </html>
三.表格的应用和布局
1.表格的基本语法
1 <table>2 <tr>3 <td>第一行第一个单元格的内容</td>4 </tr>5 <tr>6 <td>第二行第一个单元格的内容</td>7 </tr>8 </table>
2.跨行跨列
1 <!-- 2 合并单元格 1.合并列 colspan = 列数 3 2.合并行 rowspan = 行数 4 注：只能用在<td>和<th>中 5 --> 6 <table border="1" whdth="100" height = "100"> 7 <tr> 8 <td rowspan="3">合并第一列的一行和二行</td> 9 <td colspan="2">合并第一行的二列和三列</td>10 </tr>11 <tr>12 <td>第二行第一个单元格的内容</td>13 <td>第二行第二个</td>14 </tr>15 </table>
3.表格的高级标签
a.表格标题:
b.表格表头:
c.表格数据的分组标签:页眉
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
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)
Topik panas
1370
52
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.
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
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.
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
