HTML\CSS\JS基础

最新推荐文章于 2024-03-05 19:50:41 发布
最新推荐文章于 2024-03-05 19:50:41 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： 学习笔记 笔记 文章标签： javascript html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48039668/article/details/108043529
版权

CS架构与BS架构

CS

Client/Server；客户端/服务器模式，在以前网络传输效率比较底下的时候，是CS架构软件盛行的时代，在这个时代，所有的软件使用都离不开客户端程序，即需要先从远程下载一个客户端安装包，在本地安装，然后才能够正常使用，对本机硬件要求较高。

优点：

  1. 响应速度快
  2. 对网络速度要求低
  3. 用户体验好
  4. 使用稳定

缺点：

  1. 对客户端硬件要求高
  2. 维护成本高，更新需要所有客户端都更新
  3. 跨平台性不好，针对不同的操作系统需要不同的客户端
BS

Browser/Server;浏览器/服务器模式，在当今高速网络带宽的时代，很多以往需要下载客户端才能正常使用的软件，只需要打开浏览器，绝大部分都可以实现；BS架构的软件项目对硬件要求不高，只需要使用的操作系统支持浏览器即可。

优点：

  1. 对硬件要求低
  2. 维护成本低，更新时只需要服务端更新即可
  3. 用户体验好
  4. 跨平台性好，只需要操作系统支持浏览器即可

缺点:

  1. 对网络要求高
  2. 用户体验不如客户端程序

HTML

HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；HTML不是一门程序设计语言，严格来说HTML是一种标记型语言，学习成本很低。

开发工具

文本编辑器
  • 记事本
  • Editplus
  • Notpad++
  • Atom
  • SublimeText
  • VSCode
集成开发环境
  • Webstome
  • HBuiler/HubilderX(Eclipse)
第一个HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    Hello Html!!!
</body>
</html>

具体解释:

<!--
    文档类型定义(DTD)：用于规范当前HTML文档类型，html5的定义为:<!DOCTYPE html>
    用于规范当前html文档中能够编写一些标签，属性，以及标签之间的组织结构
 -->
<!DOCTYPE html>
<!--
    html文档根标签，任何一个HTML文件中有且只能有一对根标签
-->
<html lang="en">
    <!--
        head标签用于定义网页头部的配置信息：
        编码设置
        缓存配置
        网页描述
        收藏图标
        移动端viewport配置
        网页标题
        样式资源引用
        脚本文件引用
    -->
    <head>
        <!--配置页面编码-->
        <meta charset="UTF-8">
        <!--配置网页标题-->
        <title>这是我的第一个HTML页面</title>
    </head>
    <!--body标签用于定义网页中显示的主体内容-->
    <body>
        Hello Html!!!
    </body>
</html>
基础语法
元素(Element)

​ 元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。

例如:

<p>这是一个段落</p>

<div>
    <a href="http://www.softeem.com">软帝信息</a>
    <a href="http://www.ruandy.com">软帝联合</a>
    <a href="http://www.guaqivip.com">呱奇编程</a>
</div>
标签(Tag)

​ 标签（tag）指示元素的起始与结束。所有标签都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。 一般说来，有两种标签——首标签（start tag）（如<html>）和尾标签（end tag）（如</html>）。它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。

例如:

<div></div>
<a></a>

单标签
<br/>
<img/>
属性(Attibute)

一般为开始标签之内，用于设置当前标签的相关的属性配置，通常由属性名以及属性值构成，属性值使用双引号包裹，一个标签中可以包含多个属性，具体如下:

<a href="" target="_blank" title="百度一下，你就知道">百度</a>

以上属性有:

  • href
  • target
  • title
HTML实体

HTML中除了元素，标签和属性等元素构成外，另外还包含一些特殊的字符串(html实体)，比如：需要在页面上显示一个版权符号可以使用 &copy;

显示结果	描述	实体名称	实体编号
 		空格		&nbsp;	&#160;
<		小于号		&lt;	&#60;
>		大于号		&gt;	&#62;
&		和号		&amp;	&#38;
"		引号		&quot;	&#34;
'		撇号 		&apos; (IE不支持)	&#39;
￠		分（cent）	&cent;	&#162;
£		镑（pound）	&pound;	&#163;
¥		元（yen）	&yen;	&#165;
€		欧元（euro）	&euro;	&#8364;
§		小节		&sect;	&#167;
©		版权（copyright）	&copy;	&#169;
®		注册商标	&reg;	&#174;
™		商标		&trade;	&#8482;
×		乘号		&times;	&#215;
÷		除号		&divide;	&#247;
色彩使用

HTML中支持以下颜色表示方式

  • 16进制颜色编码
  • 颜色英文单词
  • rgb值
<!--一级标题:尽量保证一个html文档中只出现一个一级标题，便于SEO-->
<h1>文本和格式标签</h1>
<h2>文本标签</h2>
<!--emmet快捷html代码生成命令-->
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

<!--段落标签-->
<p>床前明月光</p>
<p>疑似地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

<!--行内文本标签 bold  italic underline delete-->
<b>这是一段加粗的文本</b>
<i>这是一段斜体文本</i>
<u>下划线文本</u>
<del>删除线文本</del>
<b>x<sup>2</sup></b>
<b>x<sub>2</sub></b>
<!--语义化文本标签-->
<cite>引用方式的文本</cite>
<em>强调的文本</em>
<strong>加重的文本，一般为黑体加粗体</strong>
<!--已过时-->
<font size="20px" face="华文行楷" color="#0f0">过时的文本</font>
<h2>格式标签</h2>
<!--水平分割线-->
<hr/>
<p>hello<br/>world</p>
<p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长的文本，<nobr>这段内容不能换行</nobr></p>

<blockquote>
    HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；HTML不是一门程序设计语言，严格来说HTML是一种标记型语言，学习成本很低。
</blockquote>

<pre>
        这是预处理文本，一般用于显示代码块
    </pre>

行级元素和块级元素

html中的标签根据显示效果的不同划分为行级元素和块级元素

行级元素（inline）

行级元素也称之行内元素，即元素中的内容所占据的宽度由内容决定，后面跟随的行内元素会紧邻之前的元素显示。常见的行级元素：

  • b
  • i
  • strong
  • img
  • a
  • span
块级元素（block）

块级元素不论元素中内容的宽度是多少，始终会占满整个一行

  • h1~h6
  • p
  • div

列表标签

在网页中经常会看到一些列表信息，比如菜单，数据列表等，html中的列表主要包含以下几类:

  1. 无序列表
  2. 有序列表
  3. 普通列表

具体使用如下:

<h1>列表标签</h1>
<h2>无序列表</h2>
<hr>
<ul>
    <li>菜单项01</li>
    <li>菜单项02</li>
    <li>菜单项03</li>
    <li>菜单项04</li>
    <li>菜单项05</li>
</ul>

<h2>有序列表</h2>
<hr>
<ol>
    <li>注意事项</li>
    <li>注意事项</li>
    <li>注意事项</li>
    <li>注意事项</li>
    <li>注意事项</li>
</ol>

<h2>普通列表</h2>
<hr>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd>层叠样式表</dd>
    <dt>JS</dt>
    <dd>JavaScript</dd>
</dl>

<!--h2{列表嵌套}+hr+ul>li{菜单项$$}*3>ul>li{子菜单}*2-->
<h2>列表嵌套</h2>
<hr>
<ul>
    <li>菜单项01
        <ul>
            <li>子菜单1-1</li>
            <li>子菜单1-2</li>
        </ul>
    </li>
    <li>菜单项02
        <ul>
            <li>子菜单2-1
                <ul>
                    <li>子菜单2-1-1</li>
                    <li>子菜单2-1-2</li>
                    <li>子菜单2-1-3</li>
                </ul>
            </li>
            <li>子菜单2-2</li>
        </ul>
    </li>
    <li>菜单项03
        <ul>
            <li>子菜单3-1</li>
            <li>子菜单3-2</li>
        </ul>
    </li>
</ul>

超链接和iframe标签

html中使用a标签作为一个超链接标签，通过对a标签中的href设置关联的超文本资源可以实现页面跳转，另外也可以通过设置锚链接的方式实现页面内跳转，如:

<a href="http://www.softeem.com">软帝信息</a>
<a href="page1.html" target="_blank">首页</a>
<a href="javascript:alert('你真乖，叫你点就点')">点我试试</a>
<a href="mailto:softeem123@softeem.com">发送邮件</a>
<a href="tel:110">拨打电话</a>
<a href="#">当前页面</a>
<a href="#part1">第一章 无名小子初出茅庐</a>

a标签中包含以下几个常见的属性：

  • href：用于设置需要跳转的目标位置，包含如下一些内容

    • 网页地址
    • 当前项目其他资源文件路径
    • 邮箱地址(如 href=“mailto:softeem@softeem.com”)
    • 设置js的函数(如 href=“javascript:void(0)”)
    • 设置为“#”

  • target：用于设置跳转的方式以及目标

    • 四个固定的取值

      • _blank:在新的标签页打开链接
      • _self(默认):在本页中打开链接
      • _parent:在父页面中打开链接（一般常见于框架页面内部）
      • _top:在顶层页面中打开链接(一般用于多层框架嵌套内部)

    • 自定义name

      <ul>
<li><a href="page1.html" target="content">page1.html</a></li>
<li><a href="page2.html" target="content">page2.html</a></li>
<li><a href="page3.html" target="content">page3.html</a></li>
</ul>
<!--内嵌框架-->
<iframe src="" name="content" frameborder="1" width="100%" height="400px"></iframe>

iframe

iframe是一个内嵌框架标签，在html5之前浏览器支持一系列的框架标签（frameset/frame/iframe），用于将网页结构划分为几个子页面构成；但是由于框架标签对于SEO不太友好，因此html5之后除了iframe之外，其余的全部被淘汰.

对于iframe的使用：

<iframe src="" name="content"></iframe>

注意事项：

html5之后i’frame中的所有属性仅剩src受到支持，其余全部标记过时：

  • framespacing
  • frameborder
  • scrolling
  • width
  • height

锚链接

a标签除了可以实现其他页面跳转之外，还能有支持页面内设置锚点，进行页面内跳转，具体使用方式如下:

<a href="#part1">第一章 无名小子初出茅庐</a><br>
<a href="#part2">第二章 少年小有所成</a><br>
<a href="#part3">第三章 大侠大杀四方</a><br>
<a href="#part4">第四章 英雄迟暮，魂归故里</a><br>

<h2><a id="part1">第一章 无名小子初出茅庐</a></h2>
...
<h2><a id="part2">第二章 。。。</a></h2>
...
<h2><a id="part3">第三章 。。。</a></h2>
...
<h2><a id="part4">第四章 。。。</a></h2>
...

媒体标签

HTML5中新增了很多媒体标签，同时也将4.01中部分标签标记为过时，比如bgsound，embed ,html5中主要支持的媒体标签包含以下：

  • img 图片标签
  • audio 音频标签
  • video 视频标签
  • canvas 画布元素
  • svg 矢量图
<!--
img标签:图片标签
src:设置图片的地址(绝对路径或者相对路径)
alt:当图片不能正常显示时，使用alt中的文本代替
width/height:分别设置图片宽高，建议只用一个属性，可以保持图片的横纵比
-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="imgs/girl.jpg" alt="这是一幅美女图片" width="200px">


<!--
audio标签:音频标签
src:设置音乐资源路径
autoplay:设置自动播放音乐文件
controls:设置显示播放控制界面
loop:音乐播放的循环次数（-1无限循环）
-->
<audio src="mp3/周杰伦-晴天.mp3" autoplay controls loop="-1"></audio>

<!--
audio标签：视频标签
src:设置视频资源地址
支持的文件格式包含: ogg，webm，mp4
-->
<video autoplay controls width="1000px">
    <source src="video/4KHD_VP9TestFootage.webm">
    <source src="video/ogg-19M.ogg">
    <source src="video/test.mp4">
    <source src="video/Psy%20-%20Gentleman.mkv">
</video>

表格标签<table>

<table></table>定义表格
包含属性：border,bgcolor,bordercolor,width,height,cellspacing,cellpadding

<caption></caption>(非必须)定义表格名称，必须跟在table标签之后

表格通常分为三部分：thead、tbody、tfoot；这个三个字标签为非必须，不写时默认全部位于tbody中，具体如下：
<thead></thead>(非必须) 表示表格头部区域
<tbody></tbody>(非必须) 表示表格内容区域
<tfoot></tfoot>(非必须) 表示表格底部区域

<tr></tr>定义行，属性：align,valign,bgcolor…
<td></td>定义列，属性：width,height,align,valign.colspan,rowspan,…
<th></th>定义表头

表单标签<form>

<!--
表单标签form,常用属性:
action：设置表单提交的之后的跳转目标
method：设置表单的提交方式（get(默认)/post）
enctype：设置表单数据提交的编码模式
    application/x-www-form-urlencoded  默认值，以表单数据提交，数组使用名值对(name=admin&pwd=XXX)结构提交
    multipart/form-data 将数据以二进制流提交，一般用于文件上传

input元素常用属性：
    type:设置输入组件的类型(text,password,hidden,radio,checkbox,file,date,number,tel,email,button,reset,submit)
    name:为表单控件设置控件名，一般后台获取数据时根据控件名获取，控件名可以重复
    value:用于设置控件的默认值
    readonly:设置控件为只读，无法修改
    disabled:将控件失效，失效之后，后台无法根据控件名获取该控件的值

    placeholder:主要针对于输入框组件，用于显示水印提示信息，当用户输入内容之后自动隐藏
-->
<form action="login.html" method="post" enctype="application/x-www-form-urlencoded">
    <!--username=softeem-->
    文本框:<input type="text" name="username" placeholder="请输入账号" value="softeem"><br>
    密码框:<input type="password" name="password"><br>
    单选框:<input type="radio" name="sex" value="男" checked>男 
     	  <input type="radio" name="sex" value="女">女 <br>
    复选框:<input type="checkbox" name="lang" value="java" checked>Java
    <input type="checkbox" name="lang" value="c++">C++
    <input type="checkbox" name="lang" value="javascript">JavaScript <br>
    文件框:<input type="file" name="myfile" multiple> <br>
    列表框:<select name="city" multiple>
    <option value="wh">武汉</option>
    <option value="bj" selected>北京</option>
    <option value="sh">上海</option>
    <option value="hz">杭州</option>
    <option value="sz">深圳</option>
    </select><br>
    文本域:<textarea name="mark" cols="50" rows="5" placeholder="请输入个性签名" style="resize: none;"></textarea><br>

    <fieldset>
        <legend>用户登录</legend>
        <input type="text" name="uname"><br>
        <input type="password" name="pwd"><br>
        <button>登录</button>
    </fieldset>
    
    <!--普通按钮默认点击无效果，需要通过javascript进行事件绑定-->
    <!--<input type="button" value="普通按钮">-->
    <button type="button">普通按钮</button>
    <!--重置表单中已填写的内容-->
    <!--<input type="reset" value="重置按钮">-->
    <button type="reset">重置按钮</button>
    <!--提交按钮，点击之后可以将表单中填写的数据提交到form标签中action属性所指定的位置(一般为后台映射地址)-->
    <!--<input type="submit" value="提交表单">-->
    <button type="submit">提交表单</button>
</form>

</body>
</html>

html5新增表单标签

<form action="login.html" id="myform"></form>

<!--日期选择控件-->
日期选择:<input type="date" name="birth" form="myform" value="2020-01-01"><br>
<!--时间选择-->
时间选择:<input type="time" name="time" form="myform"><br>
<!--周数选择-->
周数选择:<input type="week" name="week"  form="myform"><br>
<!--日期时间选择控件-->
日期时间:<input type="datetime-local" name="now"  form="myform"><br>
<!--月份选择-->
月份选择:<input type="month" name="month"  form="myform"><br>

数值输入:<input type="number" name="total" min="100" max="10000"  form="myform"><br>
范围选择:<input type="range" name="progress" min="0" max="100"  form="myform"><br>
颜色选择:<input type="color" name="bgcolor"  form="myform" onchange="document.body.bgColor=this.value"><br>

<!--在移动设备中根据type弹出不同的虚拟键盘-->
邮箱输入:<input type="email" name="mail"  form="myform"><br>
网址输入:<input type="url" name="mail"  form="myform"><br>
联系电话:<input type="tel" name="tel"  form="myform"><br>

下拉列表:<input type="text" name="car" list="cars" form="myform">
<datalist id="cars">
    <option>宝马</option>
    <option>奔驰</option>
    <option>奥迪</option>
</datalist><br>

<button type="submit" form="myform">提交数据</button>

span&div

​ 在html页面进行布局设置时，span和div是两个最为常见的分区标签，不同于其他标签的作用，其他标签大多数都具备特定样式效果，比如按钮button，链接a，图片img；span和div不具备任何的固有样式，仅仅用作于对页面结构进行分区，所以在进行网页布局是span和div是首选。

span

<span>是一个行内元素，元素在界面中遵循正常的文档流（从左往右，从上往下），根据内部包裹的内容占据内容固有的宽度，后续的元素紧邻span追加显示。

div

<div>是一个典型的块元素，在使用时无论内部包含多少内容，始终独占一行，从上往下布局。可以通过css代码结合div元素对网页结构进行布局以及美化。

table布局和div+css布局区别？

HTML5语义化标签

由于DIV标签可以表示任何的布局，因此指代性比较弱，不够语义化，在SEO方面存在一些收录的困难问题，因此html5中新增了一些更为语义化的div标签，这些标签名称不叫div，但是作用等同于div，主要包含以下:

  • <article> 标记定义一篇文章
  • <header> 标记定义一个页面或一个区域的头部
  • <nav> 标记定义导航链接
  • <section> 标记定义一个区域
  • <aside> 标记定义页面内容部分的侧边栏
  • <hgroup> 标记定义文件中一个区块的相关信息
  • <figure> 标记定义一组媒体内容以及它们的标题
  • <figcaption> 标签定义 figure 元素的标题。
  • <footer> 标记定义一个页面或一个区域的底部
  • <dialog> 标记定义一个对话框(会话框)类似微信

css

CSS入门

概述

​ 通过对html的学习，我们可以了解到，html主要用作于对于网页的结构进行设计，类似于一个人的骨骼，或者一栋大楼内部结构；只有html不能够形成一个完整的网页；因此，我们需要对网页结构进行美化以及样式的改造才能成为一个漂亮的网页；

​ 要实现以上需求，我们就必须要学习CSS相关技术；

​ CSS(Cascading Style Sheets),层叠样式表，CSS通过一系列的选择器对html页面中的元素选中，并结合css提供的一些属性对这些元素进行改造以及美化。

​ html是人体骨骼，css就是人体肉体外貌

基本单位

尺寸

常见尺寸单位：

  • 绝对单位
    • px：像素，表示屏幕上的一个点
    • pt：磅，1/72英寸
    • cm：厘米
    • mm：毫米
  • 相对单位
    • %：百分比（以父元素为参考）
    • em：用于设置字体，以浏览器默认字体16px为例，1em=16px
    • rem：相对em，以设备默认字体为参考，一般用于移动设备
    • vw：viewport width ，视口宽度，以当前设备为参考从0-100之间
    • vh：viewport height，视口高度，以当前设备为参考从0-100之间
颜色

常见的颜色表示方式：

  • 颜色名称
    • 比如:red、green、blue、lightblue，gray，black，white，pink
  • 16进制颜色编码
    • 比如 #000000（#000）、#FFFFFF（#FFF）、#FF0000(#f00)、#00FF00(#0f0)、#0000FF(#00f)
  • rgb值：红绿蓝三原色的0~255之间
    • 比如 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
  • rgba值：红绿蓝以及透明度
    • 比如:rgba(0,0,0,.5) 半透明黑色

基础语法

css语法：
选择器{
    属性名:属性值;
    ...
}

入门案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            margin-top:10px;
            width:400px;
            height:80px;
            background-color:#0f0;
            font-size:1.5em;
            color:#fff;
            text-align:center;
            line-height: 80px;
        }
    </style>
</head>
<body>

    <div>hello css!!!</div>
    <div>hello css!!!</div>

</body>
样式引入html中的方式包含三种

  1. 内联样式

    <div style="font-size:20px;color:red;">Hello CSS</div>

  2. 内部样式表

    参考以上入门案例

  3. 外部样式文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入外部样式文件 -->
    <link rel="stylesheet" href="css/page7.css">
</head>
<body>
    <div>hello css!!!</div>
    <div>hello css!!!</div>
</body>
</html>

    关于外部样式文件的引入，除了可以通过link标签实现外，还可以使用css样式提供的@import指令导入样式文件。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="css/page7.css">-->
<style>
   @import url("css/page7.css");
</style>
</head>
<body>
<div>hello css!!!</div>
<div>hello css!!!</div>
</body>
</html>

CSS选择器

如果需要对html中的元素进行样式设置，第一步需要先获取到该元素，即选中；因此，需要通过特定的选择器来实现选中，CSS中包含以下常见的选择器:

通配选择（*）

通配选择器“*”，用于选中所有的元素进行统一的样式控制，一般用于页面中标签的默认样式重置，比如:body的内外边距，浏览器自带的外边线效果，样式标签的边框

<style>
    /*重置样式*/
    *{
        margin:0;
        padding:0;
        outline: none;
    }
</style>

id选择器（#id）

id在一个html文件中一般用于表示元素的唯一性，因此，html中一般不建议出现多个重复的id，css提供了id选择器用于选中指定id的元素，语法：

#id{

}

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配选择</title>
    <style>
        /*选中id为menu2的元素*/
        #menu2{
            background: darkgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
    </ul>
    <ul id="menu2">
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
    </ul>
</body>
</html>

类选择器（.class）

类选择器是根据html元素的class属性，进行元素的选择，在html中可以为多个元素设置相同的class,因此class可以对需要进行样式统一控制的元素分类

语法:

标签名.类名称{
    属性名:属性值;
    ...
}

多数时候类选择器可以省略标签名，直接使用".类名"的方式选中元素

.m{
 color:red;
}

元素选择器（标签选择器）

直接根据标签名称，选中符合名称的标签

/*选中所有的div标签*/
div{
    margin-top:10px; /*与顶部元素外边距*/
    width:400px;
    height:80px;
    background-color:#0f0;
    font-size:1.5em;
    color:#fff;
    text-align:center;
    line-height: 80px; /*行高*/
}

子选择器（P > S ）

选中指定元素下的一级子元素，比如：

<div class="main">
    <p>
        这是一个段落
    <div>
        <p>这是一个子段落</p>
    </div>
    </p>
</div>

对以上html中，使用如下选择器

.main>p{
	color:#00ff00;
}

被选中的元素为：

<p>
    这是一个段落
    <div>
        <p>这是一个子段落</p>
    </div>
</p>

层级选择器（E E2）

在子选择器中只能选中指定元素第一级子元素，如果需要选中某个元素下的所有子元素（不论级别），则可以使用层级选择器实现:

.main p{
    color:#0f0;
}

以上代码将会选中所有class名称为“main”下面的所有p元素

分组选择器（s1,s2,s3…）

分组选择器允许将多个选择器组合选择，使用方式如下:

h4,
h5,
h6,
input{
    color:#00f;
}

伪类和伪对象选择器

/*选中a元素设置默认效果*/
a{
    color:#000;
    text-decoration: none;
}
/*伪类选择器，当鼠标悬停到元素上时以下样式生效*/
a:hover{
    color:#f00;
    text-decoration: underline;
}
/*当a元素被激活时（被点击），使用以下样式*/
a:active{
    color:#0f0;
    text-decoration: none;
}
/*选中class为menu下的最后一个li*/
.menu li:last-child{
    border:1px solid #000;
}
/*选中class为menu下的第一个li*/
.menu li:first-child{
    border:1px solid #f00;
}
/*选中class为menu下的第指定顺序个li*/
.menu li:nth-child(3){
    border:1px solid #ff0;
}
/*选中所有class为menu2下面的所有的除了最后一个之外的li*/
.menu2 li:not(:last-child){
    border-bottom:1px solid #000;
}

table{
    width: 800px;
    /*设置选中元素边框样式：线条宽度，线条的样式(实线，虚线，双线，点线),线条颜色*/
    border:1px solid #0000ff;
    /*合并相邻的边框*/
    border-collapse:collapse;
}
td{
    border:1px solid #0000ff;
}
/*选中所有偶数行*/
table tr:nth-child(2n){
    background-color: rgba(0,0,0,0.1);
}
/*去除所有ul和ol元素自带的列表样式*/
ul,
ol{
    list-style:none;
}
.contact li{
    height: 50px;
    line-height: 50px;
}
/*伪对象选择器*/
.contact li::before{
    content:url("imgs/1.gif");
}
.contact li::after{
    content:url("imgs/12.gif");
}

选择器优先级

选择器的优先级遵循以下规律:

!important>ID选择器>属性选择器>类选择器>子选择=层级选择>元素选择>通配选择

CSS常用属性

尺寸

属性版本继承性描述
widthCSS1无检索或设置对象的宽度
min-widthCSS2无设置或检索对象的最小宽度
max-widthCSS2无设置或检索对象的最大宽度
heightCSS1无检索或设置对象的高度
min-heightCSS2无设置或检索对象的最小高度
max-heightCSS2无设置或检索对象的最大高度

边框与背景

背景
属性版本继承性描述
backgroundCSS1/3无复合属性。设置或检索对象的背景特性
background-colorCSS1无设置或检索对象的背景颜色
background-imageCSS1/3无设置或检索对象的背景图像
background-repeatCSS1/3无设置或检索对象的背景图像如何铺排填充
background-attachmentCSS1/3无设置或检索对象的背景图像是随对象内容滚动还是固定的
background-positionCSS1/3无设置或检索对象的背景图像位置
边框
属性版本继承性描述
borderCSS1无复合属性。设置对象边框的特性
border-widthCSS1无设置或检索对象边框宽度
border-styleCSS1无设置或检索对象边框样式
border-colorCSS1无设置或检索对象边框颜色
border-topCSS1无复合属性。设置对象顶边的特性
border-top-widthCSS1无设置或检索对象顶边宽度
border-top-styleCSS1无设置或检索对象顶边样式
border-top-colorCSS1无设置或检索对象顶边颜色
border-rightCSS1无复合属性。设置对象右边的特性
border-right-widthCSS1无设置或检索对象右边宽度
border-right-styleCSS1无设置或检索对象右边样式
border-right-colorCSS1无设置或检索对象右边颜色
border-bottomCSS1无复合属性。设置对象底边的特性
border-bottom-widthCSS1无设置或检索对象底边宽度
border-bottom-styleCSS1无设置或检索对象底边样式
border-bottom-colorCSS1无设置或检索对象底边颜色
border-leftCSS1无复合属性。置对象左边的特性
border-left-widthCSS1无设置或检索对象左边宽度
border-left-styleCSS1无设置或检索对象左边样式
border-left-colorCSS1无设置或检索对象左边颜色
border-radiusCSS3无设置或检索对象使用圆角边框
border-top-left-radiusCSS3无设置或检索对象左上角圆角边框
border-top-right-radiusCSS3无设置或检索对象右上角圆角边框
border-bottom-right-radiusCSS3无设置或检索对象右下角圆角边框
border-bottom-left-radiusCSS3无设置或检索对象左下角圆角边框
box-shadowCSS3无设置或检索对象阴影

字体与文本

字体
属性版本继承性描述
fontCSS1/2有复合属性。设置或检索对象中的文本特性
font-styleCSS1有设置或检索对象中的字体样式
font-variantCSS1有设置或检索对象中的文本是否为小型的大写字母
font-weightCSS1有设置或检索对象中的文本字体的粗细
font-sizeCSS1有设置或检索对象中的字体尺寸
font-familyCSS1有设置或检索用于对象中文本的字体名称序列
文本
属性版本继承性描述
text-transformCSS1/3有检索或设置对象中的文本的大小写
white-spaceCSS1有设置或检索对象内空格的处理方式
tab-sizeCSS3有检索或设置对象中的制表符的长度
word-wrapCSS3有设置或检索当内容超过指定容器的边界时是否断行
word-breakCSS3有设置或检索对象内文本的字内换行行为
text-alignCSS1/3有设置或检索对象中内容的水平对齐方式
text-align-lastCSS3有设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
text-justifyCSS3有设置或检索对象内调整文本使用的对齐方式
word-spacingCSS1/3有检索或设置对象中的单词之间的最小，最大和最佳间隙
letter-spacingCSS1/3有检索或设置对象中的字符之间的最小，最大和最佳间隙
text-indentCSS1/3有检索或设置对象中的文本的缩进
vertical-alignCSS1/2无设置或检索对象内容的垂直对其方式
line-heightCSS1有检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

列表与表格

列表
属性版本继承性描述
list-styleCSS1有复合属性。设置列表项目相关内容
list-style-imageCSS1有设置或检索作为对象的列表项标记的图像
list-style-positionCSS1有设置或检索作为对象的列表项标记如何根据文本排列
list-style-typeCSS1/2有设置或检索对象的列表项所使用的预设标记
表格
属性版本继承性描述
table-layoutCSS2无设置或检索表格的布局算法
border-collapseCSS2有设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacingCSS2有设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
caption-sideCSS2有设置或检索表格的caption对象是在表格的那一边
empty-cellsCSS2有设置或检索当表格的单元格无内容时，是否显示该单元格的边框

定位

属性版本继承性描述
positionCSS2/3无检索对象的定位方式
z-indexCSS2无检索或设置对象的层叠顺序
topCSS2无检索或设置对象参照相对物顶边界向下偏移位置。
rightCSS2无检索或设置对象参照相对物右边界向左偏移位置。
bottomCSS2无检索或设置对象参照相对物底边界向上偏移位置。
leftCSS2无检索或设置对象参照相对物左边界向右偏移位置。
定位

html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放，文档流即从左往右（行内元素），从上往下（块元素）；但是在css中可以通过定位的方式将元素脱离正常的文档流，css中定位主要包含以下属性：

  • position：设置定位方式
    • relative:相对定位(不会导致元素脱离文档流)
    • absolute:绝对定位(元素会脱离正常的文档流)
    • fiexd:固定定位(脱离正常文档流)
    • static(默认值)
  • z-index：层叠顺序（必须配合绝对定位一起使用，数值越大越置顶）
  • left：元素与父容器左边的距离
  • right：元素与父容器右边的距离
  • top：元素与父容器上边的距离
  • bottom：元素与父容器下边的距离

盒子模型

Margin和Padding

Margin：用于设置元素和相邻元素之间的外边距，margin可以设置1~4个属性值:

  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

  • 如果只提供一个，将用于全部的四边。

  • 如果提供两个，第一个用于上、下，第二个用于左、右。

  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

    属性版本继承性描述
    marginCSS1无检索或设置对象四边的外延边距
    margin-topCSS1无检索或设置对象顶边的外延边距
    margin-rightCSS1无检索或设置对象右边的外延边距
    margin-bottomCSS1无检索或设置对象底边的外延边距
    margin-leftCSS1无检索或设置对象左边的外延边距

padding：用于设置元素和内部内容之间的距离，padding取值也是1~4个值:

  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

  • 如果只提供一个，将用于全部的四边。

  • 如果提供两个，第一个用于上、下，第二个用于左、右。

  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

    属性版本继承性简介
    paddingCSS1无检索或设置对象四边的内部边距
    padding-topCSS1无检索或设置对象顶边的内部边距
    padding-rightCSS1无检索或设置对象右边的内部边距
    padding-bottomCSS1无检索或设置对象底边的内部边距
    padding-leftCSS1无检索或设置对象左边的内部边距

盒子模型

在HTML中任何的一元素都可以看作为一个盒子,默认情况下一个元素的实际大小由设置的宽高，边框宽度，内边距三个值之和组成：
在这里插入图片描述

即当设置了内边距（padding）和border之后，会导致定义的宽高被撑开，从而实际大小和样式中定义的大小不一致：

实际大小=边框宽度+内边距+height

如果需要将边框宽度和内边距包含在定义的宽高之内，可以使用box-sizing:border-box实现

例如针对以下的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #app{
            margin: 20px;
            padding:50px;
            height: 200px;
            width: 400px;
            background: #0f0;
            border:5px solid #f00;
        }
        .container{
            height: 30px;
        }
    </style>
</head>
<body>

    <div id="app">
        <div class="container">
            快使用双截棍 哼哼哈嘿！！！
        </div>
    </div>

</body>

默认显示的效果:

在这里插入图片描述

最后实际大小为：510X310

在为div#app设置box-sizing:border-box之后，计算规则如下:

在这里插入图片描述

最后的实际大小为:400X200

  • content-box：

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

  • border-box：

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

DIV+CSS布局案例

​ 在网页设计的发展史中关于布局包含很多解决方案，早期可以使用table实现页面布局，但是由于table布局结构性太强，不能够灵活控制，不支持响应式，因此table布局已经淘汰；目前比较流行的布局方式是基于DIV+CSS实现，其子集也包含目前互联网中流行响应式布局，弹性布局，移动端布局等。

JS

JS入门

概述

JavaScript（简称JS），由netscape(网景)公司研发的一门客户端(浏览器)脚本语句，所谓脚本语言即需要嵌入到其他语言中运行，而无法独立运行(在NodeJS中可以直接运行javascript);javascript是基于事件驱动的，是一门弱类型语言，javascript不需要编译，是一门直译型语言。

强类型语言:在进行变量声明时，需要显示的指定该变量的数据类型，并且运行期间无法修改数据类型。

int i = 10;
String s = "hello";

i = "world"; // 编译错误

弱类型语言:在使用变量前不需要声明任何的数据类型，并且在运行期间可以任意的改变其数据类型(动态语句)

i = 10;
var s = "hello";

i = "world";//正常执行

直译型语言:程序编写完成之后无需编译，直接解释，常见的直译型语言包含：Javascript,python

JS和java的区别

  • java是强类型，js是弱类型
  • java是编译解释型，js是直译型
  • Java是服务端语言，js是客户端语言
  • java可以独立运行，js需要嵌入到客户端浏览器运行

Javascript组成部分

  • ECMAScript
  • DOM
  • BOM

JS基础语法

Javascript入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个javascript程序</title>
</head>
<body>

    <h1 id="h1">这是第一个JavaScript页面</h1>

    <!--推荐js编写位置，在body结束标签前-->
    <script>
        window.alert("hellojs1")
        document.write("hellojs2")
        console.log("hellojs3")
    </script>
</body>
</html>

JavaScript在html页面中使用三种方式

  1. 直接在html中使用script标签包裹js代码,参考以上入门案例

  2. 通过链接外部js文件引入

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个javascript程序</title>
</head>
<body>

    <h1 id="h1">这是第一个JavaScript页面</h1>

  	<!-- 引入外部样式文件-->
    <script src="js/javascript01.js"></script>
</body>
</html>

    src和href区别:

    <link rel="stylesheets" href="css/index.css">
<script src="js/index.js"></script>

    href:表示的是关联外部的样式文件，在外部样式文件中对其他资源的访问参考位置是样式文件所在位置

    src：替换当前位置的代码为js文件中的代码，在js中访问其他资源的时候参考的目标是当前的html文件

  3. 直接在内部html中使用js脚本

     <button onclick="alert('对不起，看不到片')">点我看片</button>

数据类型

JavaScript包含的数据类型主要分为以下：

  • number(整数类型和浮点类型)
  • string(字符和字符串类型)
  • boolean(布尔类型)
  • undefined(未定义)
  • object(对象类型)
    • null
    • 数组
    • 普通对象

分支与循环

javascript中的基础语法和其他语言(java,c,c++)非常类似，也包含分支和循环等特点

分支语句

javascript支持的分支包含:

  1. if…else…

  2. switch

    // javascript中的注释分为单行(//)和多行(/* */)
// 条件分支
// 判断一个变量age是否大于等于18
var age = '18';
if(age >= 18){
    alert('小帅哥，来玩啊啊!')
}else{
    alert('小屁孩一边去。。。')
}

if(age){
    alert(age);
}else{
    alert('age=0');
}

/*
            == 和 === 区别
              == 用于判断运算符左右的的值是否一致，忽略数据类型
              === 恒等于，除了判断运算数是否一致外还判断类型是否一致
        *
        * */
if(age === 18){
    alert('是一个正确的年龄:'+age);
}else{
    alert('不是一个正确的年龄');
}

//判断一个月份是属于哪一个季节
var m = 10;
switch(m){
    case 3:
    case 4:
    case 5:
        console.log('Spring...');
        break;
    case 6:
    case 7:
    case 8:
        console.log('Summer...');
        break;
    case 9:
    case 10:
    case 11:
        console.log('Autumn...');
        break;
    case 1:
    case 2:
    case 12:
        console.log('Winter...');
        break;
}

// 实现一个购物结算功能，根据购买的数量进行相应折扣，输出最终的价格
// 商品单价 ￥10
// 购买1件 不打折
// 购买2~5件 打9折
// 购买5件以上 打8折
//单价
var price = 10;
//购买数
var count = 5;
if(count == 1){
    console.log(price);
}else if(count>=2 && count < 5){
    console.log(count * price * 0.9);
}else{
    console.log(count * price * 0.8);
}

循环语句

js的循环分为四种类型:

  1. for循环
  2. while循环
  3. do…while循环
  4. for…in循环
for(var i = 1;i <= 10; i++){
    console.log(i);
}

console.log("====================")
    
var i = 1;
while(i <= 10){
    console.log(i);
    i++;
}

console.log("------------------");

do {
    i--;
    console.log(i);
}while(i>0);

console.log("+++++++++++++++++++++")
    
var arr = [10,20,30,40,50];
//for...in...
for(var a in arr){
    console.log(arr[a]);
}

函数与事件

函数

javascript中的函数类似于Java中方法

函数的声明语法：

function 函数名(参数名列表){
    //执行体
}

事件

javascript是一门基于事件驱动的语言，当html页面中的元素触发一些动作时，可以执行相关的js代码，常见的事件主要包含:

  1. 文档事件
  2. 鼠标事件
  3. 键盘事件

事件流

事件绑定与移除

事件绑定

javascript为元素绑定事件分为两种方式：

  1. 直接在html中为元素设置相关的事件属性

  2. 在javascript中通过dom对象获取目标元素之后为其设置事件属性

    //绑定指定名称的函数
div.onclick=fun;
function fun(){
    //执行体
}

//绑定匿名函数
div.onclick=function(){
 	//执行体   
}

  3. 在js中获取dom之后使用addEventListener函数绑定指定事件

    div.addEventListener('click',fun)
function fun(){
    //执行体
}

div.addEventListener('click',function(){
    //执行体
})
解除绑定

对于使用addEventListener绑定的事件，可以通过removeEventLitener解除

 div.removeEventListener('click',fun);

对于解除绑定，只能解除指定元素中被绑定的回调函数对象（函数指针必须是一致的），对一下方式无法解绑：

div.removeEventListener('click',function(){

})

事件冒泡与事件捕获

javascript中的事件流具备传播的能力，当为多个嵌套关系的元素绑定事件时，会导致在触发某一层元素事件时会导致其他元素的事件同时执行；js将这个事件传播特性分为两种方式：

  • 事件冒泡

    事件冒泡，即对内层元素触发事件时，逐级向外传播，导致外层事件逐步执行

在这里插入图片描述

<div id="box1">外层盒子
    <div id="box2">中间盒子
        <div id="box3">内层盒子</div>
    </div>
</div>

<script>
//分别获取三个div元素并绑定点击事件
document.getElementById('box1').addEventListener('click',function(){
        console.log('外层盒子')
    })
document.getElementById('box2').addEventListener('click',function(){
        console.log('中间盒子')
    })
document.getElementById('box3').addEventListener('click',function(){
        console.log('内层盒子')
    })
</script>

  • 事件捕获

    事件捕获即由外向内逐层捕获

在这里插入图片描述

需要将事件冒泡机制切换为事件捕获，只需要在为元素通过addEventListener绑定事件时传入第三参数即可:

e.addEventListene(事件名,回调函数,是否捕获)
//例如:
document.getElementById('box1').addEventListener('click',function(){
        console.log('外层盒子')
    },true)
阻止事件传播

由于事件流的传播性，实际开发中这些特性会影响程序的事件处理，因此需要对事件传播进行阻止，如果需要阻止事件的传播，只需要在指定元素的触发时调用事件对象提供的stopPropergation()函数或者设置cancelBubble为true即可:

document.getElementById('box1').addEventListener('click',function(e){
    console.log('外层盒子')
    //阻止事件传播
    // e.stopPropagation();
    // e.cancelBubble = true;
})
document.getElementById('box2').addEventListener('click',function(e){
    console.log('中间盒子')
    e.cancelBubble = true;
})
document.getElementById('box3').addEventListener('click',function(e){
    console.log('内层盒子')
    e.stopPropagation();
})

对象

自定义对象

  • JSON对象

    json即单个的js对象，对象中的数据是创建时即指定的，例如:

    var hero={
    x:100,
    y:150,
    nickname:'德玛西亚',
    name:'盖伦',
    defence:150,
    hp:980,
    attack:function(){
        alert('正义审判')
    },
    death:function(){
        alert('1分钟后重生')
    }
}

  • 构造函数

    //构造函数(构建对象的模板)
function Hero(x,y,nickname,hp){
    this.x = x;
    this.y = y;
    this.nickname=nickname;
    this.hp = hp;
    this.attack=function(){
        alert('正义审判');
    }
    this.move=function(){
        console.log('移动到:'+x+','+y);
    }
    this.death=function(){
        console.log('1分钟后又是一条好汉')
    }
}
//创建对象
var h = new Hero(100,120,'寒冰射手',450);
console.log(h);
案例
function Calendar(year,month,show,hero){
    this.year = year;
    this.month = month;
    this.hero = hero;
    this.getTotalDayFrom1900=function(){
        var totalDay = 0;
        //计算从1900年到当前年份月份前一个月的总天数
        for(var i = 1900;i < this.year;i++){
            totalDay += this.isLeapYear(i) ? 366 : 365;
        }
        for(var i = 1;i < this.month;i++){
            totalDay += this.getDayOfMonth(this.year,i);
        }
        return totalDay;
    };
    this.isLeapYear=function(year){
        //判断指定年份是否是闰年
        if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)){
            return true;
        }
        return false;
    };
    this.getDayOfMonth=function(year,month){
        //计算指定年份月份的总天数
        switch(month){
            case 4:
            case 6:
            case 9:
            case 11:
                return 30;
            case 2:
                return this.isLeapYear(year) ? 29 : 28;
            default:
                return 31;
        }
        return 0;
    };
    this.show = show;
    // this.show=function(){
    //     this.isLeapYear(2020);
    //     this.getDayOfMonth(2020,8);
    //     this.getTotalDayFrom1900();
    //     //显示日历
    //     console.log('显示日历')
    // }
}
var c = new Calendar(2020,8);

// c.show();

// new Calendar(2020,8,function(){
//     this.getTotalDayFrom1900();
//     var ly = this.isLeapYear(this.year)
//     console.log('是否闰年:'+ly);
//     console.log('执行完操作，显示日历')
// },{name:'XX',age:18}).show();
�ArKi
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML CSS and Javascript 基础学习代码.zip
12-30
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and ...
javaScript取顶层对象（HTML）
11-15 846
function _getRootFrameElement(){ var b = window.self; while(true){ if(window.top==b){return $(b);} b=b.parent; } }
HTML+CSS+JS 详细知识（新手向）
Scyth1的博客
07-09 7638
HTML 超文本标记语言标记语言：通过标签的不同来代表不同的意思mac地址是物化在电脑网盘硬件上的地址IP里其实包含着mac的一部分超文本：有文字之外的一些类似连接、按钮等的东西JavaScript让html有交互能力绝对路径< img src="地址" alt="描述 ">加不加span都没什么变化 的作用是形成独立空间style 通用属性形成独立空间 让元素换行在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行 ( )。超链接 文字描述部分可以跳转到其他html文件target属性用于设置打
一篇文章搞懂前端HTML,CSS,JS（代码应用）
最新发布
qq_48818933的博客
03-05 822
HTML 文件由一系列的元素（elements）组成，这些元素通过标签（tags）来定义。HTML标签都是预定义好的。盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个。三大特点：HTML标签不区分大小写，HTML标签属性单双引号都可以，HTML语法松散。这是盒子中用于显示实际内容的区域，比如文本、图像等。矩形区域内，通过盒子的视角更方便的进行页面布局。内边距是内容区域和边框之间的空白区域，通过。边框的样式、颜色和宽度都可以设置。外边距是盒子外部的空白区域，通过。
HTML+CSS+JS总结
m0_51480841的博客
08-28 7550
HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 二.HTML标签 标签的概念 一个html文件是由标签和元素组成的html的标签还有很多包括input,from等等html标签对照表CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。1:继承性:父元素的样
HTML、CSS、JS简单介绍以及HTML的标签
m0_63163990的博客
04-08 4005
目录 一、HTML--结构 1.了解网页 2.了解HTML 二、CSS--样式 1、CSS-网页的美容师 2、CSS 的规则 3、CSS的格式 三、JavaScript--行为 1.JavaScript的历史 2.JavaScript的简介 3.JavaScript的作用 4.JavaScript的组成 四、HTML的标签 1.文档 2.主体 3.头部 4.标题 5.HTML标题 6.段落 7.段内换行 8.预留格式 9.段内分组 10.水平线 11.文档分区
HTML,CSS,JavaScript基础学习.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
html,css,js基础学习.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
前端 js html css 基础教程
08-17
本书为电子版,任何终端下阅读, 欢迎大家下载阅读~~~~~~
学习css，html，js，vue基础.zip
01-05
学习css，html，js，vue基础学习css，html，js，vue基础 学习css，html，js，vue基础学习css，html，js，vue基础 学习css，html，js，vue基础学习css，html，js，vue基础 学习css，html，js，vue基础学习css，html，...
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 4465
Html+Css+JavaScript基础知识点
html，css和js
weixin_44985964的博客
11-30 3972
访问某个变量。没有被定义创建函数/函数声明/函数定义function 函数名（形参列表）{函数体return 返回值；}
HTML、CSS、JavaScript之间的联系区别
热门推荐
stonebecomesrock的博客
08-30 1万+
HTML+CSS+JS是做网页前台设计的标准套装 一、HTML：（HyperText Markup Language）超文本标记语言 结构（structure）——决定网页的结构及内容，即“显示哪些内容” 可以把HTML说成是静态代码。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 二、CSS（Cascading Style Sheet）层叠样式表单 表现（p...
理论知识总结（js和css）
fdbyd的博客
01-28 2055
目录 css 选择器 一：类选择器 class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。 <p class="first done"></p> .first{ background-color: red; } 二：ID选择器 #(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。 <p id="polite"></p> #polite{ ..
【狂神说】HTML+CSS+JS
weixin_56580267的博客
07-06 5738
html+css+js从小白到入门
web前端css+html+js
txy_200373的博客
07-07 1775
web: （WWW world wide web) 即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。能够通过浏览器访问的网站。web开发模式：混合开发、前后端分离（主要）HTML: 超文本标记语言超文本：超越了文本的限制，比普通文本更强大。
HTML+CSS+JS详解
IDE
02-13 1万+
Web概述 Web三要素：浏览器，服务器，HTTP协议 **HTML工作原理：**HTML是部署在服务器上的文本文件，根据HTTP协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个HTML，浏览器解释执行HTML，从而显示内容 什么是HTML？ HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScr
HTML+CSS+JavaScript入门教程（万字）
lsl5713的博客
11-24 8981
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML（HyperText Markup Language）:超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如：使用展示图片W3C标准：网页主要由三部分组成HTMLCSSJavaScipt。
html css javascript
03-17
HTML，CSS 和 JavaScript 是三种用于网页开发的语言。HTML（超文本标记语言）用来描述网页的结构和内容；CSS（层叠样式表）用来控制网页的样式和布局；JavaScript 是一种脚本语言，用来控制网页的行为和交互。这三种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值