HTML网页_tearts.html-优快云博客

html

内联框架

<iframe src="" name="点我" frameborder="0" width="1000px" height="800px"></iframe>
<a href="表格.html" target="_blank">点击跳转</a>

列表

有序列表

<ol>
    <li></li>
    <li></li>
</ol>

无序列表

<ul>
</ul>

自定义列表

<dl>
    <dt>列表名称</dt>
    <dd>列表内容</dd>>
</dl>

图像标签

<img src="../html/image/1.jpg" alt="" width="100px" height="100">

基本标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<p>段落标签</p>
<br>换行标签</br>

<!--水平线标签-->
<hr>

<strong>粗体</strong>
<em>斜体</em>

特殊符号

空格

>大于号

< 小于号

&copy 版权符号

谋体元素

<!--controls 进度控制
autplay 自动播放-->
<video src="../" controls autoplay/>
<audio src="../" controls/>

表单

action 表单提交的位置
method：post get 提交方式
get 我们可以看见提交的信息，高效，但不安全
post ：比较安全，传输大文件
value 默认初始值
maxlength 最长能写几个字符
size 文本框长度
checked默认选择
readonly只读
disabled 禁用
hidden 隐藏
placeholder 提示信息
required 不能为空
pattern 正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<h1>注册</h1>
<form action="html1.html" method="get">
<!--    文本输入框-->
    <p>名字: <input type="text" name="username" placeholder="请输入姓名" maxlength="8"  required></p>
<!--    密码输入框-->
    <p>密码: <input type="password" name="userpassword" hidden></p>

<!--    单选框-->
    <p>性别
        <input type="radio"value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>
<!--    多选框-->
    <p>
        爱好
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="eat" name="hobby">吃
        <input type="checkbox" value="play" name="hobby">玩
        <input type="checkbox" value="basketball" name="hobby">篮球
    </p>
<!--   按钮 -->
    <p>
        <input type="button" name="btn1" value="点击变帅">
    </p>
    <p>
        <input type="image" src="../">
    </p>

<!--    下拉框，列表框-->
    <p>
        下拉框：
        <select name="列表名称">
         <option value="选项的值" >中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">印度</option>
            <option value="选项的值" selected>英国</option>


        </select>
    </p>
<!--    文本域-->
    <p>
        反馈
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
<!--    文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

<!--    邮件验证-->
    <p>
        邮箱
        <input type="email" name="emall">
    </p>
<!--    url-->
    <p>url
        <input type="url" name="url">
    </p>
<!--    数字验证-->
    <p>
        数字
        <input type="number" name="num" max="100" step="10">
    </p>

<!--    滑块-->
    <p>
        滑块
        <input type="range"  name="" min="0" max="100">
    </p>
<!--    搜索框-->
    <p>
        搜索
        <input type="search" name="search">
    </p>

<!--    增强鼠标可用性-->
    <p><label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>
    <input type="submit">
    <input type="reset">
    </p>

</form>
</body>
</html>

表格

跨列：colspan
跨行：rowspan
行：tr
列：td

    <tr><td colspan="1">1-1</td>行tr
        列td
    </tr>

链接

target:表示窗口在哪里打开
blank 在新标签里打开
-self 在自己页面打开

锚链接

1.需要一个标记
2.跳转到标记

<p><a name="top">顶部</a></p>
<p><a href="heml3.html">点击我跳转</a></p>
<a href="http://www.baidu.com">百度</a>
<a href=""></a>
<p></p>
<a href="#top">回到顶部</a>