html基础

来源：互联网发布：Win10网络图标显示红叉编辑：程序博客网时间：2024/06/16 09:20

１标签语义化

１.1 概念：

什么样的标签干什么样的事。

１.2 意义：

1：网页结构合理

2：利于SEO

3：方便其他设备解析

4：便于团队开发和维护

１.3 什么样的网页语义化比较好

让网页裸奔（css样式去掉），结构依然清楚。

１.4 做法

1：尽可能少的使用无语义的标签div和span；

网页布局。

2：在语义不明显时，既可以使用div或者p时，尽量用有语义的标签

3: 不要使用纯样式标签，如：b、font、u等，改用css设置

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）

2 常用标签

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content="百度搜索时的关键词"> <meta name="description" content="对网站的描述"> <!-- <meta http-equiv="refresh" content="5;url=http://www.baidu.com">  网页重定向 5秒后跳转到百度--> <link rel="stylesheet" type="text/css" href=""><!-- 引入外部样式表 --> <link rel="icon" href="images/1.jpg"><!-- 网页title前的小图标 --> <title>html基础</title> </head> <body> <a href="https://www.cnblogs.com/sapho/p/5623262.html">Emmet缩写语法表：https://www.cnblogs.com/sapho/p/5623262.html</a> <br> <p id="db">锚标签：回到顶部</p> <!-- 文本注释标签 --> 文本换行标签<br>文本换行标签<br> 横线标签<hr> <P> 这是一个段落标签 </P> <h1>这是一个标题标签</h1> <h2>这也是一个标题标签</h2> <font size="10" color="red"> 文字标签（常用css） </font> <hr> <br> 文本格式标签：普通文字 <strong> 加粗文字标签 </strong> <b> 另一个加粗文字标签 </b> <em>文字斜体标签</em> <i>另一个文字斜体标签</i> <del>删除线标签</del> <s>另一个删除线标签</s> <u>文字下划线标签</u> <ins>另一个文字下划线标签</ins> <br> <hr> <img src="images/github.png" title="图片标签，喵~" alt="当图片无法正常加载时对图片的描述" width="100" height="100"> <hr> <br> <a href="http://www.baidu.com" title="这是百度" target="_self">超链接标签：在当前页面打开</a> <a href="http://www.baidu.com" title="这是百度" target="_blank">超链接标签：在新页面打开</a> <!-- 也可以在head里面写 <base target="_blank"> --> <a href="#db" title="利用标签的id">锚标签：返回顶部</a> <a href="xiazai/images.zip">a标签的下载功能</a> <br> <a href="https://github.com" target="_blank" title="图片超链接"> <img src="images/github.png" width="100" height="100"> </a> <br> <a href="#">不跳转到任何页面</a> <br> <hr> 特殊字符： 段落标签由<p></p>表示 <br> <img src="images/特殊字符.png" width="850" height="350"> <br> <hr> 列表：<br> 无序列表：喜欢吃什么 <ul type="square"> 如下 <li type="circle">薯片</li> <li>薯条</li> <li>可乐</li> <li>汉堡</li> </ul> <br> 有序列表 <!-- type 默认数字，可以是a A i I --> <ol type="a" start="3"> <li>衣</li> <li>食</li> <li>住</li> <li>行</li> </ol> <br> 自定义列表 <dl> <dt>小标题</dt> <dd>列表项：与li相同</dd> <dd>诶呀</dd> <dd>嘿哟</dd> <dd>rua</dd> </dl> <hr> <br> 音乐播放器<br> <audio src="music/陈一发儿 - 童话镇.mp3" preload="preload" controls="true"></audio> <br> <hr> <marquee behavior="alternate" direction="down" width="300" height="100" bgcolor="red"> 跑动 </marquee> <hr> 表格<br> <table border="1" width="200" height="100" cellspacing="3" cellpadding="10" bgcolor="pink" align="left"> <caption><h3>表格表头标签</h3></caption> <tr > <th>姓名</th> <th>年龄</th> </tr> <tr> <td align="center">Tom</td> <td align="center">20</td> </tr> <tr align="center"> <td>Jerry</td> <td>21</td> </tr> </table> <table width="200" height="100" border="1" cellspacing="1" cellpadding="6"> <caption><h3>表格结构（不常用）</h3></caption> <thead> <tr> <td>aa</td> <td>ss</td> <td>dd</td> </tr> </thead> <tbody> <tr> <td>aa</td> <td>ss</td> <td>dd</td> </tr> <tr> <td>ss</td> <td>aa</td> <td>dd</td> </tr> </tbody> <tfoot> <tr> <td>dd</td> <td>ss</td> <td>aa</td> </tr> </tfoot> </table> <br> <table  width="200" height="120" border="1"> <caption><h3>表格单元格的合并</h3></caption> <tr> <td colspan="4"></td><!-- <td></td><td></td><td></td> --></tr><tr><td colspan="2"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td rowspan="2"></td></tr><tr><td></td><td></td><td></td><!-- <td></td> --></tr></table><hr><fieldset><legend>表单分组控件（fieldset和legend一起使用）</legend>表单<br><form action="1.java" method="get">用户名：<input type="text" name="username" maxlength="8" value="leon"><br> <!--disabled="disabled"  readonly="readonly"-->密码：<input type="password" name="password"><br>单选按钮：<input type="radio" name="sex" value="1" checked="checked">男<input type="radio" name="sex" value="0">女<br>下拉列表：出生地：省：<select name="" id=""><!-- multiple="multiple" 实现多选效果--><option value="">北京</option><option value="">辽宁</option><option value="">山东</option><option value="" selected="selected">成都</option></select>市(区）：<select name="" id=""><optgroup label="北京市"><option value="">西城区</option><option value="">海淀区</option><option value="">东城区</option><option value="">昌平区</option></optgroup><optgroup label="辽宁"><option value="">西城区</option><option value="">海淀区</option><option value="">东城区</option><option value="">昌平区</option></optgroup></select><br>兴趣爱好：<input type="checkbox" name="" checked="checked">吃饭<input type="checkbox" name="">睡觉<input type="checkbox" name="">打豆豆<br>自我介绍（textarea标签要写在一行，不然会有好多迷之空格）：<br><textarea></textarea><br>头像：<input type="file" name=""><br>表单提交按钮<input type="submit" value="这是一个提交按钮">重置按钮<input type="reset" name=""><br><br><input type="button" onclick="" name="" value="这是一个普通按钮"><!-- 和js配合使用 --><br>图片按钮(也用于表单提交）：<input type="image" name="" src="images/2.jpg" width="100" height="50"></form></fieldset><hr><fieldset><legend>补充几个控件</legend><form action="2.java">判断输入的是否是网址：(为空不报错）<br><input type="url" name=""><br>邮箱判断：(为空不报错）<br><input type="email" name=""><br>日历：<br><input type="date"><br>时间:<br><input type="time"><br>只能输入数字的控件:<br><input type="number" step="5"><br>可以拖动的控件：<br><input type="range" max="100" step="5"><br><input type="submit"></form></fieldset></body></html>

阅读全文

0 0