前端之HTML

最新推荐文章于 2022-04-11 16:45:56 发布

每日小新

最新推荐文章于 2022-04-11 16:45:56 发布

阅读量315

点赞数 1

分类专栏：前端 Java+大数据之旅文章标签： html

本文链接：https://blog.csdn.net/llAl_lAll/article/details/120403653

版权

Java+大数据之旅同时被 2 个专栏收录

112 篇文章 34 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

🍒前端HTML：超文本标记语言

1、标签

单标签：自闭合标签
双标签：闭合标签

行标签：（行内元素宽度由内容支撑，可与其他元素同行，只能嵌套行内元素）
块标签：（独占一行，前后换行，可以设置上下内外边距，可以嵌套其他元素和块元素行内元素）

2、常用标签

head :头标签给浏览器看
body :身体标签给用户看
meta charset =“utf-8” :解码格式：浏览器使用哪种编码格式解析html页面中的内容编码保持一致
title :标题标签（网页收藏的名字）
bgcolor ：颜色
background :背景图片
a ：标签（属性：href:地址，（绝对地址|相对地址））
- 属性：title——当鼠标停留时提示字
- target——打开方式(_self:本页面，_blank:新页面）
img:图像标签
- 属性：src——图像路径
- width:宽度px，height：高度px(如果只设置一个，则会等比缩放，保证不会失真）
- border:边框
- alt:当图片无法正常显示的提示字
- title:正常显示提示字
p :段落标签（内容正常显示上下留白，特殊的快标签，不能嵌套块标签）
h* :标题标签（h1~h5)
hr :水平线标签
align :快内容对齐属性（right,center,left,justify（多行有效）)
div :块元素，正常显示（div+css布局)
span :帮助元素添加使用样式（行内标签）

3、列表标签

无序列表：ul标签——属性type:(square(方块）、circle(空心圆）、dis(实心圆默认））
有序列表：ol标签——属性type:(i,A,工，l,a)
自定义列表:列表项标记——li标签

规范：》》》

内容必须定义在列表中
ul|ol元素只能是li
li标签中可以嵌套任何内容
列表之间可以相互嵌套

在这里插入图片描述

4、表格标签table

tr:标签行
th:表格头单元格
td:表格体单元格
常用属性：bgcolor（背景色）、border-collapse:collapse (单线条）、rowspan（跨行）、colspan(跨列）

<body>
    <table border="5" align="center" bgcolor="pink" style="border-collapse:collapse" width=800px height=400px
    background="https://webstatic.mihoyo.com/ys/event/e20210901-fab/images/1_poster.4aa4c624.png">
        <tr>
            <th colspan="6" height=80px>
                课程表
            </th>
        </tr>
        <tr align="center" bgcolor="#FFFF">
            <th rowspan="3" bgcolor="pink">上午</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </tr>
....................................略

在这里插入图片描述

5、表单：Form

表单一般定义在form标签中的子元素大部分表单元素由input标签提供（type)
收集用户信息Form属性：
- action:提交位置
- method:提交方式
  - get:拼接在地址栏中，不安全，大小限制，默认，效率高
  - post:封装请求体中，安全，无限制
  - 有文件提交时：enctype="multipart/form-data"
常见属性：①id——前后页面中元素的唯一标识(结合js) ②class——可重复，可以定义值列表（结合css) ③name——后台区分表单的唯一标识提交元素必备name属性
常用标签：radio(单选框,）、value(属性）、checkbox(多选框，默认checked）、hidden(隐藏框）、file(文件）、reset(重置）、button(按钮 οnclick=“alert（）”）、label(定义标签，for:对应的id绑定，fieldset:元素集，legend:定义提示信息）、textarea(多行文本域标签,placeholder:提示字）、select(下拉框，option:子标签）、readonly(属性只读）、disabled（属性禁用）、autofocus(属性聚焦）、required(必填属性）

注册表练习：》》》

<body class="body" background="https://tenfei04.cfp.cn/creative/vcg/800/new/VCG211297495624.jpg" >
    <h2 class="font" align="center">注册送月饼</h2>
    <hr/>
    <form method="get" action="https://www.baidu.com" >
        <table align="center" style="  height: 400px;font-size: 20px;font-weight: bold;align-content: center;" >
            <tr>
                <td><label for="name">姓名：</label></td>
                <td><input id="name" type="text" autofocus></td>
            </tr>
            <tr>
                <td><label for="password">密码：</label></td>
                <td><input id="password" type="password" maxlength="6" required></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>男<input type="radio" name="sex" value="男" checked>
                女<input type="radio" name="sex" value="女"></td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td> JAVA语言<input type="checkbox" name="hobby" value="java">
                    C++语言<input type="checkbox" name="hobby" value="c++">
                    Python语言<input type="checkbox" name="hobby" value="python">
                </td>
            </tr>
            <tr>
                <td>学习图片：</td>
                <td><input type="file" name="photo" value="选择图片"/></td>
            </tr>

            <tr>
                <td>选择地区：</td>
                <td>
                    <select>
                        <option selected id="1">上海</option>
                        <option id="2">北京</option>
                        <option id="3">安徽</option>
                        <option id="4">南京</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    详细地址：
                </td>
                <td>
                    <input type="text"/>
                </td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><textarea style="width: 200px;resize: none;" required="请输入哟~~">
                </textarea></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td><input type="submit" value="提交"/></td>
            </tr>
        </table>
    </form>
    
</body>
</html>

在这里插入图片描述

🍗

每日小新

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端之HTML

????前端HTML：超文本标记语言1、标签单标签：自闭合标签双标签：闭合标签行标签：（行内元素宽度由内容支撑，可与其他元素同行，只能嵌套行内元素）块标签：（独占一行，前后换行，可以设置上下内外边距，可以嵌套其他元素和块元素行内元素）2、常用标签head :头标签给浏览器看body :身体标签给用户看meta charset =“utf-8” :解码格式：浏览器使用哪种编码格式解析html页面中的内容编码保持一致title :标题标签（网页收藏的名字）
复制链接

扫一扫