构建之法读书笔记1 html和css学习

第一章：概论
通过阅读本章我正确认识了软件与软件工程的关系：软件不仅仅是程序代码，还包括软件工程。软件工程涵盖了从需求分析、设计、编码、测试到维护的全过程管理。更深刻了解到了软件工程的定义：软件工程是应用系统的、有序的、可量化的方法到软件的开发、运营和维护的过程。
当然更加认识到了软件开发的阶段：从玩具阶段、业余爱好者阶段到成熟阶段和成熟的产业阶段。

第二章：个人技术和流程
我从三方面对软件测试分析进行了学习与了解：
单元测试方面：单元测试应在最基本的功能/参数上验证程序的正确性，必须由最熟悉代码的人来写，测试后机器状态应保持不变，测试要快且可重复，独立且覆盖所有代码路径。
效能分析方面：包括抽样和代码注入两种方法，用于找出程序运行中的瓶颈。
软件设计原则方面：单一职责原则和开放-封闭原则，前者指一个模块应只有一个导致它变化的原因，后者指软件实体应该是可扩展的，同时应该是不可修改的。

标签的写法：

<!-- 双标签 -->
 <!-- 成对出现的标签 -->
  <!-- 包裹内容时使用 -->
<strong>文字内容</strong>
<!-- 单标签 -->
 <!-- 只有开始标签没有结束标签 -->
<br>
换行
<hr>
水平线

HTML基本骨架

<!-- html基本骨架是网页模板 -->
<!-- <html>整个网页
    <head>网页头部
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html> -->

<!-- 快速生成骨架 -->
<!-- 在HTML文件(.html)中,!(英文)配合Enter/Tab键 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    网页主体
</body>
</html>

标签的关系

<!-- 明确代码的书写位置 -->
 <!-- 标签之间只有两种关系 -->
 <!-- 父子关系（嵌套关系） -->
  <!-- html和head -->
 <!-- 兄弟关系（并列关系）-->
  <!-- head和body -->
 <html>
    <head></head>
    <body></body>
 </html>
 <!-- 向后缩进：Tab -->
 <!-- 向前缩进：Shift + Tab -->

注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    网页内容
    <!-- <strong>加粗</strong> -->
    <!-- 网页内容 -->
</body>
</html>

标题标签：

<!-- 标签名：h1~h6(双标签) -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <!-- h1在网页中一般用一次 -->
    <h1>一级标题</h1>
    <!-- h2~h6没有使用次数限制 -->
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
 </body>
 </html>

段落标签

<!-- 段落标签名：p(双标签) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>通过阅读本章我正确认识了软件与软件工程的关系：软件不仅仅是程序代码，还包括软件工程。软件工程涵盖了从需求分析、设计、编码、测试到维护的全过程管理。更深刻了解到了软件工程的定义：软件工程是应用系统的、有序的、可量化的方法到软件的开发、运营和维护的过程。
        当然更加认识到了软件开发的阶段：从玩具阶段、业余爱好者阶段到成熟阶段和成熟的产业阶段。</p>
    <p>通过阅读本章我正确认识了软件与软件工程的关系：软件不仅仅是程序代码，还包括软件工程。软件工程涵盖了从需求分析、设计、编码、测试到维护的全过程管理。更深刻了解到了软件工程的定义：软件工程是应用系统的、有序的、可量化的方法到软件的开发、运营和维护的过程。
        当然更加认识到了软件开发的阶段：从玩具阶段、业余爱好者阶段到成熟阶段和成熟的产业阶段。</p>
</body>
</html>

换行和水平线标签

<!-- 单标签 -->
 <!-- 只有开始标签没有结束标签 -->
<h1>换行和水平线</h1>
 <!-- <br>
 换行
 <hr>
 水平线 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>换行和水平线标签</title>
 </head>
 <body>
     第一行内容
     <br>
     <br>
     第二行内容
     <hr>
 </body>
 </html>

文本格式化标签

<!-- 为文本添加特殊格式，突出重点（加粗、倾斜、下划线、删除线） -->
 <!-- 加粗：strong b;
 倾斜： em i;
 下划线：ins u;
 删除线：del s;
 通常用左边的，带强调含义 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
 </head>
 <body>
    <strong>strong:加粗</strong>
    <br>
    <em>em:倾斜</em>
    <br>
    <ins>ins:下划线</ins>
    <br>
    <del>del:删除线</del>
 </body>
 </html>

图像标签

<!-- 在网页中插入图片 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
 </head>
 <body>
    <img src="./123.png">
    <img src="./456.png">
 </body>
 </html>

图像属性：

<!-- alt 替换文本 图片无法显示的时候显示的文字
title 提示文本 鼠标悬停在图片上面的时候显示的文字 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像-属性</title>
</head>
<body>
    <!--解决以前的问题，网速慢可能导致图片加载不出来
    并不能影响网页内容的浏览，则用alt替换 -->
    <!-- 属性名= "属性值"
    属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序 -->
    <img src="./1234.png" alt="这是那维莱特">
    <!-- title 提示文本 鼠标悬停在图片上面的时候显示的文字 -->
    <img src="./456.png" title="这是仆人" width="100">
    <!-- 浏览器缩放图片，默认是等比缩放 -->
    <img src="./123.png" width="100">
    <img src="./456.png" height="1000">
</body>
</html>

绝对路径：

<!-- 绝对路径：从盘符出发查找目标文件
windows电脑从盘符出发
Mac电脑从根目录出发  
<img src="C:\images\mao.jpg">
windows默认是\,其他系统是/，建议统一写为/-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对路径</title>
</head>
<body>
    <img src="D:/Visual Studio Code/code/456.png">
    <!-- 使用图片的在线网址，不用进行下载 -->
    <img src="https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg">
</body>
</html>

posted @ 2025-01-20 20:25 haoyinuo 阅读(14) 评论(0) 收藏举报

刷新页面返回顶部

haoyinuo

构建之法读书笔记1 html和css学习

公告