HTML/CSS/JS总结

最新推荐文章于 2024-08-03 17:05:14 发布

孤岛使者

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量580

点赞数 1

分类专栏： SE on Application Architecture 文章标签： css javascript html

本文链接：https://blog.csdn.net/Buluchacha/article/details/122659648

版权

SE on Application Architecture 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML/CSS/JS总结

1. HTML
2. CSS
3. JS

在这里插入图片描述

1. HTML

1.1 基础

在这里插入图片描述

1.2 标签的构成和关系

在这里插入图片描述

1.3 基础标签

1.3.1 排版标签

1.3.1.1 标题标签

在这里插入图片描述

1.3.1.2 段落标签

在这里插入图片描述

1.3.1.3 换行标签

在这里插入图片描述

1.3.1.4 水平线标签

在这里插入图片描述

1.3.2 文本格式化标签

在这里插入图片描述

1.3.3 媒体标签

1.3.3.1 图片标签

在这里插入图片描述

1.3.3.2 路径

在这里插入图片描述

1.3.3.3 音频标签

在这里插入图片描述

1.3.3.4 视频标签

在这里插入图片描述

1.3.4 链接标签

在这里插入图片描述

1.3.5 综合练习

1.3.5.1 招聘案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>腾讯科技高级web前端开发岗位</h1>
    <hr>
    <h2>职位描述</h2>
    <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
    <h2>岗位要求</h2>
    <p>5年以上前端开发经验， <strong>精通html5/css3/javascript等</strong> web开发技术；</p>
    <p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
    <p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p>
    <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
    <p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
    <p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
    <h2>工作地址</h2>
    <p>上海市-徐汇区-腾云大厦</p>
    <img src="./images/map.jpg" alt="">
</body>
</html>

1.3.5.2 链接跳转案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
</head>
<body>
  <h1>欢迎您来到首页</h1>
  <a href="./index.html">首页</a>
  <a href="./list.html">列表页</a>
  <a href="./details.html">详情页</a>
  <a href="./login.html">登录页</a>
  <br>
  <br>

  <img src="./images/index.png" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表页</title>
</head>
<body>
  <h1>欢迎您来到列表页</h1>
  <a href="./index.html">首页</a>
  <a href="./list.html">列表页</a>
  <a href="./details.html">详情页</a>
  <a href="./login.html">登录页</a>
  <br>
  <br>

  <img src="./images/list.png" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
</head>
<body>
  <h1>欢迎您来到详情页</h1>
  <a href="./index.html">首页</a>
  <a href="./list.html">列表页</a>
  <a href="./details.html">详情页</a>
  <a href="./login.html">登录页</a>
  <br>
  <br>

  <img src="./images/details.png" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页</title>
</head>
<body>
  <h1>欢迎您来到登录页</h1>
  <a href="./index.html">首页</a>
  <a href="./list.html">列表页</a>
  <a href="./details.html">详情页</a>
  <a href="./login.html">登录页</a>
  <br>
  <br>

  <img src="./images/login.png" alt="">
</body>
</html>

1.4 列表标签

在这里插入图片描述

1.5 表格标签

在这里插入图片描述

1.6 表单标签

1.6.1 input系列标签

在这里插入图片描述

1.6.2 button按钮标签

在这里插入图片描述

1.6.3 select下拉菜单标签

在这里插入图片描述

1.6.4 textarea文本域标签

在这里插入图片描述

1.6.5 label标签

在这里插入图片描述

1.7 语义化标签

在这里插入图片描述

1.8 字符实体

在这里插入图片描述

1.9 综合案例

1.9.1 会员注册表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称: <input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别: 
        <label><input type="radio" name="sex" checked> 男</label>
        <label><input type="radio" name="sex"> 女</label>
        <br><br>

        所在城市:
        <select>
            <option>北京</option>
            <option selected>上海</option>
            <option>广州</option>
        </select>
        <br>
        <br>
        喜欢的类型:
        <label><input type="checkbox" checked> 可爱</label>
        <label><input type="checkbox" checked> 性感</label>
        <label><input type="checkbox"> 御姐</label>

        <br>
        <br>

        个人介绍: <br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>年满18岁、单身</li>
            <li>年满18岁、单身</li>
        </ul>
        <!-- 按钮: input button -->
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>
</body>
</html>

1.9.2 征婚网站

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

	<h2>青春不常在，抓紧谈恋爱</h2>
	<hr>
	<form>
		性别:
		<label>
			<input type="radio" name="gender" checked><img src="images/man.jpg" alt=""> 男
		</label>
		<label>
			<input type="radio" name="gender"><img src="images/women.jpg" alt=""> 女<br><br>
		</label>

		出生年月:
		<select name="year">
			<option value="">请选择年</option>
			<option value="">1990年</option>
			<option value="">1991年</option>
			<option value="">1992年</option>
		</select>

		<select name="month">
			<option value="">请选择月</option>
			<option value="">1月</option>
			<option value="">2月</option>
			<option value="">3月</option>
		</select>

		<select name="day">
			<option value="">请选择日</option>
			<option value="">1</option>
			<option value="">2</option>
			<option value="">3</option>
		</select><br><br>

		所在地区：<input type="text" placeholder="奋斗者之家"><br><br>

		婚姻状况 :
		<label>
			<input type="radio" name="marry" checked> 单身
		</label>
		<label>
			<input type="radio" name="marry"> 未婚
		</label>
		<label>
			<input type="radio" name="marry"> 缺爱
		</label>
		<br><br>

		学历 : <input type="text" placeholder="小学"><br><br>
		月薪 : <input type="text" placeholder="1000~100000"><br><br>
		手机号: <input type="text"><br><br>
		昵称 : <input type="text"><br><br>

		喜欢的类型 :
		<label>
			<input type="checkbox" name="like"> 妩媚
		</label>
		<label>
			<input type="checkbox" name="like"> 柔美
		</label>
		<label>
			<input type="checkbox" name="like"> 可爱
		</label>
		<label>
			<input type="checkbox" name="like"> 小鲜肉
		</label>
		<label>
			<input type="checkbox" name="like"> 御姐
		</label>
		<label>
			<input type="checkbox" name="like"> 萝莉
		</label>
		<br><br>

		自我介绍: <textarea name="" cols="50" rows="10"></textarea><br><br>

		<h3>我承诺</h3>
		<ul>
			<li>年满18岁、单身</li>
			<li>抱着严肃的态度</li>
			<li>真诚寻找另一半</li>
		</ul>

		<label>
			<input type="checkbox" checked>我同意注册条款和会员加入标准
		</label>
		<br><br>

		<input type="submit">
		<input type="reset">
	</form>

</body>
</html>

2. CSS

2.1 基础

在这里插入图片描述

2.2 引入方式

在这里插入图片描述

2.3 基础选择器

在这里插入图片描述

2.3.1 标签选择器

在这里插入图片描述

2.3.2 类选择器

在这里插入图片描述

2.3.3 id选择器

在这里插入图片描述

2.3.4 通配符选择器

在这里插入图片描述

2.4 字体和文本样式

2.4.1 字体样式

在这里插入图片描述

2.4.2 文本样式

在这里插入图片描述

2.4.3 line-height行高

在这里插入图片描述

2.4.4 综合案例

2.4.4.1 新闻网页案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      /* background-color: orange; */
      /* 让当前新闻整体div大盒子水平居中 */
      margin: 0 auto;
    }

    .time {
      color: grey;
    }

    .sina {
      color: skyblue;
      font-weight: 700;
    }

    a {
      /* 去除a标签的下划线 */
      text-decoration: none;
    }

    h1 {
      /* background-color: pink; */
      /* 要让文本在h1标签中水平居中！！！ */
      text-align: center;
    }

    .info {
      /* 让span、a标签在p标签中水平居中 */
      text-align: center;
    }

    .content {
      /* 首行缩进两个字 */
      text-indent: 2em;
    }

  </style>
</head>
<body>
  <div class="box">
    <h1>《自然》评选改变科学的10个计算机代码项目</h1>
    <p class="info">
      <span class="time">2077年01月28日14:58 </span>
      <span class="sina">新浪科技</span> 
      <a href="#">收藏本文</a>
    </p>

    <hr>
    
    <p class="content">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>

    <p class="content">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>

    <p class="content">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>

    <p class="content">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
  </div>
</body>
</html>

2.4.4.2 百度首页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 让盒子内部的图片、文字等内容水平居中 */
      text-align: center;
    }

    .link {
      height: 56px;
    }

    .web {
      font-weight: 700;
      text-decoration: none;
      color: black;
    }

    .search {
      height: 54px;
    }

    .one {
      width: 425px;
      height: 30px;
    }

    .two {
      width: 100px;
      height: 30px;      
    }

    .more {
      height: 56px;
    }

    .map {
      height: 62px;
    }

  </style>
</head>
<body>

  <div class="box">

    <img src="img/logo.gif" alt="">

    <div class="link">
      <a href="#">新 闻</a>
      <a href="#" class="web">网 页</a>
      <a href="#">贴 吧</a>
      <a href="#">知 道</a>
      <a href="#">音 乐</a>
      <a href="#">图 片</a>
      <a href="#">视 频</a>
      <a href="#">地 图</a>
    </div>

    <div class="search">
      <input type="text" class="one">
      <input type="button" value="百度一下" class="two">
    </div>
    
    <div class="more">
        <a href="#">百科</a>
        <a href="#">文库</a>
        <a href="#">hao123</a> |
        <a href="#">更多&gt;&gt;</a>
    </div>

    <div class="map">
        <img src="img/icon.jpg" alt="">
        <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
    </div>
    <div>
      <a href="#">把百度设为主页 </a>
      <a href="#">安装百度卫士 </a>
    </div>
    <div> 
      <a href="#">加入百度推广</a> |
      <a href="#">搜索风云榜</a> |
      <a href="#">关于百度</a> |
      <a href="#">About Baidu</a>
    </div>
    <p>©2021 Baidu 使用百度前必读 京ICP证030173号</p>
  </div>

</body>
</html>