Document

HTML+CSS+JavaScript

2023-08-11
dfer
412
html css javascript CSDN

HTML

注释方法

使用鼠标划中要注释的代码，【Ctrl + ?】即可，批量注释，每行单独注释
使用鼠标划中要注释的代码，【Ctrl + Shift + ?】即可，批量注释，一个注释符号

实验：函数和按钮的演示

给 p 标记【段落标记】，设置样式 style 样式
修改文件：myhtml.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的站点</title>
    <!--script 用于定义脚本，function 定义函数-->
    <script>
        function clickme() {
            alert('How are you?');
        }
    </script>
    <!--style 用于设置样式；这里给p标签设置样式【居中】,在body中被调用-->
    <style>
        p {
            text-align: center;
        }
    </style>
</head>

<body>
<!--p 用于定义段落-->
   <!--button 用于定义按钮；onclick 只点击时，会自动切换到函数clickme()-->
<p>
    <button onclick="clickme()">点我</button>
</p>
<!--注释内容，【Ctrl + Shift + ?】-->
<!--Hello World! <br> Hello China!
<p>Hello Tedu</p>-->
</body>
</html>

文本标记特殊字符

说明

文本是网页上的重要组成部分

直接书写的文本会用浏览器默认的样式显示
包含在标记中的文本则会被显示为标记所拥有的样式

空格折叠

多个空格或制表符压缩成单个空格，即只显示一个空格

特殊字符（如空格），需要进行转义（使用字符实体）

表示大于号和小于号的标记：< >
表示空格的标记： 
表示版权符号的标记：©
块分区元素 div 演示，div 分区元素，没有上下边距；p 段落元素，存在上下边距，可以使用 f12 测试
行内分区元素 span 【标记元素】演示，加上样式 style 显示

行内元素与块级元素

块级元素会默认独占一行

<p>, <div>, <h1> ... <h6>

行内元素不会自动换行，换行需要使用<br>：

<span>，<b>，<i>，<u>

图像和链接

URL

URL(Uniform Resource Locator)：统一资源定位器，用来标识网络中的任务资源

文件、图片、音视频文件、段落，或其他超文本

即路径，指从当前位置到目标位置所经过的路线，Web 页面常用 URL 形式

绝对路径
相对路径

图像元素 img

实验：img 图像元素的使用

创建 myhtml4.html 文件，用于测试 img 标签，可以直接填写图片 url 地址

链接元素

实验：链接元素< a >标签，锚点的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--div 块分区元素，没有上下边距-->
<div>
    <a href="http://linux.tedu.cn" target="_blank">
        <img src="https://q-extra.paixin.com/admin/1614329206846.png" height="200px">
    </a>
    <!-- a标记，href 指定链接地址，target 指点开链接后会重开一个页面-->
    <a href="https://www.sogou.com" target="_blank">搜狗搜索</a>
    <a href="#id1">跳转到页面最后一张图</a> <br>    <!--a链接元素，跟据href的值，跳转到对应的位
置-->
    <hr>
    ......
    <img id="id1" src="static/imgs/panda.jpg" height="100px">
    <!--a标签,链接元素，href为'#'，表示返回顶部，省略'#',则代表刷新页面-->
    <a href="#">返回顶部</a>
    <hr>
    ......
    <img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/07/ChMkJ1bKyzyId5UuAA_lBDJqW4AAALIoAFDyQsAD-Uc808.jpg" height="200px">
</div>
</body>

表格和列表

表格

表格的常用属性

< table > 元素
- width:设置表格宽度
- height:设置表格高度
- align：设置表格对齐方式（left | center | right）
- border: 设置表格边框宽度
- cellpadding：设置内边距
- cellspacing: 设置外边距
- bgcolor:设置表格背景颜色
< tr > 元素
- align，设置水平对齐方式 (left | center | right)
- valign，设置垂直对齐方式 (top | middle | bottom)
< td >元素
align, 设置水平对齐方式 (left | center | right)
valign, 设置垂直对齐方式 (top | middle | bottom)
width, 设置宽度
height, 设置高度
colspan, 设置单元格跨列
rowspan, 设置单元格跨行

创建表格

快速创建表格：table>tr*3>td*4+tab键

tr:行 td:列

不规则表格

设置单元格 < td > 的跨行或者跨列属性

跨列：colspan
- 水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
跨行：rowspan
- 垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格

实验：不规则单元格的创建

<!--定义表格式：border 为表边框1px(像素); width 表宽度200px(像素)-->
<table border="1px" width="200px">
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>     <!--向下合并2个单元格-->
        <td colspan="2">1</td>     <!--向右合并2个单元格-->
    </tr>
    <!--删除第三列的一行，用于向下合并单元格-->
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

列表

列表的作用：列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列
所有的列表都由列表类型和列表项组成
列表类型：有序列表 < ol > 和无序列表 < ul >
列表项：< li >，用于指示具体的列表内容

实验：创建列表

表单的定义

新建 myhtml8.html 文件，创建一个4个列表项的有序列表

  <!--li 代表列表项元素；li*4 指创建4个列表项元素-->
    ol>li*4  <!--使用【tab】键会自动创建列表项元素-->
<!--ol 代表有序列表，四个有序列表元素-->
<ol type="I" start="3" >
    <li>Linux</li>
    <li>Shell</li>
    <li>Database</li>
    <li>Python</li>
</ol>


<!--ul 代表无序列表，type="circle" 标记为空心小圆圈-->
<ul type="circle">    <!--可改为type="square" 标记为实体小正方形-->
    <li>Linux</li>
    <li>Shell</li>
    <li>Database</li>
    <li>Python</li>
</ul>

form 表单及其控件

表单的作用

表单用于显示、收集信息，并提交信息到服务器
表单有两个基本部分
- 实现数据交互的可见的界面元素，比如文本框或按钮
- 提交后的表单处理
界面元素
- 使用 < form > 元素创建表单
- 在 < form > 元素中添加其他表单可以包含的控件元素
表单元素< form >：使用成对的 < form > < /form >标记
主要属性
- action: 定义表单被提交时发生的动作，通常包含服务方脚本的URL
- method：指出表单数据提交的方式，取值为 get 或者 post
- enctype：表单数据进行编码的方式
- name：表单名称

表单控件

表单可以包含很多不同类型的表单控件
表单控件元素是包含在表单元素中具有可视化外观的 HTML 元素，用于访问者输入信息
表单控件元素有
- input 元素：文本输入控件、按钮、单选和复选按钮、选项框、文件选择框和隐藏控件等
- textarea 元素
- select 和 option 元素
- 其他元素

input元素

< input > 元素用于收集用户信息
该元素是一个单标记，语法为：< input />
主要属性
- type：根据不同 type 属性值，可以创建各种类型的输入字段，如文本框、复选框等
- value：控件的数据
- name：控件的名称
- disabled：禁用控件

文本框与密码框

文本框：< input type="text" />
密码框：< input type="password" />
主要属性
- name：名称
- value: 由访问者自由输入的任何文本
- maxlength：限制输入的字符数
- readonlly：设置文本控件只读

单选框和复选框

单选框：< input type="radio"/>
复选框：< input type="checkbox"/>
主要属性
- name：设置名称，并用于分组，一组单选框或者复选框的名称必须相同
- value：文本，当提交 form 时，如果选中此单选按钮，那么 value 就被发送到服务器
- checked：设置默认被选中

按钮

提交按钮：< input type="submit"/>
- 传送表单数据给服务器端或其它程序处理
重置按钮：< input type="reset" />
- 清空表单的内容并把所有表单控件设置为最初的默认值
普通按钮：< input type="button" />
- 用于执行客户端脚本
主要属性
- name：名称
- value：按钮的标题文本

<form action="">
    <!--input 用于收集用户信息；type="text" 指输入的文本框；placeholder="用户名" 指文本框中的背景提示-->
    uname: <input type="text" placeholder="用户名">
    <!--input 用于收集用户信息；type="password" 指输入的密码文本框；placeholder="密码" 指文本框中的背景提示-->
    upass: <input type="password" placeholder="密码">
    <!--type="submit" 登录按钮；value="登 陆" 为按钮上的文字-->
    <input type="submit" value="登 陆">
    <input type="reset">  <!--type="reset" 重置按钮-->
</form>
<hr>


<form action="https://images.baidu.com/search/index" target="_blank">
    <!--input 用于收集用户信息；type="hidden" 隐藏输入框不会显示；-->
    <!--name 隐藏输入的键为tn; 隐藏输入的值为baiduimage -->
    <input type="hidden" name="tn" value="baiduimage">
    <input type="text" name="word">
    <input type="submit" value="百度搜图">
</form>

<hr>

<!--form 表单，action 指动作，即点击按钮后，要执行的操作;target="_blank" 指搜索时会重新打开一个窗口 -->
<form action="https://www.sogou.com/web" target="_blank">
    <!--input 用于收集用户信息；type="text" 指输入的文本框；name="query" 搜索查询的关键字-->
    <input type="text" name="query">
    <!--input 用于收集用户信息；type="submit" 指提交按钮；value="搜狗搜索" 指提交按钮上的提示文字-->
    <input type="submit" value="搜狗搜索">

</form>

借用搜狗和百度的搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>duniang</title>
</head>
<body>

<form action="https://image.baidu.com/search/index">
              <input type="hidden" name="tn" value="baiduimage">  
<!--               借用百度需要隐藏name的值               -->
    搜索图片： <input type="text" name="word"><br>
              <input type="submit" value="度娘搜图">
</form>


<p>==========================================</p>

<form action="https://www.sogou.com/web">
    搜索图片： <input type="text" name="query"><br>
              <input type="submit" value="sogou搜图">
</form>
<!--      https://www.sogou.com/web?query=1234&_asf=www.sogou.com&....  -->
</body>
</html>

JavaScript

介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等

组成

核心语法 -ECMAScript 规范了JS的基本语法
浏览器对象模型 -BOM
- Browser Object Model，提供了一系列操作浏览器的方法
文档对象模型 -DOM
- Document Object Model ，提供了一系列操作的文档的方法

使用方式

元素绑定事件

事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。

常用事件：onclick (单击事件)

<!--实现点击按钮在控制台输出-->

<button οnclick="console.log('Hello World');">点击</button>

文档内嵌

使用<script type="text/javascript"></script>标签书写 JS 代码

语法

<script>

  alert("网页警告框");

</script>

注意：<script></script>标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果。通常放在head中的js会在点击等事件发生时调用，而放在body中的js往往是为了生成一定的内容。

外部链接

创建外部的JS文件 XX.js，在HTML文档中使用<script src=""></script>引入
```
<script src="index.js"></script>
```
注意：<script src=""></script>既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一

实验：JS 使用方式

JS的变量与常量

数据类型

创建一个新的 HTML 文件 myhtml13.html 文件

基础语法

语法规范
JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成。分号可以作为语句结束的标志,也可以省略
JS严格区分大小写
作用 : 用于存储程序运行过程中可动态修改的数据
语法 : 使用关键var声明,自定义变量名
- 注释语法
  - 单行注释使用 //
  - 多行注释使用 /* */
- 命名规范 :
  - 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
  - 禁止与关键字冲突(var const function if else for while do break case switch return class)
  - 变量名严格区分大小写
  - 变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"
- 使用注意 :
  - 变量如果省略var关键字,并且未赋值,直接访问会报错
  - 变量使用var关键字声明但未赋值,变量初始值为undefined
  - 变量省略var关键字声明,已被赋值,大多可正常使用，某些浏览器严格条件下会报错，不建议这么做
基本数据类型
number 数值类型
- 整数
- 小数
string 字符串类型字符串 : 由一个或多个字符组成,使用""或''表示,每一位字符都有对应的Unicode编码
boolean 布尔类型只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0
undefined (程序返回的值) 特殊值,变量声明未赋值时显示undefined
null 空类型 (主动使用的) 解除对象引用时使用null,表示对象为空
数组类型
对象

数据类型转换

不同类型的数据参与运算时,需要转换类型

强制类型转换

转换字符串类型方法 : toString() 返回转换后的字符串

转换number类型

方法： Number(param)
- 参数为要进行数据类型转换的变量或值，返回转换后的结果:
  - 如果转换成功,返回number值
  - 如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN
隐式类型转换（自动转换）
- 当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
- 转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串

上一篇： web前端之CSS操

下一篇：前端JavaScri