html 基础标签
加粗:b(<b>内容</b>),strong(<strong>内容</strong>)
倾斜:i(<i>内容</i>),em(<em>内容</em>)
删除线:del(<del>内容</del>),s(<s>内容</s>)
下划线:u(<u>内容</u>),ins(<ins>内容</ins>)
字体:font(<font>内容</font>) 属性【color颜色,size 大小, face 样式】
标题标签:
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
... ... ... ...
<h6>标题文本</h6>
小结:
// 加了标题的文字会变的加粗,字号也会依次变大
// 一行是只能放一个标题的
段落标签:
<p>文本内容</p>
水平线标签hr(认识):<hr />是单标签
换行标签br:<br />是单标签
div和span标签(重点):
<div>这是头部</div> <span>今日价格</span>
他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们记住
div标签 用来布局的,但是现在一行只能放一个div
span标签 用来布局的,一行上可以放好多个span
标签名 | 定义 | 说明 |
<hx></hx> | 标题标签 | 作为标题使用,并且依据重要性递减 |
<p></p> | 段落标签 | 可以把 HTML 文档分割为若干段落 |
<hr /> | 水平线标签 | 没啥可说的,就是一条线 |
<br /> | 换行标签 |
|
<div></div> | div标签 | 用来布局的,但是现在一行只能放一个div |
<span></span> | span标签 | 用来布局的,一行上可以放好多个span |
<b><strong>的区别:
b 只是加粗 strong 除了可以加粗还有 强调的意思, 语义更强烈。剩下的同理...
标签属性:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
图像标签img(重点):
语法:<img src="图像URL" />
正常的
<img src="cz.jpg" width="300" height="300" />
带有边框的
<img src="cz.jpg" width="300" height="300" border="3" />
有提示文本的
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />
有替换文本的
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
链接标签(重点):
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。 |
表格标签:
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>刘晓庆</td> <td>女</td> <td>63</td> </tr>
</table>
表格标题:
<table>
<caption>我是表格标题</caption>
</table>
合并单元格:
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
合并的顺序我们按照 先上 后下 先左 后右 的顺序
根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 : <td colspan="3"> </td>
注意:
<thead></thead>:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
<tbody></tbody>:用于定义表格的主体。放数据本体 。
<tfoot></tfoot>放表格的脚注之类。
以上标签都是放到table标签中。
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">9</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/a1306489467"> <img src="https://profile.csdnimg.cn/7/0/7/3_a1306489467" class="avatar_pic" username="a1306489467"> <img src="https://g.csdnimg.cn/static/user-reg-year/2x/0.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/a1306489467" data-report-click="{"mod":"popu_379"}" target="_blank">@岩鹤的大脑</a></span> </div> <div class="text"><span>发布了7 篇原创文章</span> · <span>获赞 9</span> · <span>访问量 803</span></div> </div> <div class="right-message"> <a href="https://im.csdn.net/im/main.html?userName=a1306489467" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div> </article>