H5全栈

it2022-05-06  9

html

行内元素

作用:用于页面填充或装饰

特性:

1、多个内元素共享一行空间 2、默认宽高有内容决定 3、不可指定宽高 4、行内元素不可以嵌套块元素  (注意与块元素做对比)

元素:

span  无意义的行内元素 a   href     url   http://ip:port/path     相对地址  ./11.html             . 当前文件夹             …上一级文件夹     绝对地址   /user/…或 d://briup/…     mailto  邮件     锚点  (使用id)   target img   src(同href)      alt(图片找不到时的文本替代) 功能性标签   strong 强调加粗 b 加粗 em 强调 i 斜体 del 删除线 sub/sup 上标/下标

<body> <a href="http://www.baidu.com" target="_blank">百度一下</a> <!-- href打开外网地址(在原网页跳转),target用于打开新页面 --> <a href="./11.html">个人简历</a> <!-- 内网,相对地址,绝对地址(. 当前目录 .. 为上一级目录) --> <a href="mailto:zxiaoxuan327@gmail.com">发邮件给我们</a> <!-- 跳转至邮件 --> <div id="dd"> <a href="#grjl">个人经历</a> </div> <!-- 锚点:通过id跳转 --> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <h2 id="grjl">个人经历</h2> <div> <a href="#dd">回到顶端</a> </div> <p>写过代码。。。。获过大奖</p> <!-- 锚点:通过id跳转 --> <img src="./1.jpg" alt="图没了"> <!-- 相对路径,alt:图片找不到时的文本替代 --> <!-- 行内元素 --> <!--装饰类型行元素--> <strong>强调加粗</strong> <b>加粗</b> <em>强调</em> <i>斜体</i> <del>删除线</del> <sub>2</sub> <!-- 下标 --> <sup>3</sup> <!-- 上标 --> </body>

以上具体:file:///D:/briup/2.htmlcss/Day4、5、6/1/33.html

元素使用策略

列表性质:ul、ol、li 标题性质:h1~h3 段落性质:p 不知道用什么时就用div 总体:先使用块元素搭建框架,再使用行元素填充页面

功能性标签

table

作用:展示数据列表

元素

caption  标题 thead 表头 有tr__td/th(td 列;th 居中加粗) tbady 表体 有tr__td/th tfoot   表底 有tr__td/th

属性

1、border标签:设定围绕表格的边框的宽度 style=“border-collapse: collapse;” 可使表格线合为一条【下划线部分可改为:separate(默认值 边框会分开)、inherit(将从父类继承)】 cellspacing标签:设定单元格之间的间距(也向table标签添加border-spacing样式进行设置) cellpadding标签:设定单元内边距

<table border=1 style="border-collapse: collapse;" align="center">

2、width标签:设定表格的宽度 height标签:设定表格的高度 bgcolor标签:设定表格背景色(可用颜色名,如:pink;也可使用十六进制值表示如下)

<td width=80 bgcolor="#ffcc99" height=40>姓名:</td>

3、align标签:指定表格相对于周围标签的对齐方式(有left、right、center)

<td rowspan=5 width=120 align="center">

4、valign标签:设置表格行中单元格内容的垂直对齐方式(有top上、middle中、bottom下、baseline基准线) 5、colspan样式:设置单元格合并多少列 rowspan样式:设置单元格合并多少行

<td rowspan=5 width=120 align="center"> <td colspan=4>xxx省xx市</td>

6、nowrap标签:设定单元格内文本的内容是否换行(不加则自动换行)

以下为部分属性应用及显示

<body> <table border=1 style="border-collapse: collapse;" align="center"> <!-- border 给表格加线--> <!-- style="border-collapse: collapse;" 使线变为一根,而不是两根粘一起 --> <!-- align="center" 居中(加在tr上一行都可居中)--> <h2 align="center">个人简介</h2> <tbody> <!-- 一定记得写tbody --> <tr> <td width=80 bgcolor="#ffcc99" height=40>姓名:</td> <!-- bgcolor 设置颜色 --> <!-- width 宽 hight 高 --> <td width=70>xxx</td> <td width=80 bgcolor="#ffcc99">籍贯:</td> <td width=70>xxx</td> <td rowspan=5 width=120 align="center"> <!-- rowspan 合并行 (td的属性)--> <img src="1.jpg" height="200"> </td> </tr> <tr> <td bgcolor="#ffcc99" height=40>出生日期:</td> <td>0000.00.00</td> <td bgcolor="#ffcc99" >政治面貌:</td> <td>xx</td> </tr> <tr> <td bgcolor="#ffcc99" height=40>性别:</td> <td>x</td> <td bgcolor="#ffcc99">民族:</td> <td>x</td> </tr> <tr> <td bgcolor="#ffcc99" height=40>学位:</td> <td>学士学位</td> <td bgcolor="#ffcc99">移动电话:</td> <td>12345678912</td> </tr> <tr> <td bgcolor="#ffcc99" height=40>专业:</td> <td>嵌入式</td> <td bgcolor="#ffcc99">电子邮件:</td> <td>123@163.com</td> </tr> <tr> <td bgcolor="#ffcc99" height=40>地址:</td> <td colspan=4>xxx省xx市</td> <!-- colspan 合并列 (td的属性)--> </tr> <tr> <td bgcolor="#ffcc99" height=40>兴趣爱好:</td> <td colspan=4>篮球、足球、羽毛球、游泳、旅游</td> </tr> <tr> <td height=80 bgcolor="#ffcc99">教育背景:</td> <td colspan=4>2015~2017就读于xxx学校</td> </tr> <tr> <td height=70 bgcolor="#ffcc99">获奖情况:</td> <td colspan=4>无</td> </tr><tr> <td height=70 bgcolor="#ffcc99">自我评价:</td> <td colspan=4> ..... <br>。。。。。 </td> </tr> </tbody> </body>


最新回复(0)