网络视频直播系统 Promise 主从复制 merge transactions vue router vue绑定点击事件 后台管理界面模板 git视频 excel太长的文字隐藏 quartz配置 python开发安卓应用 matlab网页版 java不定长数组 kubernetes实战 kubernetes入门 python随机数 python断言assert实例 pythoninput python查找指定字符 如何配置python环境 java实用教程 java获取当前年 java时间格式 javalist转数组 nginx安装教程 java游戏开发教程 魔兽世界字体包 小米5c拆机 pyh 地球末日攻略 vbs编程教学 飞猪ip c语言代码表白 矩阵分析与应用 begininvoke 小工具 电子商城系统 陌陌电脑直播设置教程 模拟按键
当前位置: 首页 > 学习教程  > 编程语言

HTMLday02

2021/1/13 20:30:53 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

HTML基本知识 1.标签 1.<br>&#xff1a;换行标签&#xff0c;是一个单标签。一个<br>代表空一行 2.<hr>&#xff1a;设置水平线&#xff08;默认水平居中于网页&#xff09; size&#xff1a;设置水平线高度width&#xff1a;设置水平线宽度ailgn&#x…

HTML基本知识

1.标签

1.<br>:换行标签,是一个单标签。一个<br>代表空一行

2.<hr>:设置水平线(默认水平居中于网页)

  • size:设置水平线高度
  • width:设置水平线宽度
  • ailgn:设置水平线的位置  (left、center(默认)、right)

3.<sub></sub>:设置下标

eg: log<sub>10</sub>2

<sup></sup>:设置上标

eg:20<sup>2</sup>

4.字体大小改变,依次递减

<h1></h1>、<h2></h2>、<h3></h3>

<h4></h4>、<h5></h5>、<h6></h6>

               

5.  a: 超链接( 有一定的跳转动作)

a标签生成的链接,未被访问时,字体颜色为蓝色;

点击访问时,为红色;访问结束回到当前页面时,字体颜色为紫色。

eg:  

<a href="http://www.baidu.com">百度一下你就知道</a>

        

  • href:设置链接地址

1.标准url:绝对路径/相对路径

eg:

<a href="http://www.baidu.com">百度一下你就知道</a>

2.设置锚点值     (形象记忆:就好比蜘蛛侠吐丝来定点位置)

  • 通过id属性设定锚点位置
  • #id属性值

eg:

点击“第一章”会定位到“第一章内容------”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <a href="#one">第一章</a>
    </div>
<div>
        <a href="#two">第二章</a>
    </div>
    <div>
        <a href="#three">第三章</a>
    </div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="one">第一章内容------</p>
<br>
<br>
11111111
<br>
<br>
<p id="two">第二章内容------</p>
<br>
<br>
2222222222
<br>
<br>
<p id="three">第三章内容------</p>
<br>
<br>
333333333333
<br>
<br>

</body>
</html>

3.邮箱地址

  • mailto:邮箱地址
  • target:设置页面打开方式

_blank:打开新的页面

_self:在当前页面中打开(默认)

_top:在顶级框架中打开

_parent:在父框架中打开

6.table:用来写表格的

  • 子标签

<caption>:用来设置表格的标题信息

thead:设置表格头部 ,包含了<tr>、<td>

tbody:设置表格体部,包含了很多<tr>

tfoot:设置表格脚部,包含了对表格的总结信息

tr:表示表格的行,一对<tr>表示一行(存在于thead或tfoot任何一个中,但省略上述thead或tfoot,tr的父标签默认为tbody)

td:普通单元格,表示表格用来包含数据的单元格

th:常用于表头单元格,th单元格内的内容有剧中加粗的效果

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    
    td,th{
        width: 100px;
        height: 30px;
        border: 1px solid black;
       
    }</style>


</head>
<body>
<table align="center"  cellpadding="0px" cellspacing="0px">
    <caption>学生管理系统</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>班级</th>
    </tr>
    
    <tr>
        <td>rose</td>
        <td>22</td>
        <td>女</td>
        <td>web2101</td>
       </tr>
</table>

页面展示:

  • table私有属性  (后期学习完css不建议使用)

align:表格应该如何在文档中对齐

  • left  、center、right

cellpadding:设定内容与单元格之间的距离

cellspacing:表格与表格之间的间距 (设定单元格与单元格之间的距离)

bgcolor:设定表格的背景颜色

width:设定表格的宽度

border:设定表格边框特性,取整数为值,单位为px

(注:所有效果以实际测试为准)

  • td私有属性:

colspan:跨列数合并

rowspan:跨行数合并

width:设定单元格与单元格之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
           border-collapse: collapse;
        }
        
        td,th{
            width: 100px;
            height: 50px;
            border: 1px solid black;
           
        }</style>


</head>
<body>
    <div class="text" style="text-align:center;">    
    <h1>例如</h1>  </div>
  <br>
    <table align="center"  cellpadding="0px" cellspacing="0px" style="text-align: center;">
        <caption></caption>
<tr>
    <td rowspan="2">联系方式</td>
    <td>移动电话</td>
    <td></td>
    <td>现在住址</td>
    <td></td>
    <td>邮编</td>
    <td></td>
</tr>
<tr>
   
    <td>紧急联系人</td>
    <td></td>
    <td>与本人关系</td>
    <td></td>
    <td>联系电话</td>
    <td></td>
</tr>

   </table>




</body>
</html>

页面展示:

colgroup: 写在所有tr之上,在它里面可以通过col标签标识列   (定义一个表中的一组列,只能作为table的子元素,位于元素后,其他元素之前。)

  • col:定义一个表中的列,并用于在所有公共单元上定义通用语义,经常作为<colgroup>元素的子元素
  • col的私有属性: span ----->设置col控制几列 (跨列数,即规定有几列可以作为同一列)
  • H5中新增标签
  • header
    • 是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含搜索表单或logo。
  • nav
    • 是一个可以用作页面导航的链接组,其中导航元素链接到其他页面或当前页面的其他部分。
  • article
    • 代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,也可以嵌套使用。可以是一篇博客或者报刊中的文章,一篇论坛帖子,一段用户评论或者独立的插件,或其他任和独立的内容。

 


本文链接: http://www.dtmao.cc/news_show_600344.shtml

附件下载

上一篇:网络增大

下一篇:wpf 导出窗口截图

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?