一，关于html的学习
（1）学习过程
因为需要掌握一些html和css的基本操作所以我开始了学习html和css的路，在最初的学习中我选择的是pink老师的html和css课程。在第一天的学习中我还是充满兴奋与担忧，兴奋在于自己可以学到一个新的东西，担忧在于害怕自己学不明白，不过还好pink老师的课程很生动，将一个个的知识点以最容易理解的例子讲述出来，由于讲课过于生动和便于理解，弹幕也常常会说“幼儿园班开课了”，而且会从编译软件以及所需要安装的插件开始讲，所以很推荐跟我一样的小白去选择这个视频来进行入门学习。
（2）学习收获
1）什么是html
HTML是超文本标记语言（HyperTextMarkupLanguage）的缩写，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言，是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
2）html创建一个网页
第一节课学到的是网页的基本制作，很简单就是先创建一个后缀为.html的文件然后代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我用vscode创建的第一个页面</title>
</head>
<body>
写代码是一件非常快乐的事情
</body>
</html>
保存后运行就会出现这个窗口
其中前面几行分别代表的是
<!DOCTYPE.html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的数据，如 定义网页编码格式为 utf-8（utf-8又叫做万国码，由于在大部分浏 览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
<title> 元素描述了文档的标题
<body>元素包含了可见的页面内容
3)标签
后面学到了标签有标题标签以及段落和换行标签代码分别为
<!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>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新建</h6>
----我爱刘佳琳</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=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>段落标签</p>
<p>我爱刘佳琳</p>
<br>换行标签
<p>我爱<br>刘佳琳</p>
我爱<br/>刘佳琳</body></html>
4）文本格式化
文本格式化包括加粗，字体倾斜，删除线，下划线等
<!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>
我<strong>加粗</strong>文字
<b>加粗</b>
我<strong>最爱</strong><strong>刘佳琳</strong><br>
我是<em>倾斜的</em>文字
<i>倾斜</i>
我最爱<strong><em>刘佳琳</em></strong><br>
我是<del>删除线</del>
<s>删除线</s>
我<del>不是</del>最爱刘佳琳<br>
我是<ins>下划线</ins>
我最爱<ins>刘佳琳</ins>
</body></html>
5）div和span标签（盒子）
div是独占一行的盒子一行只能有一个
span是小盒子一行可以放多个
<!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>div和span标签</title>
</head>
<body>
<div>我是div标签独占一行，我是一个盒子</div>
<div>我爱刘佳琳</div>
<span>我是span是个小盒子一行有多个</span>
<span>百度</span>
<span>新浪</span></body>
</html>
6）图像标签
<!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> <h4>图像标签</h4> <img src="王泽承.jpg" alt="我是王泽承"> <h4>alt 替换文本 图像无法显示的时候，显示替换文本</h4> <img src="王泽承1.jpg" alt="我是王泽承"> <h4>title 提示文本 鼠标放在图像上显示的文字：</h4> <img src="王泽承.jpg" alt="我是王泽承"title="我是王泽承"> <h4>width 给图像设置宽度：</h4> <img src="王泽承.jpg" alt="我是王泽承"title="我是王泽承"width="100"> <h4>heigh 给图像设置高度：</h4> <img src="王泽承.jpg" alt="我是王泽承"title="我是王泽承"height="200"/> <h4>border 给图像设置边框：</h4> <img src="王泽承.jpg" alt="我是王泽承"title="我是王泽承"width="100" border="15"></body></html>
7）表格的基本用法
<!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> <table align="center" border="2" cellpadding="10" cellspacing="" width="520" height="300"> <!-- align是设置表格位置的center为居中，border设置边框大小，cellpadding是字与边框的距离，cellspacing是单元格之间的距离 --> <!-- th一般用在表头可以加粗并居中tr是一行td是其中一个单元格的内容 --> <!-- width是调宽，height是调高 --> <!-- thead是表头标签 --> <!-- tbody是身体是表格内容 --> <thead> <tr><th>姓名</th><th>性别</th><th>年龄</th></tr> </thead> <tbody> <tr><td>王泽承</td><td>男</td><td>18</td></tr> <tr><td>刘佳琳</td><td>女</td><td>19</td></tr> </tbody> </table> </body></html>
8）合并单元格
<!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> <!-- 三部曲 colspan合并列 rowspan是合并行 记得删除多余的单元格 --> <table width="500" height="250"border="1" cellspacing="0"> <tr> <td></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table></body></html>
9)实战 综合案例
<!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> <h4>青春不常在，抓紧谈恋爱</h4> <table width="600"> <tr> <td>性别：</td> <td> <label for="nan">男</label><input type="radio" name="sex" id="nan"> <label for="nv">女</label><input type="radio" name="sex" id="nv"checked="checked"> </td> </tr> <tr> <td>生日：</td> <td> <select name="" id=""> <option value="">--请选择出生年份</option> <option value="">1999</option> <option value="">2000</option> <option value="">2001</option> <option value="">2002</option> <option value="">2003</option> </select> <select name="" id=""> <option value="">--请选择出生月份</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="">11</option> <option value="">12</option> </select> <select name="" id=""> <option value="">--请选择出生日</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="">11</option> <option value="">12</option> </select> </td> </tr> <tr> <td>所在地区：</td> <td><input type="text"value="输入地区"></td> </tr> <tr> <td>婚姻状况：</td> <td> <label for="yihun">已婚</label><input type="radio" name="hunyin" id="yihun"> <label for="weihun">未婚</label><input type="radio" name="hunyin" id="weihun"checked="checked"> <label for="lihun">离婚</label><input type="radio" name="hunyin" id="lihun">
</td> </tr> <tr> <td>学历：</td> <td><input type="text"value="输入学历"></td> </tr> <tr> <td>喜欢的类型</td> <td> <label for="xiaoxianro">小鲜肉</label><input type="checkbox" name="xihuanleixing" id="xiaoxianro"> <label for="wumeide">妩媚的</label><input type="checkbox" name="xihuanleixing" id="wumeide"> <label for="keaide">可爱的</label><input type="checkbox" name="xihuanleixing" id="keaide"> </td> </tr> <tr> <td>自我介绍</td> <td> <textarea name="" id="" cols="30" rows="10">个人简介</textarea> </td> </tr> <tr> <td></td> <td><input type="submit"value="免费注册"></td> </tr> <tr> <td></td> <td><input type="checkbox" name="" id="">我同意注册条款和会员加入标准</td> </tr> <tr> <td></td> <td> <a href="#">我是会员立即登录</a> </td> </tr> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>年满十八且单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table></body></html>
二，关于css的学习
（1）什么是css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。（这是官方解释，按照我学习的理解就算html是鸟的身体而css就是鸟的羽毛用来修饰装扮鸟，让鸟变的更好看的）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
