恶熊比比

前端基础html css js

html：框架
css：美化
jp：交互

文章目录

- HTML
- - 1.1 HTML快速入门
  - 1.2 常用的HTML标签
  - 1.3 第一个网页展示
  - 1.4 表单展示
- CSS
- - 1.CSS语法
  - - 1.1 基础案例展示
    - 1.2 CSS 快速入门
  - 2.CSS选择器
  - - 2.0 选择器类型及优缺点
    - 2.1 id选择器
    - 2.2 class选择器
    - 2.3 标签选择器
    - 2.4 属性选择器
    - 2.5 后代选择器
    - 2.6 子元素选择器
- JS
- - 1. JS介绍
  - - 1.1 JavaScript快速入门
  - 2. JS脚本书写位置
  - - 2.1 内联引入（Inline Script）
    - 2.2 JS外链式
  - 3.JavaScript基础语法
  - 4. JavaScript 对象
  - - 4.1 本地对象
    - 4.2 内置对象
    - 4.3 BOM对象
    - 4.4 DOM对象
  - 5.事件监听
  - - 5.1 事件概念
    - 5.2 事件绑定的方式
    - 5.3 事件监听
    - 5.4 表单验证
  - 6.正则表达式

HTML

HTML（Hypertext Markup Language）是用于创建网页结构的标记语言。它由一系列标签（tag）组成，这些标签描述了网页中的不同元素，如标题、段落、链接、图像等

1.1 HTML快速入门

步骤：

创建 HTML 文档：在文本编辑器中创建一个新文件，并将其保存为以 .html 为扩展名的文件，例如 index.html。

声明文档类型：在 HTML 文件的第一行添加文档类型声明，指示浏览器使用 HTML 的哪个版本解析文档。通常使用以下声明：
创建 HTML 结构：在《html> 标签中定义整个文档的开始和结束。

添加头部信息：使用《head> 标签定义文档的头部部分，其中包含关于文档的元信息和引用的外部资源；

创建页面内容：使用
使用 HTML 标签：在
预览网页：保存 HTML 文件，并在支持 HTML 的浏览器中打开它，以查看页面的呈现效果。

HTML基础框架


DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题title>
    <link rel="stylesheet" href="styles.css"> 
    <script src="script.js">script> 
head>
<body>
    <header>
        <h1>网页标题h1>
        <nav>
            <ul>
                <li><a href="#">导航链接1a>li>
                <li><a href="#">导航链接2a>li>
                <li><a href="#">导航链接3a>li>
            ul>
        nav>
    header>

    <main>
        <section>
            <h2>内容标题h2>
            <p>这是一段内容。p>
            <p>这是另一段内容。p>
        section>

        <section>
            <h2>另一个内容标题h2>
            <p>这是另一个内容段落。p>
        section>
    main>

    <footer>
        <p>版权信息p>
    footer>
body>
html>

1.2 常用的HTML标签

 1. 标题标签
 // 到 
：用于定义标题的级别，其中 
 是最高级别的标题，
 是最低级别的标题。

<h1>这是一个标题</h1>

2. 段落标签 
//：用于定义段落。

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

3. 链接标签 
//：用于创建链接，通过 href 属性指定链接的目标 URL。

<a href="https://www.example.com">这是一个链接</a>

4.图像标签 
//：用于插入图像，通过 src 属性指定图像的 URL，通过 alt 属性提供图像的替代文本。

<img src="image.jpg" alt="图像描述">

5.列表标签 
//
（无序列表）和 （有序列表）：用于创建无序和有序列表，通过  标签定义列表项。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
 
 6. 表格标签 
 //：用于创建表格，通过 、 和  标签定义表格的行、表头和单元格。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

7. 表单标签 
 //：用于创建表单，用于用户输入和提交数据。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="提交">
</form>

8. div标签
// ：用于创建一个容器，可以用于组织和样式化其他元素。
<div>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

9.span标签 
//：用于对文本进行行内样式化或标记。

<p>这是一段包含<span style="color: red;">红色</span>文本的段落。</p>
 
  1.3 第一个网页展示 
  DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这是我的滴滴滴一个网页title>
	head>
	<body>
		<h1>一号 标题h1>
		<p>一个段<br />落p>
		<p><b>另一个一个段落b>p>
		
		

		<a href="http://www.baidu.com">一个超链接（百度）a>
		
		
		<h2><i>二号标题i>h2>		
		<h3>三号标题h3>
		<h6><s>一共可以做到六号s>h6>
		
		
		<div id="001">
			大盒子独占一行
		div>
		<span>小盒子、一行可以放多个span>
		<span>另一个小盒子span>
	body>
html>

 
   
  1.4 表单展示 
   
   表单介绍： 
    
    表单就是在web网页上用于收集用户输入的数据，将其提交到后台的一个HTML代码段。 
    表单包括：输入框、单选框、复选框、提交框按钮等； 
    
   
   
    
     
     标签 
     说明 
     
    
    
     
     form. 
     创建一个表单（action：表单提交的url地址、method：http请求方式） 
     
     
     . 
     post：隐式传递、get：明文传送数据 
     
     
     input 
     单行输入框（input type=“text”>） 
     
     
     . 
     单选按钮（只能选一种 button普通、reset重置、submit提交按钮） 
     
     
     . 
     复选框（多选） 
     
     
     select 
     定义下拉列表 
     
     
     option 
     下拉列表选项 
     
     
     textarea 
     文本域，可以输入多行文本内容 
     
    
   
  DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单操作title>
	head>
	<body>
	
		用户名：<input type="text" name="username" placeholder="请输入你的用户名" /><br />
		密码框：<input type="password" name="password" /><br />
		性别：
		<input type="radio" name="sex" id="nan" />
		<label for="nan">男label>
		<input type="radio" name="sex" id="nv" checked="checked" />
		<label for="nv">女label><br />
		
		爱好：
		<input type="checkbox" name="mm" checked="checked" />
		<label for="mm">喵喵label>
		<input type="checkbox" name="cf" />
		<label for="cf">吃饭label>
		<input type="checkbox" name="sj" checked="checked" />
		<label for="sj">睡觉label>
		<input type="checkbox"/>土豆
		
		个人评价：
		<textarea name="message" cols="30" rows="3" placeholder="咋样">textarea><br/>
		<input type="button" value="普通按钮" />
		<input type="reset" value="重置" />
		<input type="submit" value="提交" />
	form>
	body>
html>

 
   
  CSS 
   
   CSS（层叠样式表）是一种用于描述网页样式和外观的样式表语言。它与HTML一起使用，用于控制网页的布局、颜色、字体、大小、间距以及其他视觉效果。通过CSS，你可以改变网页的外观，使其更加美观、一致和可读。 
    
    CSS的工作原理
 是通过选择器（Selectors）来选择HTML元素，并为这些元素应用样式规则（Rules）。 
    CSS规则
 由一个选择器和一组样式声明组成。选择器指定了要应用样式的HTML元素，样式声明定义了要应用的样式属性和值。 
    
   
  1.CSS语法 
   
   CSS由选择器和样式规则组成。 
    
    选择器选择要应用样式的HTML元素（选择器有很多不同的类型） 
    样式规则定义要应用的样式属性和值 
    
   
   
  - 选择器:是用来指定要改变样式的HTML元素
- 每条声明由一个属性和一个值组成
- 属性代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开
- CSS声明总是以分号(;)结束，声明总以大括号({})括起来
- 在HTML文档中，可以把样式定义在标签中
 
  1.1 基础案例展示 
  选择器是 p，样式部分是 {color: forestgreen; text-align: center;}。