HTML常见标签用法
来源：互联网 发布：mysql 存储手机号 编辑：程序博客网 时间：2024/05/24 04:16
什么是HTML
HTML是用来描述网页的一种语言
* HTML是超文本标记语言，不是一种编程语言，而是一种标记语言* 标记语言是一条标记标签* HTML是使用标记标签来描述网页HTML标签
HTML标签通常被称为HTML标签
* HTM标签由尖括号扩起来的 例如 <htlm>* 标签通常是成对出现<b></b>* 标签第一个是开始标签，第二个是结束标签* 开始和结束标签称为开放标签和闭合标签* 自动换行的叫做块级标签，不自动换行的叫做行级标签web游览器的作用是读取HTML，并以网页的形式显示他们
资源全部用相对路径，资源全部存放在工程中
乱码解决方案，title属性设置
<html> <head> <title> 网站的标题 </title> <meta charset="UTF-8"> <!--运行过程中出现乱码 HTML5.0解决方案--> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--运行过程中出现乱码 HTML4.0解决方案--> <meta http-equiv="refresh" content="5;url=http://www.baidu.comm"> <!--5秒后刷新到某个指定页面，如果不写url 5秒刷新当前页--> <meta name="keywords" content="java,c#,net,php"> <!--属性,设置网页关键字--> <meta name="description" content="网页的描述"> <!-- ../表示返回上一级文件，资源全部用相对路径，资源全部存放在工程中 --> </head> <body> 网站的内容 </body></html>常用的文本图片属性标签
* <h1></h1> 标题标签* <p></p> 换行标签*  空格符号* © 版权所有标签* <ul><li></li></ul>无序列表* <ol><li></li></ol>有序列表* <strong>加粗</strong>* <b>加粗</b><br>* <em>斜体</em><i>斜体</i><br>* <dl><dt></dt><dl>定义列表* <img src="images/2.jpg" width="40" height="40" title="这个是图片,鼠标悬停时显示" alt="图片无法显示时显示"/>* <pre>段落标签<pre>* <hr/>分隔符<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><><head> <title>标签练习</title></head><> <!--标题标签--> <h1>标签一</h1> <h2>标签二</h2> <h3>标签三</h3> <h4>标签室</h4> <h5>标签五</h5> <h6>标签六</h6> <!--控制字体属性--> <font color="aqua" size="100">测试字体</font> <!--换行标签--> <p>自动换行，表示一个段落</p> <p>自动换行，具有行间距</p> 换行书写，表示一个段落，不具有行间距<br> 一个新的段落<br> <!--空格符号--> 有好多的空格 有三个空格<br> <!--大于小于符号--> a<b a>b<br> XXXX版权所有© <!--无序列表 如果type值等于null则去掉项目符号<ul type="">--> <ul> <!-- li 排序列表 --> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul> <!--无序列表嵌套书写--> <ul> <li>吃饭</li> <ul> <li>吃肉</li> <li>吃菜</li> <li>吃面条</li> </ul> </ul> <!--有序排序--> <ol> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ol> <!--y有序排序，修改项目符号--> <ol type="A"> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ol> <!--字体加粗，斜体字体--> <strong>加粗</strong> <b>加粗</b><br> <em>斜体</em><i>斜体</i><br> <!--定义列表--> <dl> <dt>咖啡</dt> <!--这是标题--> <dd>这是一杯咖啡</dd> <!--这是内容--> </dl> <!--图片标签，自带结束,也可以只设置宽度px自动调整高度，设置宽度百分百，是游览器所占屏幕的半分比。高度只能用像素控制，无百分百--> <img src="images/2.jpg" width="40" height="40" title="这个是图片,鼠标悬停时显示" alt="图片无法显示时显示"/> <!--pre标签，标签区域里的内容不会编译--> <pre> a < b a > b </pre> <!--分割线--> <hr/></body></html>锚点定位超链接，表格
* <a href="常用的标签01.html" target="_blank">超链接</a>* <table><tr><td></td></tr><table> 表格标签<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title></head><body><!--超链接标签 href表示需要跳转的连接，#表示本页，target表示打开方式， blank表示新窗口打开，self表示当前窗体打开--><a href="常用的标签01.html" target="_blank">超链接</a><!--锚点定位,快速跳转--><ol> <li>第一章</li> <li>第二章</li> <li>第三章</li> <!--定位超链接去向，#表示本页的four--> <li><a href="#four">第四章</a></li> <!--跳转其他页面的快速定位，#表示需跳转的页面的five--> <li><a href="常用的标签01.html#five">第五章</a></li></ol><!--定义超链接名字--><h1><a name="four">第四章</a></h1><!--表格标签 ，border属性代表边框属性，align表示表格位置，wideth是相对游览器，tr代表行,td代表列--><!--rules 表示边框规则--><table border="1" align="center" width="100%" style="height: 500px;"> <!--tr中的align表示文本居中，水平位置;valign表示垂直位置--> <tr align="center" > <td>第一行第一列</td> <td>第一行第二列</td> </tr> <td>第二行第一列</td> <td>第二行第二列</td> <tr> </tr></table></body></html>去掉表格的间隙 border
<table align="center" style="border-collapse:collapse;">table表格垮行垮列合并
* 行合并使用rowspan* 列合使用colspan<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title></head><body><!--表格标签 ，border属性代表边框属性，align表示表格位置，wideth是相对游览器，tr代表行,td代表列--><!--rules 表示边框规则--><table border="1" align="center" width="100%" style="height: 500px;"> <!--tr中的align表示文本居中，水平位置;valign表示垂直位置--> <tr align="center" > <td>姓名</td> <td>科目</td> <td>分数</td> <td>总分</td> </tr> <!--单元格合并 rowspan 垮行三行，垮的行数需要删除不书写--> <tr align="center" > <td rowspan="3">张三</td> <td>语文</td> <td>80</td> <td rowspan="3">xxxx</td> </tr> <tr align="center" > <td>数学</td> <td>90</td> </tr> <tr align="center" > <td>英语</td> <td>70</td> </tr> <tr align="center" > <td rowspan="3">李四</td> <td>第5行第二列</td> <td>第5行第三列</td> <td>第5行第四列</td> </tr> <tr align="center"> <td>第6行第二列</td> <td>第6行第三列</td> <td>第6行第四列</td> </tr> <tr align="center" > <td>第7行第二列</td> <td>第7行第三列</td> <td>第7行第四列</td> </tr> <!--垮列合并，用colspan，垮列也需删除--> <tr> <td colspan="4">总结：xxxxxxxxxxxxxxxx</td> </tr></table></body></html>form表单标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>表单标签</title></head><body> <!--表单标签 还有method属性有get和post方法，get网页会跟上内容，post提交网页不会跟内容--> <form action="registerSuc.html"> <!--input标签为行级标签文本框属性 readonly="readonly"表示文本框只读 disabled=“disabled”表示禁用，用到按钮表示按钮无法触发--> 用户名:<input type="text" value="请输入用户名"/><br> <!--maxlength表示最大长度--> 密码:<input type="password" maxlength="8"/> <!--网页实现互斥效果，名字相同就为一组,checkde为设置为默认选择--> 性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女 <!--input标签提交按钮 disabled=“disabled”表示禁用，用到按钮表示按钮无法触发--> <input type="submit" value="注册"> <!--为了达到自动对其效果可以使用表格--> <table align="center"> <tr> <td align="left">用户名：</td> <td><input type="text" value="请输入用户名"></td> </tr> <tr> <td align="left">密码：</td> <td><input type="password" ></td> </tr> <tr> <td align="left">性别:：</td> <td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</td> </tr> <tr> <td align="left">婚姻状况:：</td> <td><input type="radio" name="marriage" checked="checked">已婚<input type="radio" name="sex">未婚</td> </tr> <tr> <td align="left">兴趣爱好：</td> <td > <!--复选框--> <input type="checkbox">吃饭 <input type="checkbox">睡觉 <input type="checkbox">打豆豆 </td> </tr> <tr> <td>上传图片</td> <!--选择文件属性，按钮提交--> <td><input type="file"/></td> </tr> <tr> <!--图片标签--> <td ></td> <td><input type="image" src="1.jpg"/></td> </tr> <tr> <td><input type="reset" value="清空"/></td> <td><input type="button" value="按钮"/></td> </tr> <tr> <td>邮箱：</td> <td><input type="email"/></td> </tr> <tr> <td>请选择地址</td> <td> <!--下拉框--> <select> <option>--请选择--</option> <option>四川</option> <option>云南</option> <option>贵州</option> </select> <select> <option>--请选择--</option> <option>四川</option> <option>云南</option> <option>贵州</option> </select> </td> </tr> <tr> <td>自我介绍</td> <td> <!--文本域 row设置初始行数 cols控制宽度--> <textarea rows="10" cols="30">XXXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册"></td> </tr> </table> </form></body></html>杂项标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title></head><body> <!--对元素进行分组--> <fieldset> <legend>必填选项</legend> <table> <tr> <td>姓名</td> <td><input type="text"/></td> </tr> </table> </fieldset> <fieldset> <legend>选填选项</legend> <table> <tr> <td>电话</td> <td><input type="text"/></td> </tr> </table> </fieldset> <!--范围标签--> 价格：<span style="color: red;font-size: 24px">99元</span> <!--lable标签可以用for属性选择服务位置 ,id为唯一的不可重复的--> <label for="userName">姓名：</label><input type="text" id="userName" /> <!--滚动标签 direction属性控制方向--> <marquee>系统公告：xxxxx活动开始</marquee></body></html>简单的注册页面练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>注册页面</title></head><body> <form action="../../Project/registerSuc.html"> <table align="center"> <tr> <td>账号：</td> <td><input type="text" value="请输入用户名"/></td> </tr> <tr> <td>密码：</td> <td><input type="password"/></td> </tr> <tr> <td>确认密码：</td> <td><input type="password"/></td> </tr> <tr> <td>用户昵称：</td> <td><input type="text"/></td> </tr> <tr> <td>头像：</td> <td><input type="file" value="选择头像"/></td> </tr> <tr> <td>姓名：</td> <td><input type="text"/></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>保密</td> </tr> <tr> <td>手机号码：</td> <td><input type="text"/></td> </tr> <tr> <td>邮箱</td> <td><input type="email"/></td> </tr> <tr> <td>安全提题：</td> <td> <select> <option>--请选择提示问题--</option> <option>你第一次坐飞机去什么地方</option> <option>你读的小学交什么名字</option> <option>你最喜欢的歌曲是什么</option> </select> </td> </tr> <tr> <td>问题回答</td> <td><input type="text"/></td> </tr> <tr> <td>会员协议</td> <td><textarea rows="5" cols="20">W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。 当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。赞助商：上海赢科投资有限公司。 蒙ICP备06004630号</textarea></td> </tr> <tr> <td colspan="2" align="center">我已经同意此协议<input type="checkbox"/></td> </tr> <tr> <td align="center" colspan="2"><input type="submit" value="注册"/> <input type="reset" value="重写填写"/></td> </tr> </table> </form></body></html> 3 0
- HTML常见标签用法
- HTML常见标签学习
- HTML常见标签
- HTML常见标签
- HTML常见标签学习
- HTML常见表单标签
- html常见标签
- html常见标签大全
- dede常见标签用法
- <input>标签常见用法
- <a>标签常见用法
- Html常见用法
- html标签的用法
- HTML中的标签用法
- html:select标签用法
- html 标签用法
- html table标签 用法
- HTML表格标签用法
- 中出叛徒
- 通过自定义的类来实现事件监听器接口的示例
- Numpy加速的关键 -- 使用优化的方法
- mysql常用命令总结
- Android 屏幕适配归纳
- HTML常见标签用法
- HDU_1010_Tempter of the Bone
- Java并发编程：阻塞队列
- 解决ios/swift 报错 Reason: image not found
- thinkphp3.2自定义success及error跳转页面
- pat1049时间优化
- 大数据概要--总结
- js实现数组分组
- python 配置开发环境 安装mysql-connector-python
