笔记 html

html的构架
注释语法

<!--声明文档,告诉浏览器html版本,以及怎么解析-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器标签</title>
</head>
<>
    <h1>1级标题</h1>
    <h6>6级标题</h6>

    <p>段落</p>

    <!--换行-->
    <br>

    <ul>
        <li>无序列表</li>
        <li>N项</li>
    </ul>

    <!--属性type值有"I,i,1"等-->
    <ol type="A" start="2">
        <li>有序列表</li>
        <li>N项</li>
    </ol>

    <!--表格 table 行tr 列td-->
    <!--blrder 边框-->
    <!--width 设置单元格的总体宽度 单位是px 像素-->
    <!--height 设置单元格的总体高度-->
    <!--cellpadding 内容距离表框的距离-->
    <!--cellspacing 单元格和单元格之间的距离-->
    <!--rowspan 垂直合并(跨行显示)-->
    <!--colspan 水平合并(跨列显示)-->
    <!--anglin 内容水平对齐方式-->
    <!--valign 内容垂直对齐方式-->
    <!--align 默认靠左对齐 center  right-->
    <!--valign 垂直对齐方式默认居中  top bottom -->
    <table>
        <th>表头默认居中</th>
        <tr>
            <td>
                内容
            </td>
        </tr>
        <tr>
            <td>
                内容
            </td>
        </tr>
    </table>

    <!--链接标签 a标签 href属性,跟的是要跳转的网址-->
    <!--target可以设定在新标签页打开-->
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <br>

    <!--图像标签,是一个单标签,不需要闭合-->
    <!--src:图片的地址(网络资源或者本地资源)-->
    <!--alt:用于加载失败的代替文字(必须存在)-->
    <!--title:鼠标悬停在图片上的提示信息-->
    <!--width可以设置图片宽度,height可以设置图片的高度,只设置一个会等比例拉伸-->
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544700413835&di=081a7c755118189683846689ac35709a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dbbc764372234349b600b66c6a1837fbb%2F023b5bb5c9ea15cea8396524bc003af33b87b2cc.jpg"\
     alt="美女图片" title="美女图片" width="400px">
    <br>

    <!--b标签,加粗-->
    <!--i标签,斜体-->
    <!--strong标签,加粗并强调语义-->
    <!--em标签,斜体并强调语义-->
    <b>b标签</b>,加粗
    <br>

    <!--span标签 无语义的行级元素,配合css使用,来设置文本当中一部分内容-->
    <span>配合css使用</span>
    <br>

    <!--字符实体 &gt; ,大于  &lt; ,小于-->
    1>2<br>
    1&gt;2<br>

    <!--表单-->
    <!--action 数据的提交地址, method 提交方式
    表单提交默认是以get方式进行数据传说,通过url地址传输数据,会显示在地址栏中
    传输有大小限制,根据浏览器的不同数据大小不同,不安全
    post方式传输数据地址栏是看不到的,相对安全,数据传输没有大小限制-->
    <!--username与value组成字典-->
    <!--如果表单中有文件上传,必须添加enctype,指定属性值为multipart/form-data,用于文件转码-->
    <form action="" method="post" enctype="multipart/form-data">
        用户名:<input type="text" name="username"><br>
        密  码:<input type="password"><br>
        <!--radio是单选框-->
        性  别:<input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="0">女
            <br>
        <!--checkbox是多选框-->
        爱好:<input type="checkbox" name="love" value="1">篮球
            <input type="checkbox" name="love" value="2">足球
            <input type="checkbox" name="love" value="3">台球
        <br>

        <!--select下拉框-->
        学历
        <select name="xl" id="">
            <option value="0">小学</option>
            <option value="1">初中</option>
            <option value="2">大学</option>
        </select><br>

        <!--文件上传-->
        请选择上传文件:<input type="file" name="file">
        <br>

        <!--文本域-->
        请输入个人说明:
        <textarea name="text" id="" cols="30" rows="10"></textarea>

        <!--按钮 type="submit"-->
        <input type="submit" value="提交">
        <button>确定</button>
        <!--重置按钮-->
        <input type="reset">

        <!--隐藏域 hidden ; 不需要用户查看和填写的信息-->
        <input type="hidden" name="id" value="0">

        <!--禁用属性,disabled ; readonly;
            输入框内显示的内容 placebolder="请输入用户名"-->
    </form>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值