前端学习html1

最新推荐文章于 2023-03-30 21:09:09 发布

苗苗大佬

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量46

点赞数

分类专栏：测试开发前端文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_39349045/article/details/119277858

版权

测试开发同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

前端基础
查询网站：https://www.w3school.com.cn/h.asp

什么是html？
    用来交给浏览器解释的语言

html的核心：标签
    所有的内容都是在标签中存放
    <html>  开始
        标签中间用来编写 相关的其他内容，标签是可以层层嵌套的
    </html> 闭合
闭合标签/自闭合标签
    闭合标签，有开始有结束
        <p></p>
        <span></span>
    自闭合标签，自己是开始也是结束
        <input /> 
        <br /> 换行

每个标签：行内标签、块级标签
    行内：可以 并列在一行
    块：占满正行，不能和其他模块共同在这一行

标签属性：
    id: 唯一的，不能重复
    class: 不唯一，可以重复
    一般会体现在css、js编写时使用

默认组成：
    <!DOCTYPE html>     用来声明文档类型，告诉浏览器，这是一个html
    <html lang="en">    
    <head>
        <meta charset="UTF-8"/>
        <title>Title</title>
    </head>
    <body>

    </body>
    </html>

html中的回车，不会页面造成任何影响

<head>标签：
    主要用来声明一些不可见的隐藏配置
    title
    meta
    link
    style
    script

<body>标签
    用来承载我们所有html的展示的代码

    标题标签<h1> ---> <h6>
    
<p> 段落

<span> 文本
    
<div> 块标签 ，通常用来做页面布局，组成dom树的核心就是div

p、span、div 都是白板标签

input标签：
    <input type="text" />
    <input type="text" placeholder="请输入用户名称"/>
    <input type="text" value="张同学"/>

    input输入的内容的值，赋给了value属性，当变更value属性的值时，input对应也会变动 
  


   
 form表单：
    action  代表会跳转到目标地址
    method  代表以什么方式请求 
    submit只会提交所在的form表单中的表单信息
     form表单如果出现嵌套，则只有最外层的会被浏览器解析出来

    name属性 代表了表单传递时的key
    value属性代表了表单传递时的value

1、form表单的提交

    <div>
        <p>表单提交</p>
        <form action="https://www.baidu.com/">
        <input type="text" placeholder="请输入用户名" name="username">
        <input type="password" placeholder="清输入用户密码" name="pwd">
        <input type="text" placeholder="请输入地址" name="address">
        <input type="submit" value="submit">
        <input type="button" value="button">
    </form>
    </div>

效果
在这里插入图片描述
改动 post形式

    <div>
        <p>表单提交</p>
        <form action="https://www.baidu.com/" method="POST">
        <input type="text" placeholder="请输入用户名" name="username">
        <input type="password" placeholder="清输入用户密码" name="pwd">
        <input type="text" placeholder="请输入地址" name="address">
        <input type="submit" value="submit">
        <input type="button" value="button">
    </form>
    </div>

在这里插入图片描述

2、单选：通过name属性进行绑定，按钮不可以双选，选择男的时候不能选择女

    <div>
        <p>单选</p>
        <p>请选择性别</p>
        <input type="radio" name="sex" value="男"><span>男</span>
        <input type="radio" name="sex" value="女"><span>女</span>
    </div>

在这里插入图片描述
提交性别

    <div>
        <form action="https://www.baidu.com/">
            <p>单选</p>
            <p>请选择性别</p>
            <input type="radio" name="sex" value="男"><span>男</span>
            <input type="radio" name="sex" value="女"><span>女</span>
            <input type="submit" value="submit" >
        </form>
        
    </div>

注意的是submit 后面的属性的value，效果是
在这里插入图片描述
3、多选

    <div>
            <form action="https://www.baidu.com/">
                <p>多选</p>
                <p>请选择性别</p>
                <input type="checkbox" name="course" value="english"><span>英语</span>
                <input type="checkbox" name="course" value="history"><span>历史</span>
                <input type="submit" value="submit" >
            </form>
            
        </div>

在这里插入图片描述
4、重置

 <input type="reset" name="重置">

    <div>
            <form action="https://www.baidu.com/">
                <p>多选</p>
                <p>请选择性别</p>
                <input type="checkbox" name="course" value="english"><span>英语</span>
                <input type="checkbox" name="course" value="history"><span>历史</span>
                <input type="submit" value="submit" >
                <input type="reset" name="重置">
            </form>
            
        </div>

苗苗大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习html1

前端基础查询网站：https://www.w3school.com.cn/h.asp什么是html？用来交给浏览器解释的语言html的核心：标签所有的内容都是在标签中存放 <html> 开始标签中间用来编写相关的其他内容，标签是可以层层嵌套的 </html> 闭合闭合标签/自闭合标签闭合标签，有开始有结束 <p></p> <span>&lt
复制链接

扫一扫

专栏目录