HTML(一)_html中如何判断按钮是属于一组的-CSDN博客

本文链接：https://blog.csdn.net/qq_62574400/article/details/125494126
一.什么是html
超⽂本标记语⾔(Hyper Text Markup Language)，标准通⽤标记语⾔下的⼀个应⽤。HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔，是⽹⻚制作所必备的。超⽂本：功能⽐⽂本强⼤, 就是指⻚⾯内可以包含图⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。标记语⾔: 语法由标签组成
二.html的基本结构和语法
⽂档结构介绍：⽂档声明：⽤于声明当前HTML的版本，这⾥的是HTML5的声明 html根标签：除⽂档声明以外，其它内容全部要放在根标签html内部⽂档头部配置：head标签，是当前⻚⾯的配置信息，外部引⼊⽂件, 例如⽹⻚标签、字符集等⽂档显示内容：body标签，⾥边的内容会显示到浏览器⻚⾯上
基本结构和语法
<!DOCTYPE html>
<html>
    <!-- hand 是你要写的网页头部 -->
    <hand>
        <!-- title 是你要写的网页名称 -->
        <title>HTML</title>
    </hand>
    <!-- body 是你要书写的网页内容 -->
        <!-- bgcolor 是设置背景颜色的 -->
        <body bgcolor="pink">
            <marquee behavior="right" direction="left">需要加微信吗</marquee>
            <!-- h1是 标题 -->
            <h1><font size=6 color=white>HTML</font></h1>
            <!-- p 是段落 -->
            <p>
                <!-- font 是设置字体的 size 是字体的大小 color 是字体的颜色 face 是字体的样式 b  是将选中的字体加粗 i 是将选中的字体变倾斜 hr 是下划线换行 br 是直接换行 -->
                <font size="4" color="white" face="仿宋">众所周知<b>曹逍萌</b>是一种两腿会飞的<i>傻鸟</i>，<hr/>希望大家打鸟的时候就照着这种鸟打这样容易吃到鸟肉</font>
            </p>
            <!-- 超链接 <a href="指定需要跳转的目标路径" target="打开的方式"> 需要展示给用户看的内容 </a>-->
            <a href="C:\Users\17214\Downloads\ab8d4ef515882a7228da2f2077840677.gif">点击查看曹逍萌</a><hr>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1656310663460_R&pv=&ic=&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=MCwzLDIsNiw0LDUsMSw3LDgsOQ%3D%3D&ie=utf-8&sid=&word=%E5%82%BB%E9%B8%9F">点击上网查找更多曹逍萌图片</a>
            <a href="https://www.pornhub.com/">点击打开pornhub(注! 进入此网站需要加速器 不能是游戏加速器)</a>
            <!-- ol 有序 常用属性有 type="设置排序顺序的字"  start="从什么时候开始往下排序" -->
            <ol type="I" start="1">
                <li>HTML1</li>
                <li>HTML2</li>
                <li>HTML3</li>
            </ol>
            <!-- 跳转值锚点所在的位置 -->
            <a href="#p2">下一页</a>
            <p> 1、猛虎下山苍龙啸，小老弟你别太傲
                <hr>
                2、其实我早就知道我们之间没有结果，可我却还是要这样飞蛾扑火
                <hr>
                3、先穿袜子在穿鞋，先当孙子再当爷
                <hr>
                4、花花世界迷人眼，没有实力别赛脸。
                <hr>
                5、相识满天下，知心有几人
                <hr>
                6、小伙气质猛如狼，一腔热血拍胸膛。
                <hr>
                7、灯红酒绿惹人醉，大哥带你混社会。
                <hr>
                8、万般皆是命，半点不由人，你看我还有几分像从前。
                <hr>
                9、天才理应飞向天国，真正的诗人有责任唤醒世人，慎择那较崇高的灵境。
                <hr>
                10、说好三年，三年之后又三年，三年之后又三年，都快十年了，老板!
                <hr>
                11、东方不亮西方亮，你爹啥样我啥样。
                <hr>
                12、做人不要太飘，小心背后挨刀。
                <hr>
                13、一个人对社会的价值，首先取决于他的感情、思想和行动对增进人类利益有多大作用。
                <hr>
                14、我可以笑着给你一个台阶下，也可以反手给你一个大嘴巴。
                <hr>
                15、花花世界迷人眼，没有实力你别塞脸
                <hr>
                16、一个人追求的目标越高，他的才能就发展得越快，对社会就越有益。
                <hr>
                17、做人不要太攀比，要比就比爱粪几
                <hr>
                18、勇者发怒，抽刃向更强者;怯者愤怒，即抽刃向更弱者。
                <hr>
                19、江南江北一条街，打听打听谁是爹。
                </p>
                <!-- 用name 设置锚点 -->
                <p name="p2">
                20、小妹语录网上抄，小心钢棍身上飘
                <hr>
                21、如果有一天，我能够对我的公共利益有所贡献，我就会认为自己是世界上较幸福的人了。
                <hr>
                22、多个朋友多条路，多个老公多个家
                <hr>
                23、蝙蝠再飞不是鸟，新鞋再好他不跟脚。
                <hr>
                24、作为确定的人，现实的人，你就有规定、就有使命、就有任务，至于你是否意识到这一点，那是无所谓的。
                <hr>
                25、我现在对外界一点都不留念，就好象是一只乌龟只喜欢缩在自己的壳内，这样它会感觉到很安全。
                <hr>
                26、少年闰土身上纹，掌声送给周树人
                <hr>
                27、近日，网络上流传各种大全，深入人们的心灵。但其实较大的幸福是把自己的精神力量奉献给他人下面我们就来看看社会精神语录网上抄。
                <hr>
                28、昨天是历史，今天是开始，明天谁都不好使。
                <hr>
                29、一个人能承担多大的责任，就能取得多大的成功!</p>
                <img src="C:\Users\17214\Downloads\ab8d4ef515882a7228da2f2077840677.gif" width="100px" height="100px" alt="曹逍萌的裸照" title="傻逼曹逍萌"/>
                <!--self：用当前页面跳转（默认的）-->
                <a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
                <a href="#">假链接</a>
                <table border="1"  width="200" align="center" bgcolor="pink" cellspacing="0">
                    <!--table定义tr，tr里面定义td，td里面再放内容-->
                    <!--表格哪怕只有一行一列 td都不能少-->
                    <th>姓名</th>
                    <th>性别</th>
                    <!--colspan 跨列合并单元格-->
                    <!--合并之前，每一行的列的个数应该一样-->
                    <th colspan="2">年龄/成绩</th>
                   
                    <tr>
                        <td>胡永强</td>
                        <td><a href="https://baike.baidu.com/item/%E5%B0%8F%E5%84%BF%E4%B8%A4%E6%80%A7%E7%95%B8%E5%BD%A2/9034450?fromtitle=%E9%98%B4%E9%98%B3%E4%BA%BA&fromid=509595&fr=aladdin" target="_blank">阴阳人</a></td>
                        <td>98</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <!--rowspan 跨行合并单元格-->
                        <td rowspan="2">男</td>
                        <td>20 </td>
                        <td>98 </td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>21 </td>
                        <td>99 </td>
                    </tr>
                </table>
                <!--表单用于收集不同类型的用户输入 它由一个<form>标签定义，里边有不同的表单控件-->
                    <!--常用属性 action：提交路径，默认是当前页面
                                 method：提交方式，常用的是 get和post,默认就是get-->
                                 <!--get 的话 地址得是字符串类型的  post的话是在http协议的请求体中携带的 post比get更安全 get比post更快-->
                <form action="https://www.4399.com/" method="get" target="_blank">
                    <!--input:输入域，通过type属性来指定类型-->
                    <!--text 是默认类型 文本-->
                    <input type="text" value="请输入账号">账号
                    <br/>
                    <!--password 密码框-->
                    <input type="password" maxlength="6">密码
                    <br/>
                    <!-- radio 单选框 只有当 name 属性相同过的单选框 ，才是同一组单选框才能够实现单选效果 -->
                    <input type="radio" name="男">男<input type="radio" name="男"/>女
                    <!--submit 提交按钮：内置提交表单的功能-->
                    <input type="submit"/>
                    <br/>
                    <!-- checkbox 复选框 同一组多选框，也应该具备相同的 name 属性-->
                    <input type="checkbox" name="A">A<input type="checkbox" name="B">B<input type="checkbox" name="C">C<input type="checkbox" name="D">D
                    <br>
                    <!-- file 文件选择框 -->
                    <input type="file"/>
                    <br>
                    <!-- date 日期选择框 -->
                    <input type="datetime-local"/>
                    <br/>
                    <!-- hidden 隐藏域：服务器提交数据，但是不在页面上展示出来-->
                    <input type="hidden"/>
                    <br/>
                    <!--button 普通按钮：不内置任何功能，我们需要在学习js之后再给它绑定点击事件-->
                    <input type="button"/>
                    <br/>
                    <!--reset 重置按钮；内置重置表单功能-->
                    <input type="reset"/>
                    <br/>
                    <!--select 选择菜单 option:选择菜单的选项 name在select里边指定 value在option里面指定 opthion定义在select里面-->
                    <select>
                        <option value="老干妈">1.老干妈</option>
                        <option value="面包片">2.面包片</option>
                        <option value="臭豆腐">3.臭豆腐</option>
                    </select>
                    <br/>
                    <!--textarea文本域 rows：行 cols：列-->
                    <textarea rows="20" cols="30" name="introduce"></textarea>
                    <!--通用属性
                        name 1.表单项的数据需要提交给服务器，那么他就必须具备name属性
                             2.同一组单选、多选狂需要具备相同的name
                       value 1.按钮的value属性就是按钮上的文字
                             2.输入框、密码框、文件选择框、日期选择框等等的value属性的值，就是你所属的值，就是你所输入的值
                             3.单选和多选都需要指定的value-->
                    <!--设置默认值
                        text,password:通过value属性-->
                    <br>    
                    <input type="text" name="username" value="zs"/>
                    <br>
                    <!--radio checkbox: 通过checked属性-->  
                    <input type="radio" name="sex" value="1"/>男
                    <br/>
                    <input type="radio" name="sex" value="0" checkbox="checked"/>女 
                    <!--select: 在option上通过selected属性--> 
                    籍贯：<select name ="address">
                            <option value="sz">深圳</option>
                            <option value="bj">北京</option>
                            <option value="sh" selected="select">上海</option>
                          </select>  
                    <br>
                    <!--textarea:直接在标签体中写-->
                    <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea>        
                </form>
        </body>
   
</html>