HTML基础笔记(推荐)

时间:2021-05-08

一,网页基础结构:

XML/HTML Code复制内容到剪贴板
  • <html>
  • <head>
  • <title>我的第一个网页</title>
  • </head>
  • <body>
  • 这是我的第一个网页
  • </body>
  • </html>
  • 注意:在HTML中,标签大部分都是成对出现的。有开始就有结束

    如果不是成对出现的标签,在标签的后面加上/表示结束。

    二、基本标签

    1、h1-h6 标题标签
    2、em 斜体
    3、strong 粗体
    4、hr 切割线
    5、br 换行
    6、p 段落标签
    7、&nbsp; 特殊符号,空格
    8、&gt; 特殊符号,>
    9、&lt; 特殊符号,<
    10、&quot; 特殊符号,"
    11、&copy; 特殊符号,版权符号
    12、<!-- -->注释
    13、img 图片标签

    属性:src:图片的路径,alt:当图片找不到时,显示的文字
    title:鼠标悬浮显示的文字
    用法:
    <img src="..." alt="..." title="..."/>

    14、a 超链接标签
    属性:href:链接到哪里去
    用法:
    <a src="...">链接</a>
    锚链接
    先在一个位置写上<a name="?"></a>
    然后另一个位置写上<a href="?"></a>
    点击这个链接,会找到这个?所在的位置

    用法:
    <a name="?">链接到这了来</a>
    <a href="?">从这了链接</a>

    15、ul-li 无序列表
    用法:
    <ul>
    <li>列表项1</li>
    .......
    <li>列表项n</li>
    </ul>

    注意:没有顺序,每一个li就是一行
    默认情况下,每一个li前面都有一个实心小点

    16、ol-li 有序列表
    用法:
    <ol>
    <li>列表项1</li>
    .......
    <li>列表项n</li>
    </ol>
    就是将无序列表的实心小点换成了序号

    17、dl-dt-dd定义列表
    用法:
    <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    </dl>

    实现效果:
    标题1
    内容1
    标题2
    内容2

    18、表单元素
    a、text 单行文本框
    b、password 密码框
    c、radio 单选按钮
    d、file 文件选择器
    e、checkbox 复选框
    f、select 下拉列表
    g、submit 提交按钮
    h、reset 重置按钮
    i、textarea 文本域

    用法:
    <textarea cols="50" rows="20">
    12345678941515641
    </textarea>

    j、form标签 提交标签
    语法:
    <form method="提交方法" action="要提交到哪里去">

    </form>
    如果action为空,则表示提交到当前页面
    method可选属性:post、get
    post安全性高,提交的信息不会显示在地址栏
    get安全性较低,提交的信息显示在地址栏
    如果不写method属性,默认是get

    k、input标签 可选值:就是表单元素a-i

    l、select 下拉列表

    用法:
    <select>
    <option>2016</option>
    <option>2015</option>
    <option>2014</option>
    </select>

    m、<label>名字:<input type = "text"/></label> 关联表单

    作用:点击名字这两个字,鼠标会聚焦在名字后面的文本框中

    三、注意:
    1、标签名应该小写
    2、HTML标签应闭合(结束)
    3、标签应正确嵌套

    四、表单属性
    1、readonly="readonly" 只读
    2、disabled="disabled" 禁用

    五、表格
    1、什么是表格?
    最简单的就是队列,表格之间,可以写东西

    2、表格怎么使用?
    先画一个大框,再画每一行,再画每一列
    <table>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>

    3、数据或者说是元素都可以放在td里面

    4、table的一些属性:
    width:设置宽度
    border:边框的粗细
    align:对齐方式,最常见的,center,水平对齐
    valign:对齐方式,最常见的,center,上下对齐
    cellspacing="20" :格子与格子之间的距离,默认值是0
    cellpadding="20":内容与格子之间的距离,默认值也是0
    bgcolor:更改背景颜色

    5、合并:
    colspan="2":合并单元格,横着合并
    rowspan="2":合并单元格,竖着合并

    以上这篇HTML基础笔记(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

    原文地址:http://www.cnblogs.com/w13248223001/archive/2016/07/21/5693437.html

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章