Day2 HTML控件

HTML常用的行级元素（行内元素）

不独占一行

HTML链接 a标签

a标签 href要跳转的网址
target：_blank 在新的窗口中打开

<a href="链接地址">连接文本</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

图像标签 img 单标签

<!--图像标签 img 单标签
    src: 图片的地址
    alt：用于加载失败替代的文字（必须要有）
    title：鼠标悬停在图片上的信息
    width：200px
    height：200px
    注意：一般只给图片设置宽度或者高度，高度或者宽度会等比例放大或者缩小
 -->
<img src="./style.jpg" alt="这是一张图片" width="200px"><br>

文本标签

<!--有语义的文本标签
    b标签加粗
    i 斜体
    strong 具有强调意义
    em 斜体
-->
<b>复制这段内容后打开百度网盘手机App，操作更方便哦</b><br>
<i>复制这段内容后打开百度网盘手机App，操作更方便哦</i><br>
<strong>复制这段内容后打开百度网盘手机App，操作更方便哦</strong><br>
<em>复制这段内容后打开百度网盘手机App，操作更方便哦</em><br>

无语意的行内元素 span

<!--无语意的行内元素 span 一般span标签也是配合 css使用，设置文本的部分内容-->
<span style="color:red">这是没有语义的行级元素</span><br>

实体字符

<!--HTML长用的实体字符
    &gt; ：>
    &lt; : <
    &copy;
-->
1&gt;2;<br>
1&lt;2;<br>
&copf;<br>
&copy;<br>

表单

<body>
        <!--表单标签，提交与输入用户输入-->
        <!--form 标签来划定一个表单地址，必须两个属性的存在
            action： 提交数据的地址，提交到哪里
            method：提交的方式
                    get： 默认是以get方式提交数据，数据会显示在url的地址栏中
                          传输数据大小受限制，相对来说不安全
                    post：数据不通过url传输，相对安全
                          数据大小不受限制
            enctype:如果表单中有文件上传必须添加这个属性，
                    指定属性为enctype="multipart/form-data"，用于文件转码
        -->
        <form action="" method="post" enctype="multipart/form-data">
            <!--普通文本输入框
                表单控件必须要填写 name属性
                单选框 type="radio" 必须有name，value属性，一组单选框的name属性必须相同
                多选框 type="checkbox" 必须有name，value属性，一组多选框的name属性必须相同
                下拉选项框 select 配合option使用，必须有name，value属性
            -->
            用户名：<input type="text" name="username"><br>
            密码： <input type="password" name="password"><br>
            性别：<input type="radio" name="sex" value="0">男
                <input type="radio" name="sex" value="1">女 <br>
            爱好：
                <input type="checkbox" name="love" value="l">篮球
                <input type="checkbox" name="love" value="z">足球 <br>
            学历：
                <select name="xl" id="1">
                    <option value="0">小学</option>
                    <option value="1">初中</option>
                    <option value="2">高中</option>
                </select><br>
            <!--文件上传，type="file" 一般用于文件上传-->
            请选择上传文件：<input type="file" name="file"><br>
            <!--文本域 textarea-->
            请输入个人说明：<br>
            <textarea name="text" id="" cols="30" rows="10">个人信息</textarea><br>
            <!--按钮 type="submit" value="确定"-->
            <input type="submit" value="确定"><br>
            <button>提交</button>
            <br>
            <!--重置按钮-->
            <input type="reset" disabled>

            <!--隐藏域 hidden 不需要用户查看和填写的信息-->
            <input type="hidden" name="id" value="0">
            <!--disable 禁用属性-->
            <input type="reset" disabled>
            <!--placeholder 提示-->
            用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
            <!--checked 默认选中-->
            性别：<input type="radio" name="sex" value="0" checked>男
                 <input type="radio" name="sex" value="1">女 <br>

        </form>
</body>

HTML常用的行级元素（行内元素）

HTML链接 a标签

图像标签 img 单标签

文本标签

无语意的行内元素 span

实体字符

表单

猜你喜欢