一、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/imghwm/default1.png" data-src="图片地址" class="lazy" / alt="html basics_html/css_WEB-ITnose" > 超链接标签<a> 范围标签<span> 换行标签<br /> 输入框标签<input /> 文本域标签<textarea> b.常见的图片格式: JPG GIF BMP PNG C.语法:<img src="/static/imghwm/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/imghwm/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.表格数据的分组标签:页眉
HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！
html和css算编程语言吗Sep 21, 2022 pm 04:09 PM不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。
web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
html中document是什么Jun 17, 2022 pm 04:18 PM在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。
html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PMhtml5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。
Html5怎么取消td边框May 18, 2022 pm 06:57 PM3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Atom editor mac version download
The most popular open source editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
