前端+一点点后端
花半小时就能去同学面前装逼
目录
一、写代码的本质是什么？
文本：和word敲的文本一样，遵守语法、规则；
编程语言不是最重要的，在学习过程中要”得意忘形“
二、写代码：vscode——html
标签：告诉浏览器哪些部分是标题，哪些部分是段落
eg.<p> </p>
eg.<h1></h1>
eg. 这是一个超链接 a
标签通常成对出现，但也有单标签
eg.<input type="text">
eg.
eg.<hr>
区别：单标签用于无内容的元素，双标签用于有内容的元素
<div>
<h1>
数字游牧人
</h1>
<p>
我叫数字游牧人，今天来教大家开发一个很破的网站，这个网站就是用HTML+CSS+JS写的
</p>
</div>
<div>
<h1>
这是一个小标题
</h1>
</div>补充：
1、常见文本标签
①1-6级标题h1-h6
②段落p
③加粗b，下划线u, 斜体i
④无序列表 ul li
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>⑤有序列表 ol li
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>⑥表格标签
<h1>
table row
</h1>
<h2>
table data
</h2>
<h3>
table header
</h3>
<table boder:"1">
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
</table>2、HTML属性
作用：用于定义元素行为和外观
基本语法：<开始标签 属性名=“属性值”>
-
每个html元素可以具有不同属性
<p id="describe" class="section">
这是一个段落标签
</p>
<a href="https://www.baidu.com">
这是一个超链接
</a>
<a href="https://www.universitychina.net/shijian/news/20240726/154052.html">中国大学生网投稿</a>
<a href="https://www.universitychina.net/shijian/news/20240726/154052.html" target="_blank">中国大学生网投稿</a>
<!--第二个超链接是在新页面中打开-->换行br,换行线hr
-
属性名称不区分大小写，属性值对大小写敏感
<img scr="example.jpg" alt=""> <img SCR="example.jpg" alt=""> <img scr="EXAMPLE.JPG" alt=""> <!--前两者相同，第三个与前两个不一样--> <img src="青童互育合照.jpg" alt="该图片无法显示" width="800" height="600"> -
行内元素（inline)
可以在文本中插入小的元素，列入超链接、强调文本等。
-
行内元素通常在一行内呈现，不会独占一行
-
它们只占其内容所需宽度，而不是整行的宽度
-
行内元素不能包含块级元素
-
常见的行内元素包括<span>,<a>,<strong>,<em>,<img>, ,<input>
-
div标签作用：分区，划分——创建导航栏、划分内容
span标签作用：内联文本或标记，通常与css,js一起使用，增加复杂性
-
HTML表单
form标签：pleaseholder,value
<form> <input type="text" placeholder="请输入搜索内容"> <input type="text" value="请输入搜索内容"> </form> <form> <label for="username">用户名</label> <input type="text"id="username" placeholder="请输入用户名"><br><br> <labelfor="pwd">密码</labelfor=> <input type="password"id="pwd" value="请输入密码"><br><br <label >性别</label> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </input> </input> </input> <br><br> <label >爱好</label> <input type="checkbox" name="hobby">唱歌 <input type="checkbox" name="hobby">跳舞 <input type="checkbox" name="hobby">RAP <input type="checkbox" name="hobby">篮球 </input> </input> </input> </input> <br><br> <input type="submit" value="上传"> </form> <form action="#"></form>
三、css
字：有颜色，可排版
<div>
<div>
<h1 style="color:brown;font-size:xx-size;">
数字游牧人
</h1>
<p>
我叫数字游牧人，今天来教大家开发一个很破的网站，这个网站就是用HTML+CSS+JS写的
</p>
</div>
<div>
<h1>
这是一个小标题
</h1>
</div>
</div>补充：HTML负责定义页面的结构和内容，css用于控制页面的外观和样式
个人理解：HTML相当于word文档的文字输入部分，CSS相当于WPS中的导航栏的各种功能
HTML构建房子框架，css则是对房子进行装修
1、css语法
选择器{
属性1：属性值1；
属性2：属性值2；
}
-
选择器的声明可以写无数条属性
-
声明的每一行属性，都需要以英文分号结尾
-
声明的所有属性和值都是以键对这种形式出现的
示例：
/*这是一个p标签选择器*/
p{
color:blue;
font-size:16px;
}
vscode中：ctrl+/就是给选中部分变成注释
2、css三种导入方式
-
内联样式（inline styles)
-
内部样式表（internal stylesheet)
-
外部样式表（external stylesheet)
三种导入方式优先级：1>2>3
p{
color:red;
font-size:16px;
}新建文件夹，将h2放置于css.style文件名中，外联样式得在<head>中添加
<link rel="stylesheet" href="css/style.css">
<h1 style="color=red;font-size=26px;">
这里运用内联样式
</h1>
<p>
这里采用内部样式表/*见上面代码块*/
</p>
<h2>
这里采用外部样式表
</h2>
h2{
color:yellow;
font-size:20px;
}3、css选择器
选择器是css中的关键部分，它允许你对特定元素或一组元素定义样式
-
元素选择器
-
类选择器——(最常用)
-
最低0.47元/天 解锁文章
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
