前端知识体系

KBkongbaiKB

于 2024-07-13 14:47:28 发布

阅读量187

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/KBkongbaiKB/article/details/140399869

版权

前端体系：*HTML 、*CSS 、*Javascrip

*HTML

作用：构造前端的结构

标签

标签本身

标签内容

标签属性

标签分类：供显示的标签、供收集用户信息的标签

<style></style> ：编写样式

<div></div> ：标签

<div stytle="color:red;font-size:30px">1234</div>

<style>

        /* css语法选择器{

                 样式属性1 ：样式值1;

样式属性2 ：样式值2; ...;...;

        }

         .box {

color: blue; font-size: 30px;

         }

</style>

：建立一个 .css的文件

<link rel="stylesheet" href="">

    <!--框架元素 iframe 
        src ：设置嵌套窗口打开的页面资源路径
        frameborder ：设置嵌套窗口边框是否显示
        width ：设置嵌套窗口宽度
        height ：设置嵌套窗口高度
        name ：设置嵌套窗口名称
            <iframe src="text2.html" frameborder="0" width="100%" height="500px" name="gs"></iframe>
    -->

    <!--媒体元素 audio video
        audio
            相关属性 ：
                scr ：设置音频资源路径
                controls ：音频播放器是否显示
                autoplay ：设置音频是否自动播放
                loop ：设置音频是否循环播放 

        video
            相关属性 ：
                scr ：设置视频资源路径
                controls ：视频播放器是否显示
                autoplay ：设置视频是否自动播放
                loop ：设置视频是否循环播放
                width ：设置视频宽度
                height ：设置视频高度  
    -->
    <!-- <br>
    <a href="first.html" target="gs">1</a>
    <br>
    <iframe src="text2.html" width="100%" height="500px" name="gs"></iframe> -->


    <!--表单元素 form
        
        表单控件元素 input
            type ：设置控件类型
                text ：单行文本框
                password ：密码框
                radio ：单选框
                checkbox ：复选框
                file ：文件上传器
                submit ：提交按钮
                button ：普通按钮
                reset ：重置按钮
                color ：颜色拾取器
                number ：数字输入框
                range ：滑块
                data ：日期控件
                time ：时间控件
                datetime-local ：本地日期时间控件
                month ：月控件
                week ：周控件
            name ：设置控件名称
            value ：设置控件的值
            min ：数字最小值 当类型是number range
            max ：数字最大值 当类型是number range
            step ：数字步长值 当类型是number range
            checked ：是否默认选中 当类型是radio checkbox
            disabled ：是否可用
            redonly ：是否只读
            placeholder ：设置输入框提示信息
            autofocus ：设置表单控件为焦点状态(可以键入的状态)

        表单控件元素 下拉框 列表框 select
            name ：设置控件名称
            size ：设置显示下拉项的个数
            multiple ：设置是否多选

            子元素 ：
                option ：下拉选项
                    value ：下拉值
                    selected ：默认下拉选项中

                optgroup ：下拉项分组
                    label ：下拉项组名

        表单控件元素 多行文本框 textarea
            cols ：设置多行文本框的宽度
            rows ：设置多行文本框的高度

    -->
    例子：
    <body>
    <form action="">
        <fieldset>
            请填入父亲的信息：<br> 姓名:
            <input type="text" name="account"><br>性别：男：<input type="radio" disabled name="sex" id="" value="1">女：<input type="radio" name="sex" id="" value="1">
            <br>年龄：
            <input type="number" name="" id="" min="0" max="100">
            <br>生日：
            <input type="data" name="" id="">
            <br>出生日期：
            <input type="datetime-local" name="" id="">
            <br>文化程度：
            <select name="subject" id="" multiple>
                <optgroup label="文化水平">
                    <option value="0">小学</option>
                    <option value="1">初中</option>
                    <option value="2">高中</option>
                    <option value="3">大学</option>
                </optgroup>
            </select>
            <br><input type="submit" value="确认提交">
        </fieldset>
        <fieldset>
            请填入母亲的信息：<br> 姓名:
            <input type="text" name="account"><br>性别：男：<input type="radio" disabled name="sex" id="" value="0">女：<input type="radio" name="sex" id="" value="1">
            <br>年龄：
            <input type="number" name="" id="" min="0" max="100">
            <br>生日：
            <input type="data" name="" id="">
            <br>出生日期：
            <input type="datetime-local" name="" id="">
            <br> 选择身份证复印件：
            <input type="file" name="" id="" value="">
            <br>文化程度：
            <select name="subject" id="" multiple>
                <optgroup label="文化水平">
                    <option value="0">小学</option>
                    <option value="1">初中</option>
                    <option value="2">高中</option>
                    <option value="3">大学</option>
                </optgroup>
            </select>
            <br><input type="submit" value="确认提交"><input type="reset">
        </fieldset>
        <legend aria-valuetext="xxx"></legend>

        密码：
        <input type="password" name="password" value="232"><br>性别：男：<input type="radio" disabled name="sex" id="" value="0">女：<input type="radio" name="sex" id="" value="1">
        <input type="file" name="" id="" value=""><br>颜色:
        <input type="color" name="" id=""><br>年龄：
        <input type="number" name="" id="" min="0" max="10" value="5" step="5"><br>年龄：<input type="range" name="" id="" min="" max="10" value="10"><br>生日：
        <input type="data" name="" id=""><br>时间：
        <input type="time" name="" id=""><br>日期时间：
        <input type="datetime-local" name="" id=""><br>月份：
        <input type="month" name="" id=""><br>周：
        <input type="week" name="" id=""><br>学科：
        <select name="subject" id="" multiple>
                <optgroup label="文科">
                    <option value="0">语文</option>
                    <option value="1">数学</option>
                    <option value="2">化学</option>
                </optgroup>
                <optgroup label="理科">
                    <option value="0">语文</option>
                    <option value="1">数学</option>
                    <option value="2">化学</option>
                </optgroup>
            </select> <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
</body>
    <!--表格元素 table
            相关属性 ：
                border ：表格边框
                cellpadding ：设置单元格内填充
                cellspacing ：设置单元格间空隙
                width ：设置表格宽度，默认是内容撑起来的宽度
                align ：设置表格本身对齐方式
            子元素 ： 

                caption:表格标题

                col ：代表虚拟列
                    相关属性 ：
                        span ：设置合并的列数
                tr ：代表行
                    相关属性 ：
                        align ：设置行中每个单元格中内容的对齐方式
                    子元素 ：
                        td ：代表单元格
                        相关属性 ：
                            width ：设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度
                            align ：单元格中内容的对齐方式
                            rowspan ：设置单元格合并的行数
                            colspan ：设置单元格合并的列数
                        th ：代表标题单元格(与普通单元格的区别 ：居中，加粗)
                        相关属性 ：
                            width ：设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度
                            align ：单元格中内容的对齐方式
                            rowspan:设置单元格合并的行数
                            colspan:设置单元格合并的列数

    vscode常见的快捷键
            1. ！：代表生成html元素名称
            2. html元素 ：直接书写html元素名称
            3. {} ：书写html元素内容，更多时候是配合2、4快捷键使用
            4. * ：批量生成相同元素
            5. > ：生成html的下一级子元素
            6. + ：批量生成不相同元素
            7. .class属性值 ：添加class属性值，连续.可以同时添加多个class属性值
            8. #id属性值 ：添加id属性值
            9. () ：代表快捷键组合
*/

/* 基本元素、标签、盒子 */
/*基本标签 ：
    <h1>qcby</h1>
    <h2>qcby</h2>
    <h3>qcby</h3>
    <h4>qcby</h4>
    <h5>qcby</h5>
    <h6>qcby</h6>
    <hr> ：作一条水平线
    <span>qcby</span> ：让元素横着布局，没有任何效果，单纯给内容一个框架，方便添加自己想要的效果
    <div>qcby</div> ：让元素竖着布局，没有任何效果，单纯给内容一个框架，方便添加自己想要的效果
*/

 /*a标签 超链接
     href ：指定页面资源路径，网洛资源，本地资源
         <a href="http://www.baidu.com">跳转到百度</a>
     target ：设置页面打开的方式 _self(默认，本窗口)，_blank(新窗口)，_top(顶级窗口)，_parent(父级窗口)，自定义窗口
         <a href="http://www.baidu.com" target="_self">跳转到百度</a>
     a标签  锚点
         name ：设置锚点名称
             <a name="top">顶部</a>
             <a herf="#top">跳转到顶部</a>
 */
 
 <!--  列表相关的元素
            1.无序列表 ul
                子元素 li
                    <ul><li>qcby</li></ul>
            2.有序列表 ol
                相关属性：
                    start ：表示起始值
                        <ol start="4"><li>qcby</li></ol>
                    type ：次序的类型
                        <ol start="4" type="I"><li>qcby</li></ol>
                子元素 li
                    <ol><li>qcby</li></ol>
            3.描述列表 dl
                子元素 dt dd
-->

<!--图片元素 img
        src ：设置图片资源路径
        alt ：设置图片不能正常加载时的文学说明
        width ：设置图片的宽度
        height ：设置图片的高    
            <img src="6.jpg" alt="风景" width="100" height="40">
        
        注意 ：1.使用图片要注意图片默认是以原始尺寸显示的，如果想设置图片尺寸，切记图片变形使用，单方向设置图片尺寸，未设置图片尺寸的方向会自动等比例变化
               2.如果就想按照开发者设置的尺寸不变形的显示图片，就需要借助css object-fit:cover
-->

KBkongbaiKB

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端知识体系

样式属性2 ：样式值2;前端体系：*HTML 、*CSS 、*Javascrip。样式属性1 ：样式值1;--外部样式 --> ：建立一个 .css的文件。标签分类：供显示的标签、供收集用户信息的标签。<style></style> ：编写样式。/* css语法选择器{<div></div> ：标签。--行内样式 -->--内部样式 -->作用：构造前端的结构。
复制链接

扫一扫