html基础知识整理

最新推荐文章于 2025-05-31 16:51:52 发布
人倦不知归处
最新推荐文章于 2025-05-31 16:51:52 发布
阅读量179
点赞数
本文链接：https://blog.youkuaiyun.com/weixin_46258854/article/details/105285532
版权
本文是对HTML基础知识的系统整理，涵盖了HTML的基本结构、标签使用、属性理解以及常见元素的解释，帮助初学者快速入门网页开发。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
html基础知识整理

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义浏览器标题</title
</head>
<body>

1.常用标签

html注释
<!--注释 -->

<h1>一级标题共6级</h1>

<div>输入标签可以按tab提示完成出入也可以输入尖括号</div>

<p>段落标签</p>

换行演示
文本换行符：br
<br/>
换行演示

空格：&nbsp;
大于：&gt;
小于：&lt;
水平线：hr
<hr/>

<a href="//www.baidu.com">在本窗口访问</a>
<a href="//www.baidu.com" target="_blank">新开窗口访问</a>
<img src="图片地址"alt="加载失败显示">



2.table 表格 border 边框 width宽度 tr行 th表头 td 普通列
<table border="1px"width="300px">
    <tr>
        <th>biaotou</th>
        <th>biaotou</th>
    </tr>
    <tr>
        <td>putonglie</td>
        <td>putonglie</td>
    </tr>
</table>



3.文字列表
<ul>
    <li>无序前点</li>
</ul>
<ol>
    <li>有序前数</li>
</ol>

<div>无意义标签1 占用整行</div>
<span>无意义标签2 占用内元素长度</span>



4.form表单
action提交地址 后台接口
submit把本表单所有的信息提交到接口
method请求方式get/post get url  post head
enctype="multipart/form-data" 上传提交文件添加本参数
<form action="#"method="post"enctype="multipart/form-data">
    1.用户名（文本框）：
    <input type="text" name="username">
    <hr/>
    2.密码（密码框）：
    <input type="password" name="password">
    <hr/>
    3.性别（单选框）：
    男<input type="radio" name="gender" value="0">
    女<input type="radio" name="gender" value="1">
    <hr/>
    4.爱好（复选框）：
    学web<input type="checkbox" name="hobby" value="web">
    学爬虫<input type="checkbox" name="hobby" value="spider">
    <hr/>
    5.上传touxiang文件（文件框）：
    <input type="file" name="img">
    <hr/>
    6.按钮button:
    <input type="button" value="空按钮">
    <hr/>
    7.提交按钮
    <input type="submit" value="提交按钮">
    <hr/>
    8.重置清空以上数据：
    <input type="reset" value="重置按钮">
    <hr/>
</form>
下拉框select和option
大文本textarea 评论框
cols列数
rows行数
<form action="#" method="post" enctype="multipart/form-data">
    <select name="year">
        <option value="2019">2019</option>
        <option value="2018">2018</option>
    </select>
    <br/>
    <textarea name="comment" cols="30" rows="10"></textarea>
    <input type="submit" value="提交按钮">

</form>



5.css层叠样式表静态修饰网页
    <div style="background-color: aqua">内嵌式</div>
    <title>内部式演示</title>
    <style type="text/css">
        在内部写明css代码
    </style>
    外嵌式引入外部的css代码
    新建-newfile-xxx.css
    <link rel="stylesheet" type="text/css" href="输入外部css文件地址xxx.css">
    <div>输入标签可以按tab提示完成出入也可以输入尖括号</div>

    css的选择器
    标签选择器 例设置body标签颜色
    id选择器 标签可以无id如有必须唯一
    类选择器 每个标签中可以设置一个class 多个标签可所属与一个类 与id不同
    <style type="text/css">
        body{
            background-color: grey;
        }
        #div_id1{
            background-color: brown;
        }
        .div_class1{
            background-color: chartreuse;
        }
    </style>

    <div id="div_id1">内部式 id选择器演示</div>
    <div class="div_class1">class选择器演示</div>
    <div class="div_class1">class选择器演示</div>

css的常用样式
背景颜色backgroundcolor
背景图片backgroundimage:url
图片平铺backgroundrepeat:repeat水平垂直都平铺 repeat-x水平 repeat-y垂直 no-repeat不
字体及加粗
字大小：font-size:尺寸px;
字体加粗：font-weight:normal默认 bold加粗 lighter变细
标签边框
border:实心solid 空心dash，尺寸1px，颜色red；





6.web前端核心javascript直译脚本语言动态类 给网页增加动态功能 与java没有直接关系
javascript语法与DOM操作
javascript引入方式
内嵌
<title>script内嵌式演示</title>
<script type="text/javascript">
    //js代码
</script>
外部
<script type="text/javascript" src="和css类似"></script>

内容语句
注释 单行//  多行/*开始*/结束

变量var声明
数字 var numberObject=1;
字符串 var stringObject="1";或单引
布尔 var booleanObject=true;
空 var nullObject=null;
未定义 var undefinedObject=undefined;null不占内存undefined占
对象 var jsObject=Object;列表 json 函数

alert(对话框内容)；弹出对话框
<script type="text/javascript">
    alert('弹出对话框演示');
</script>

运算符+加-减*乘/除%取余数++叠加--叠减 i++是i=i+1

赋值运算符x=x  x+=2 x=x+2  x-=2 x=x-2 除叠加叠减与上对应

比较运算符 == 值等 ===类值都等  ！=不等  剩与py同

逻辑运算符&与 条件一条件二都验证后返回 &&短路与 条件一不满足就返回 |或||短路或  ！非

判断语句
if(条件){条件成立运行代码}；
if(条件){条件成立运行代码}else if(条件2){条件1不满足}；条件2不满足跳出判断
<script>
{#    //switch#}
{#    var a='2';#}
{#    switch (a){#}
{#        case'1'://a=字符串1#}
{#            alert('a=1');#}
{#            break;//跳出判断#}
{#        case'2'://a=字符串2#}
{#            alert('a=2');#}
{#            break;#}
{#        default://前两都不满足执行默认代码#}
{#            alert('default')#}
{#    };#}
{#    //for循环 变量 条件 下个循环变量变化#}
{#    for(var i=0;i<5;i++){#}
{#        alert(i);//满足条件执行#}
{#    };#}
{#    //while循环#}
{#    var a=1;#}
{#    while (a<5){#}
{#        alert(a);#}
{#        a++;#}
{#    };//break退出当前 continue从进入下次#}
{#    //do while循环 先执行后判断#}
{#    var a=1;#}
{#    do{#}
{#        alert('a');#}
{#        a++;#}
{#    }while(a<1);#}
{#    //函数方式1#}
{#    var func=function (x,y) {#}
{#        return x+y;#}
{#    };#}
{#    alert(func(10,20));#}
{#    //函数方式2#}
{#    function func(x,y){#}
{#        return x+y;#}
{#    };#}
{#    alert(func(10,20));#}
</script>

dom树
html下head标签和body标签是HTML的子标签 形成了一个dom树

根据id得到节点 用Js写入文本内容演示
<div id="div_id2"></div>
<script type="text/javascript">
    divElement=document.getElementsById("div_id2");
    divElement.innerHTML="通过js写入文本内容演示";
</script>



7.jQyery js代码与函数的封装 操作更简单 动态 动画
下载
<a href="https://jquery.com/">jQyery下载</a>
引入
<head>
    <script type="text/javascript" src="本目录jQuery地址">jQuery引入</script>
</head>
<head>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>

一般在路径下创建js文件夹放置在js文件夹中版本3.31
<a href="https://blog.csdn.net/sswqzx/article/details
/82834407?depth_1-utm_source=distribute.pc_relevant.none
-task&utm_source=distribute.pc_relevant.none-task">jQuery教程</a>


选择器
$("*")选所有 $("标签名")选标签 $("#id")选id $(".class")选类
jQuery本质是object js本质element
jQuery转js  jsObject=$jqueryObject[0];或 jsObject=$jqueryObject.get(0);
js转jquery  $jqueryObject=$(jsObject);
比js代码少

按钮案例演示
<input type="button" value="按钮" id="button_id">
<script type="text/javascript">
    //得到按钮对象
    $buttonElemnt=$('#button_id')
    //绑定点击事件
    $buttonElemnt.click(function () {
        alert('按钮被点击了');
    });
</script>


jquery事件
<a href="https://www.w3school.com.cn/jquery/jquery_events.asp">jquery事件</a>

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

显示和隐藏
show(speed,callback)速度，运行后执行
hide(speed,callback)速度，运行后执行
淡入fadeIn 淡出fadeOut 下滑动slideDown 上滑动slideUp
演示
<input type="button" value="隐藏" id="button_hide">
<input type="button" value="显示" id="button_show">
<ul id="ul_id">
    <li>python</li>
    <li>java</li>
</ul>

<script type="text/javascript">
    //get target
    $button_hide=$('#button_hide')
    $button_show=$('#button_show')
    //get ul target
    $ul=$('#ul_id')
    //hide
    $button_hide.click(function () {
        $ul.hide('slow');
    });
    //show
    $button_show.click(function () {
        $ul.show('slow')
    })
</script>



</body>
</html>