04-HTML-加强-table布局

柔光的暖阳◎ 2022-09-18 01:56 151阅读 0赞

HTML的加强

# 1. <a ... target=""> #

① \_self  
② \_blank  
③ \_parent  
④ frame\_name/iframe\_name

# 2. <body> leftmargin/topmargin #

网页的内容与浏览器默认有个间距(上下左右)  
  
<body leftmargin="0px" topmargin="0px">  
1111111111111  
</body>

# 3. 标尺线 <hr/>  #

# 4. 标题字体(header) #

加粗,换行  
  
<h1>11111</h1>  
<h2>22222</h2>  
<h3>33333</h3>  
<h4>44444</h4>  
<h5>55555</h5>  
<h6>66666</h6>

# 5. 物理字体 #

加粗 : <b>  
下划线: <u>  
倾斜 : <i>

# 6. 客户端字体类型 font face  #

<font face="宋体">我是字体,wahaha</font> <br/>  
<font face="微软雅黑">我是字体,wahaha</font> </br>  
<font face="黑体">我是字体,wahaha</font> </br>

# 7. 行的控制 #

1) 段落  
  
<p>段落内容</p>  
换行 + 空行  
  
2) 换行  
  
<br/>

# 8. 文字的对齐方式 alignment #

align: center, left, right

# 9. 文字的分区 division #

对局部进行精确控制(样式和位置)  
  
① 样式  
  
<div style="  
border:1px solid red;  
width:400px">  
我是在div内111111  
</div>  
  
②位置  
  
<div style="  
border:1px solid blue;  
width:200px;  
position:absolute;  
left:200px;  
top:300px">  
我是在div内222222  
</div>

# 10. 预格式化文本 #

<pre>  
静夜思  
窗前明夜光,  
疑是地上霜.  
举头望明月,  
低头思故乡.  
</pre>

# 11. 浏览器内核 #

mozilla(netscape, firefox)  
ie(360, ie6/7/8)

# 12. 选中 #

##  1) 复选框/单选框  ##

<input type="checkbox" name="likes">足球  
<input type="checkbox" name="likes" checked="checked">篮球  
<input type="checkbox" name="likes">羽毛球  
  
<input type="radio" name="gender" checked="checked" />男  
<input type="radio" name="gender" />女

##  2) 下拉框 ##

<select>  
<option>option1</option>  
<option selected="selected">option2</option>  
</select>

# 13. <select> size 和 multiple #

size : 显示几个选项  
multiple: 多选  
  
<select size="3" multiple="multiple">  
<option>option1</option>  
<option selected="selected">option2</option>  
<option>option3</option>  
<option>option4</option>  
<option>option5</option>  
<option>option6</option>  
<option>option7</option>  
</select>

# 14. 表格<table> #

<table>  
<tbody>  
<th>  
<td></td>  
</th>  
<tr>  
<td></td>  
</tr>  
</tbody>  
</table>  
  
<th> : 定义表头, 加粗居中  
<tbody>: 默认会添加

# 15. 跑马灯<marquee> #

<marquee>  
我会跑啊................1111111, 默认往左跑  
</marquee>  
<br/>  
<marquee direction="right">  
我会跑啊................2222222, 网右跑  
</marquee>  
<br/>

# 16. 多媒体页面 <embed src="url" /> #

在页面嵌入 电影 声音 等  
  
注: 需要流媒体服务器的支持

# 17. 加强部分实例源码 #

<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    </head>
    <body leftmargin="0px" topmargin="0px">
    1111111111111
    
    <hr align="center" color="red" width="50%" />
    
        <h1>11111</h1>    
        <h2>22222</h2>    
        <h3>33333</h3>    
        <h4>44444</h4>    
        <h5>55555</h5>    
        <h6>66666</h6>    
    
    <hr />
    
    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    
    <hr/>
    
    <font face="宋体">我是字体,wahaha</font> <br/>
    <font face="微软雅黑">我是字体,wahaha</font> </br>
    <font face="黑体">我是字体,wahaha</font> </br>
    
    <hr/>
    
    <div style="
            border:1px solid red;
            width:400px">
        我是在div内111111
    </div>
    
    <div style="
            border:1px solid blue;
            width:200px;
            position:absolute;
            left:200px;
            top:300px">
        我是在div内222222
    </div>
    
    <hr/>
    
    <pre>
            静夜思
          窗前明夜光,        
          疑是地上霜.
          举头望明月,
          低头思故乡.
    </pre>
    
    <hr/>
    
    <input type="checkbox" name="likes">足球
    <input type="checkbox" name="likes" checked="checked">篮球
    <input type="checkbox" name="likes">羽毛球
    
    <br/>
    
    <input type="radio" name="gender" checked="checked" />男
    <input type="radio" name="gender" />女
    
    <br/>
    
    <select>
        <option>option1</option>       
        <option selected="selected">option2</option>       
    </select>
    
    <hr/>
    
    <select size="3" multiple="multiple">
        <option>option1</option>       
        <option selected="selected">option2</option>       
        <option>option3</option>       
        <option>option4</option>       
        <option>option5</option>       
        <option>option6</option>       
        <option>option7</option>       
    </select>
    
    <hr/>
    
    <marquee>
        我会跑啊................1111111, 默认往左跑
    </marquee>
    <br/>
    <marquee direction="right">
        我会跑啊................2222222, 网右跑
    </marquee>
    <br/>
    
    
    
    
    </body>

# 18. 邮箱登陆-table布局 (请勿模仿!!) #

![SouthEast][]

##  1) 框架-外层布局 ##

![SouthEast 1][]

##  2) 登陆table ##

![SouthEast 2][]

## 3) 输入域以及粗略调整 ##

![SouthEast 3][]

[SouthEast]: /images/20220828/31516737e4d84aa980e44a92cae1f213.png
[SouthEast 1]: /images/20220828/36b17acb93a248738c0aafe348a27c2c.png
[SouthEast 2]: /images/20220828/7970ef6dfeed4745b963cc82f076471c.png
[SouthEast 3]: /images/20220828/c03d18f1deed43d5a9b4c01782265fa7.png