[学习交流] 【广州校区】【原创】html笔记整理

本帖最后由 yuhaohong 于 2018-4-12 13:59 编辑

web开发工具

fireBug：火狐浏览器的调试插件
浏览器:IE浏览器,chrome,火狐
HBuilder:web开发工具

HTML

HTML标签不区分大小写，建议使用小写
HTML 文件都是以.html 或者.htm 结尾的，建议使用.html 结尾

标题标签:

h1 ~ h6:逐级变小

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>标题标签</title>
        </head>
        <body>
            <h1>title</h1>
            <h2>title</h2>
            <h3>title</h3>
            <h4>title</h4>
            <h5>title</h5>
            <h6>title</h6>
        </body>
    </html>

水平线:
[HTML] 纯文本查看 复制代码
```
<hr/>
```
换行:
[HTML] 纯文本查看 复制代码
```
<br/>
```
段落标签:
[HTML] 纯文本查看 复制代码
```
<p><p/>
```
字体标签:
[HTML] 纯文本查看 复制代码
```
<font><font/>
```
- size:字体大小1~7逐渐增大
- color:字体颜色
- face:字体样式
加粗:
[HTML] 纯文本查看 复制代码
```
<b></b>
```
斜体:
[HTML] 纯文本查看 复制代码
```
<i></i>
```
图片标签:
[HTML] 纯文本查看 复制代码
```
<img src="xxx"/>
```
- src:图片路径
- width:图片宽度
- height:图片高度
- alt:图片加载不出来显示的信息
无序标签:
- type:有3种样式
- ul: unorder list
有序标签:
[HTML] 纯文本查看 复制代码
```
<ol></ol>
```
- type:有7种样式
- reversed:倒叙
- start:起始序号
- ol: order list
超链接:
- :不跳转
- target:_self、_blank
表格标签:
[HTML] 纯文本查看 复制代码
```
<table><tr><td></td></tr></table>
```
- width:表格宽度
- height:表格高度
- border:变宽宽度
- cellspacing:表格间隔
- cellpadding:内部留白
- align:对齐方式
- bgcolor:背景颜色
- rowspan:跨行
- colspan:跨列
- 表格可以嵌套表格
frameset:不能在<body>标签内，用frameset时不用body标签

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>框架集标签</title>
        </head>
        <frameset cols="25%,*">
            <frame src="left.html" />
            <frame src="right.html" />
        </frameset>
    </html>
    ```
    
    ```
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>网站后台系统显示页面</title>
        </head>
        <frameset rows="20%,*">
            <frame src="top.html" />
            <frameset cols="20%,*">
                <frame src="left.html" />
                <frame name="right" />
            </frameset>
        </frameset>
    </html>
    
    <!--left-->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <a href="right.html" target="right">会员管理</a><br /><br />
            <a href="#" target="right">品牌管理</a><br /><br />
            <a href="#" target="right">商品管理</a><br /><br />
            <a href="#" target="right">分类管理</a>
        </body>
    </html>

纯情小飞飞 · 纯情小飞飞

很详细啊！顶顶！

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州校区】【原创】html笔记整理

1 个回复