位置: IT常识 - 正文
web 前端 基础HTML知识点(html前端技术)
编辑：rootadmin推荐整理分享web 前端 基础HTML知识点(html前端技术)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:web前端零基础视频教学,web前端基础知识,web前端基础知识,web前端基础html+css书,web前端基础代码总结,web前端开发html总结,web前端基础html+css书,web前端基础html+css书,内容如对您有帮助，希望把文章链接给更多的朋友！
html是超文本标记语言（Hyper Text Markup Language），是一种使用标记标签来描述网页的语言。
超文本用超链接的方法将各种不同空间的文字信息组织在一起的网状文本。可以用来链接图片，音频，视频，动态图片等
W3C标准结构化标准语言（XHTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
HTML标签标签一般成对存在，如<html></html>
结构体标签<!DOCTYPE html>说明html5中文档的类型是html文档
html标签<!--html的根标签--><html></html>title标签<!--设置网页标题--><title>我的网页</title>meta标签<!-- meta标签，charset 设置网页字符集编码--><meta charset="utf-8"><meta name="keywords" content="关键字"><meta name="description" content="描述">body标签<!--体标签，网页呈现的内容--><body>内容</body>文本标签注释<!-- 注释的内容 -->标题<!-- 数字范围：1 ~ 6，数字越大，字体越小--><h数字>标题<h数字>字体<!-- font标签 --><!-- 属性color：文字颜色（英文单词、#+6位16进制的颜色值、rgb(,,)）--><!-- 大小seize：选值1-7，默认是3 --><!-- 字体face：选择字体名称 --><font color=red>HelloWorld</font>换行<!-- 单标签，换行 --><br/>水平分割线<!-- hr标签，分割线，单标签 属性 color：颜色 width：可以使用像素（px）或者百分比 align：水平对齐方式，默认居中--><hr width="80%" aligin=left>加粗<b></b>倾斜<i></i>下划线段落<p></p>居中<center></center>下标<sub></sub>上标<sup></sup>图片标签<img src="https://www.cnblogs.com/am0304/p/%E5%9C%B0%E5%9D%80"width="宽度" height="高度" align="图文混排时，对齐方式，居中：middle" alt="图片说明，当图片加载失败显示"title="鼠标悬停说明"/>相对路径："../"代表上一层目录，同一层目录可以直接访问
绝对路径：1、网络图片，直接写图片地址；2、本机磁盘地址"盘符:/图片名"
超链接<a href="https://www.cnblogs.com/am0304/p/%E5%9C%B0%E5%9D%80%E6%88%96#+%E9%94%9A%E9%93%BE%E6%8E%A5%E5%90%8D" target="打开新窗口的位置">链接名或图片</a>target = "_self"：当前窗口打开
target = "_blank"：新窗口打开
target = "_top"：在顶层页面所在位置打开
target = "_parent"：在父页面的窗口位置打开
target = "_iframeName"：在iframe位置打开
使用锚链接需要给目标标签加属性id，唯一的标记
发送邮件<a herf="mailto:邮箱地址">连接名或图片</a>下载<a herf="只可以是zip文件">连接名或图片</a>表格标签<!--table代表表格标签，tr代表行，td代表列--><table> <tr> <td>编号</td> <td>名称</td> <td>价格</td> </tr> <tr> <td>001</td> <td>苹果</td> <td>12</td> </tr> <tr> <td>002</td> <td>香蕉</td> <td>18</td> </tr></table>属性表格的属性（table）border = "边框线条粗细"
cellspacing = "单元格间隙的值"
align = "表格水平对齐方式"
width = "表格的宽度"
height = "表格的高度"
bgcolor = "表格的背景色"
background = "背景图片地址"
行的属性（tr）
height = "行高"
align = "水平对齐方式"
valign = "垂直对齐方式"middle、top、bottom
bgcolor = "行的背景色"
background = "行背景图片地址"
单元格的属性（td）width = "宽度"会影响整个列
align = "水平对齐方式"
valign = "垂直对齐方式"middle、top、bottom
bgcolor = "单元格的背景色"
合并单元格1、找到要合并单元格的开始位置
2、清除合并的是行还是列
3、合并几行或几列
4、除开始位置的单元格外，被合并的单元格进行删除
<!-- 合并开始的单元格 --><td colspan\rowspan="合并的列（横向）、行数">除开始的单元格、其余删除</td>表单标签<form method="get\post" action="表单提交的目标地址"> 账号:<input name="lname"/><br /> 密码:<input type="password" name="psw"/><br /> <button type="submit">登录</button></form>form标签的属性method = "get\post提交方式"
默认的提交方式是get,地址栏可以看到的，post方式地址栏不可见get方式相对post不安全get方式提交的数据量有限制的，而post理论上没有限制action = "表单提交的目标地址"
文本框标签（<input> </input>）属性name = "提交参数名称"
type = "input标签样式"
type="text" 普通文本框maxlength = "最大字符个数"type="password" 密码框type="radio" 单选框value = "值"checked = "checked"默认选择type="date" 日期框type="email" 邮箱文本框(自带针对邮箱的校验)type="file" 文件文本框(可以选择各种文件，比如说图片，文件)type="checkbox" 多选框value = "值"checked = "checked"默认选择type="hidden" 隐藏文本框type="color" 颜色选择框type="number" 数字选择框type="button\submit\reset" 按钮type="image" 图形化按钮，功能相当于submitplaceholde = "提示文字"
按钮标签（<button></button>）属性type = "按钮功能"
type="submit" 按钮（自带提交功能）type="button" 按钮（不带提交功能，就是一个最普通的按钮）type="reset"按钮（重置功能）下拉框标签<select> <option>下拉框列表标签</option> <option selected="selected">默认选中</option></select>文本域标签<textarea></textarea>列表标签有序列表<ol type="1"> <li></li> <li></li> <li></li></ol>type：序号类型1：数字（默认）A：大写字母I：大写罗马数字a：小写字母i：小写罗马数字无序列表有符号无序列表<ul type="circle"> <li></li> <li></li> <li></li></ul>type：符号类型
circle：空心圆discs：实心圆（默认）quare：实心方形无符号无序列表
<dl> <dt></dt> <!-- 列表标题 --> <dd></dd> <dd></dd> <dd></dd></dl>多媒体标签：视频<video width="320" height="240" controls> <!--controls为视频播放控制键--> <source src="https://www.cnblogs.com/am0304/p/%E8%A7%86%E9%A2%91%E5%9C%B0%E5%9D%80" type="video/文件格式"> 您的浏览器不支持 HTML5 video 标签。</video>音频<audio controls> <source src="https://www.cnblogs.com/am0304/p/%E9%9F%B3%E9%A2%91%E5%9C%B0%E5%9D%80" type="audio/文件格式"> Your browser does not support this audio format.</audio>iframe框架标签<iframe src="https://www.cnblogs.com/am0304/p/%E5%BC%95%E7%94%A8%E9%A1%B5%E9%9D%A2%E5%9C%B0%E5%9D%80"></iframe>属性width：宽度
height：高度
frameborder：边框粗细
scrolling：滚动条 yes、no、auto
新页面
下一篇：织梦dedecms 内容页调用当前栏目名称的标签(织梦如何使用)
