赞
踩
<!DOCTYPE html> <!--文档声明,表示这是一个HTML页面-->
<html></html> <!--html标签对,告诉浏览器这个页面的范围-->
<html>
<head></head> <!--head标签对,是网页的头部,用于定义一些特殊的内容-->
</html>
<html>
<head>
<!--title标签对,是head标签的内部标签,标签内定义网页的标题,显示在浏览器栏目中-->
<!--除此之外,还有meta标签、link标签、style标签、script标签、base标签可以放在head标签内部-->
<titlle>这是网页的标题</title>
</head>
</html>
<!DOCTYPE html>
<html>
<head></head>
<body></body> <!--body标签对,是网页的身体,内部编写网页的大部分代码-->
</html>
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--在HTML中,一共有以下六个级别的标题标签。
一个页面一般只能有一个h1标签,其他标签可以有多个。
区别于title标签,h1-h6标签用于显示网页内容的标题。-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--p标签对,可以用来显示一段文字,段落标签会自动换行,并且段落与段落之间有一定的间距-->
<p>段落内容</p>
</body>
</html>
<!--br标签用来给文字换行,而p标签用来给文字分段。
p标签会导致段落之间有一定间隙,而br标签不会。-->
<br/>
<!--hr标签可用来生成一条水平分割线-->
<hr/>
<strong></strong> <!--粗体-->
<em></em> <!--斜体-->
<!--空格-->
> <!--大于号>-->
< <!--小于号<-->
© <!--版权符号©-->
下面是简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--设置页面编码,要放在最前面--> <title>基本标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> <p>成就最好的自己</p> <p>服务祖国和人民</p> <hr/> 成就最好的自己<br/> 服务祖国和人民<br/> <p><strong>追求卓越</strong></p> <p><em>追求卓越</em></p> <p>追 求 卓 越</p> <p>></p> <p><</p> <p>©钱小强</p> </body> </html>
<img src="图片地址" alt="默认返回的图片的替代文字(找不到图片时会显示)"
title="鼠标悬停时的提示文字" width="图片宽度" height="图片高度"/>
下面是简单示例
<!DOCTYPYE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签</title>
</head>
<body>
<img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧"
title="钱小强的个人主页" width="800px" height="500px"/>
<!--超链接,跨页面跳转-->
<a href="超链接标签.html#down">点击去底部</a>
</body>
</html>
<!--target常用取值有_blank和_self
_blank 在新窗口打开
_self 在原窗口打开(不写target参数时,默认是_self)
-->
<a href="跳转页面的地址" target="打开方式">文本或图片</a>
<!--锚链接 需要一个锚标记,点击超链接可以跳转到标记所在的位置-->
<a name="标记名">文本</a> <!--使用name作为锚标记-->
<a href="#标记名">文本</a> <!--跳转到标记位置-->
<a href="mailto:邮箱地址">文本</a>
下面是简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超链接标签</title> </head> <body> <!--顶部标记--> <a name="top">页面顶部</a><br/> <!-- 文本超链接 --> <a href="基本标签.html" target="_blank">点击跳转页面</a><br/> <a href="https://www.baidu.com" target="_self">点击跳转到百度</a><br/> <!-- 图像超链接 --> <a href="基本标签.html"> <img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" title="钱小强的个人主页" width="800px" height="500px"/> </a> <!--以下重复代码是为了延长页面,方便看到使用锚链接跳转到页面顶部和底部的效果--> <p> <img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" title="钱小强的个人主页" width="800px" height="500px"/> </p> <p> <img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" title="钱小强的个人主页" width="800px" height="500px"/> </p> <p> <img src="D:\Media\Pictures\图像标签.png" alt="嘿嘿,找不到吧" title="钱小强的个人主页" width="800px" height="500px"/> </p> <!-- 锚链接 --> <a href="#top">点击去顶部</a><br/> <!-- 邮箱链接 --> <a href="mailto:...@qq.com">点击发邮件</a><br/> <!--底部标记--> <!--图片标签部分有相应代码,可以实现跨页面跳转 href="页面地址#标记名" <a href="超链接标签.html#down">点击去底部</a> --> <a name="down">页面底部</a> </body> </html>
<!--ol是外部标签,li是列表内容-->
<ol>
<li></li>
<li></li>
</ol>
<!--ul是外部标签,li是列表内容-->
<ul>
<li></li>
<li></li>
</ul>
<!--dl是外部标签,dt列表标题,dd是列表内容-->
<dl>
<dt></dt>
<dd></dd>
</dl>
下面是简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表学习</title> </head> <body> <!-- 有序列表 --> <ol> <li>语文</li> <li>数学</li> <li>英语</li> <li>生物</li> </ol> <hr/> <!-- 无序列表 --> <ul> <li>语文</li> <li>数学</li> <li>英语</li> <li>生物</li> </ul> <hr/> <!-- 自定义列表 --> <dl> <dt>学科</dt> <dd>语文</dd> <dd>数学</dd> <dd>英语</dd> <dd>生物</dd> </dl> <dl> <dt>年级</dt> <dd>高一</dd> <dd>高二</dd> <dd>高三</dd> </dl> </body> </html>
<table border="给表格设置边框">
<!--tr 行 td 列-->
<tr>
<td rowspan="跨行扩展的行数" colspan="跨列扩展的列数"></td>
</tr>
</table>
下面是简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格学习</title> </head> <body> <table border="1px"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">小明</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">小强</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table> </body> </html>
<!--视频
controls 控制条
autoplay 自动播放(浏览器原因,可能不能自动播放,可以手动点击播放)
-->
<video src="视频地址" controls autoplay></video>
<!--音频-->
<audio src="音频地址" controls autoplay></audio>
<!--可以使用iframe标签在一个页面中嵌入另外一个页面-->
<iframe src="链接页面的地址" name="框架标识名" width="框架宽度" height="框架高度">
</iframe>
下面是简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架</title>
</head>
<body>
<iframe src="基本标签.html" width="800px" height=""500px></iframe>
<!--超链接和框架标识名结合使用-->
<iframe src="" name="hello" width="800px" height="500px"></iframe>
<a href="基本标签.html" target="hello">点击在框架中打开</a>
</body>
</html>
<!--method取值有两个 post和get
get 可以在url中看到提交的信息,安全性低
post 在url中看不到提交的信息,安全性更高,实际开发中常用
-->
<form action="表单提交的地址" method="提交方式">
各种表单标签
</form>
<input type="text" name="表单元素的名称" value="默认初始值"
maxlength="可输入文本的最大长度" size="文本框的长度"/>
<input type="password" name="表单元素的名称" value="默认初始值"/>
<!--name属性如果不写或者取值各不相同,则是多选的效果;只有name取值相同,才是单选.
checked 表示默认被选中
-->
<input type="radio" name="组名" value="单选框的值" checked/>
<!--checked 表示默认被选中-->
<input type="checkbox" name="组名" value="多选框的值" checked/>
<!--普通按钮-->
<input type="button" value="按钮上的文字"/>
<!--图像按钮 点击图片可以直接提交表单-->
<input type="image" src="图片路径"/>
<!--提交按钮-->
<input type="submit" value="按钮上的文字"/>
<!--重置按钮-->
<input type=""reset value="按钮上的文字"/>
<!--selected 默认被选中-->
<select>
<option value="选项值" selected>选项内容</option>
</select>
<textarea rows="行数" cols="列数">默认内容</textarea>
<input type="file"/>
<!--邮箱验证 只能验证邮箱的基本格式,并不规范-->
<input type="email"/>
<!--URL验证 -->
<input type="url"/>
<!--数字验证 设置了max min step就只能输入特定的数字-->
<input type="number" max="最大值" min="最小值" step="步长"/>
<inpute type="range" max="最大值" min="最小值" step="步长"/>
<input type="search"/>
<!--几个常用属性,见下方示例中的应用
readonly 只读
disabled 禁用
hidden 隐藏
-->
<!--几个属性,见下方示例中的应用
placeholder 给出用户提示信息
required 进行非空判断
pattern 正则表达式验证
-->
下面是简单示例
<html> <head> <meta charset="utf-8"> <title>表单学习</title> </head> <body> <h1>登录注册</h1> <form action="基本标签.html" method="post"> <!-- 单行文本框 --> <p>用户名: <input type="text" name="username" value="你好" maxlength="8" size="25" readonly> </p> <!-- 密码框 --> <p>密码: <input type="password" name="pwd" hidden> </p> <!-- 单选框 --> <p>性别: <input type="radio" name="gender" value="boy">男 <input type="radio" name="gender" value="girl" checked>女 </p> <!-- 多选框 --> <p>爱好: <input type="checkbox" name="hobby" value="code">编程 <input type="checkbox" name="hobby" value="music" checked>音乐 <input type="checkbox" name="hobby" value="dance">舞蹈 </p> <!-- 按钮 --> <p>普通按钮: <input type="button" name="btn" value="点击"> </p> <p>图像按钮: <input type="image" src="D:\Media\Pictures\1.png"> </p> <!-- 下拉框 --> <p>国家: <select name="country"> <option value="china">英国</option> <option value="usa">美国</option> <option value="india" selected>印度</option> </select> </p> <!-- 文本域 --> <p>个人简介:<br/> <textarea cols="30" rows="10">请介绍一下你自己</textarea> </p> <!-- 文件域 --> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> <!-- 简单验证 --> <p>邮箱: <input type="email" name="email" required> </p> <p>URL: <input type="url" name="url" placeholder="请输入url"> </p> <p>商品数量: <input type="number" name="num" max="100" min="0" step="2"> </p> <!-- 滑块 --> <p>音量: <input type="range" name="voice" min="0" max="100" step="2"> </p> <!-- 搜索框 --> <p>搜索: <input type="search" name="search"/> </p> <!-- 正则表达式验证 会更加严格的验证邮箱的格式,包括基本的符号和各个部分的位数 可以上网搜索常用的正则表达式 --> <p>自定义邮箱: <input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置" disabled> </p> </form> </body> </html>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。