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 总体:先使用块元素搭建框架,再使用行元素填充页面
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>