HTML学习记录2

最新推荐文章于 2025-04-27 18:49:59 发布

去码头整点薯条98

最新推荐文章于 2025-04-27 18:49:59 发布

阅读量332

点赞数 10

文章标签： html 学习前端

本文链接：https://blog.youkuaiyun.com/2403_89223879/article/details/144055585

版权

Day3

01-无（有）语义的标签

无语义的标签：

<div></div> 独占一行

<span></span>span不会独占一行

有语义的标签

更多html标签可以去MDN上找

MDN Web Docs

02-字符实体

为了区分一些用于运算的字符

通常为& ；的形式

< 左尖括号

> 右尖括号

  空格

" 双引号

03-表单标签

表单标签 form

action: 指定表单数据要交给哪个页面处理

method:http请求中的哪种提交方式

get、post、put、head

enctype:告诉服务器，如何去解析这次的请求

post

上传文件、图片 enctype="multipart/form-data"

enctype="application/x-www-form-urlencoded" 默认

input 下拉菜单、文本框

type="表单类型"

value="元素值"

input中name属性一定要填否则无法正常提交

readonly 只读属性

checked 默认选中

<button></button> 在h5中为提交按钮

disabled 默认禁用

<input type="text" type="password"> 默认第一个type

radio为单选 checkbox为多选

单选多选的name一定要一致多选一般搭配value来使用

submit上传

reset 重填

button普通按钮

disable 默认禁用

file文件

hidden隐藏

email邮箱

password 密码

04-下拉框

multiple：以列表显示显示下拉框

selected 表示的是下拉框里面的默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        收货地址：
        <!-- multiple：以列表显示显示下拉框 
        selected  表示的是下拉框里面的默认选中 
        
        
        -->
        <select name="address"  id="">
            <option value="广州">广州</option>
            <option value="南京" selected>南京</option>
            <option value="陕西">陕西</option>


        </select>
              <button>提交</button>


              <!--maxlength 限制输入量-->
         <input type="text" name="" id="" maxlength="6">

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

05-文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <textarea name="hobby" cols="20" rows="20" >
        </textarea>
    </form>
</body>
</html>

placeholder属性：背景提示词

06-框架标签

框架标签不受同源策略的约束协议、端口、主机名

引号内可以输入网址

<details></details>详细内容

07-作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <form action="#">
         性别：<input type="radio" name="sex" id="">男
         <input type="radio" name="sex" id="">女<br>
         生日<input type="date" name="date" id=""><br>
         所在地区<input type="text" name="address" id="" placeholder="请输入地址"><br>
         婚姻状况<input type="radio" name="state" id="" value="未婚">未婚
         <input type="radio" name="state" id="" value="已婚">已婚
         <input type="radio" name="state" id="" value="离婚">离婚<br>
         学历<input type="text" name="xueli" id=""><br>
         喜欢的类型<input type="checkbox" name="type" id="" value="可爱的">可爱的
         <input type="checkbox" name="type" id="" value="妩媚的">妩媚的
         <input type="checkbox" name="type" id=""  value="小鲜肉">小鲜肉
         <input type="checkbox" name="type" id="" value="老腊肉">老腊肉
         <input type="checkbox" name="type" id="" value="都喜欢">都喜欢<br>
         自我介绍 <textarea name="self" id="" placeholder="请输入自我介绍"></textarea><br>
         <input type="button" name="button" id="" value="免费注册"><br>
         <input type="checkbox" name="agree" id="" value="我同意注册条款和会员加入标准">我同意注册条款和会员加入标准<br>
         <a href="#">我是会员，立刻登录</a><br>
    </form>
    <h2>我承诺</h2><br>
    <ui>
        <li>年满18岁，单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
    </ui>
</body>
</html>