记录最开始的前端学习 基础类
1.1标签与属性
<!-- 属性：<标签 属性="属性值" 属性="属性值"> -->
例如：
<header title="页眉">页面的页眉</header><!-- 标签可以上下排列，也可以嵌套组合 -->
例如
<div>套间1
<div>卫生间</div>
<div>房间</div>
<div>客厅</div>
</div>
<div>套间2</div>
<div>套间3</div>1-2 初始代码：
<!-- 手敲版 -->
<!-- <!DOCTYPE html> 文档声明:告诉浏览器这是一个html文件
<html lang="en"> html文件最外层的标签：包裹所有的标签。lang="en"表示这是一个英文网站，lang="zh-CN"表示中文网站
<head> 存放页面头部所有的标签
<meta charset="UTF-8">元信息：设置网页的编码方式为UTF-8（国际编码）
<title>02</title>设置网页标题
</head>
<body>
网页内容
</body>
</html> -->
<!-- 快捷键版，其中“！”需要英文版的 -->1-3 标题与段落
<!-- 标题标记 -->
<h1>标题1——在一个网页只能出现一个（规范）</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5-很少用</h5>
<h6>标题6-很少用</h6>
<!-- 段落标记 -->
<p>12346768398</p>
<p>gsajdakjcbajs</p>1-4文本修饰标签
1.强调标签
<p>
<strong>strong 是强调标签，加粗</strong>
</p>
<p>
<em>em 是强调标签，斜体</em>
</p>2.上标和下标
<p>
勾股定理：a<sup>2</sup> + b <sup>2</sup> =c <sup>2</sup>
</p>
<p>
水分子：H <sub>2</sub>O
</p>
3.删除和插入文本
<p>
打折前：<del>3000</del>，打折后：<ins>2000</ins>
</p>1-5图片标签与属性
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ki1U7eZuBSHiwupu78KJAAHaIg?w=157&h=180&c=7&r=0&o=5&dpr=2&pid=1.7"
alt="图片被韩越拿走了" >ps：用最新的宽度除以原始宽度，得到的比例乘以原来的高度即可得到另一个新的高度。
原理：当img标签只设置width或height的时候，另外一个值会根据缩放比例自动计算。
1-6相对路径和绝对路径
<img src="./楚慈图片.jfif" alt="">../ 在路径中表示上一级路径（不建议用）
<img src="../photo/楚慈图片.jfif" alt="">绝对路径（不建议用）
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.CV4RvZgJtMcY8UDrhVvs1wHaLH?w=118&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" alt="">
<img src="D:/前端代码/photo" alt=""> 1-7跳转连接
<a href="http://www.baidu.com" target="_blank">baidu</a>图片跳转方式
<a href="http://www.163.com">
<img src="./网易云.jfif" alt="">
</a><base>标签 单标签
用于给页面所有的a标签设置页面跳转打开方式，放置于head中
1-8跳转锚点
方法一：在a标签加上#号，在标题标签加上id属性
注意要加上标记，如上方的“introductio”，两种方法都需要
<h2 id="introduction">简介</h2>
<p> 外表温和有礼，待人疏远稍有冷淡。自幼失去双亲，被老师领养，重视亲情，希望能通过努力改变家庭条件，让一家人平安幸福。</p>
<p> 学生时代去建宁实习时被卷入凶杀案，与《破云》中严峫等人相识，凭高智商辅助警方捉拿罪犯，洗清嫌疑后与严峫畅谈未来，其间严峫以玩笑试探楚慈是否会用化学走歪路，然而楚慈只说——</p>
<p> “我就踏踏实实穷着就很好，那些沾着人血的钱财，犯法杀头的事情，我看就算了吧。”</p>
<p> 身为高级知识分子的他，本可以像普通人一样拥有温暖幸福的家庭生活，却被权势熏天的所谓的“官二代”一场酒后驾车毁灭了这所有的一切可能的幸福，虽痛苦不甘但生活仍在正轨。为答谢同事工作上的帮助的请客与韩越意外产生交集，被对方上门强制。遭囚禁的三日中了解到他的身份,被韩越肆无忌惮展示出的霸权彻底激怒，成为压垮他理智的最后一根稻草，点燃他的复仇之心，激愤之下决定蛰伏其身边只为了有朝一日能够让目无法纪、恃强行凶的所谓“上层阶级”为他们的罪行付出应有的代价。但楚慈，“慈”为底色，对自己这样私行复仇的行为心底并不认可，过程中一直痛苦、抑郁，即使是被韩越本人逼到死角后的利用依旧对其有愧疚。于后续《刺刀四番外：非日常之家庭小事》中再次遭到仇家追杀，被刺两刀入医院。于《提灯照河山》中提及，为躲避仇家，出院后注销了楚慈这个身份，靠着一个李姓假身份活下去。</p>
<img src="../代码/楚慈图片.jfif" alt="">方法二：在最上方a标签加上#号（与第一种方法一样），然后在要跳转的内容上方新增一个a标加上签name属性（注意name属性是加到a标签身上的）
<a name="Character relationships"></a>
<h2 >人物关系</h2>
<p> 韩越，常年在军营生活脾气暴躁。对楚慈一见钟情进而上门强制，胃出血事件中后才意识到自己有心理疾病开始寻求医生帮助（医生强调如果他不能接受楚慈的离开就不是真的治疗成功）。楚慈复仇后精神状况不稳定，自厌情绪严重，积极自救辞职、搬家，在韩越父亲面前请求他帮忙让韩越放过自己以求开始新生活。却被韩越强迫困于家中，创伤后遗爆发在浴室自杀。在楚慈自杀未遂后才悔恨放其离开。后因得知车祸一事愧疚不已，在别的仇家追杀楚慈时保护他。结尾为救楚慈胃癌晚期求助龙纪威。</p>
<p> 严峫，学生时代去建宁实习时结识的警官，曾因楚慈是嫌犯而让他在局里关了一晚上，为其看似“弱不禁风”却与室友打架取胜而诧异；结案后让楚慈找到工作后报喜讯并试探楚慈是否会用化学走歪路，得到满意的答案后目送楚慈离开【喜讯是永远都报不成了】——严峫出自《破云》</p>
<p> 叶真，出自《提灯照河山》。叶真对复仇迷茫时凭过来人经验给予教导，被反讽后露出曾被仇家刺伤的疤痕，告诉他手术后【楚慈】这个身份已经从法律上被注销，自己现在依靠一个虚构的李姓假身份生活，很多常人能做的事他都不能做了。劝叶真对复仇的代价要想清楚，叶真感慨他是“一个几乎被禁锢的人”，遂重新思考复仇的意义</p>
<p> 龙纪威，人称龙九，提灯三部皆有身影，叶真的养母，曾与玄鳞救楚慈一命，于《提灯映桃花》任“清道夫”一职，于《提灯照河山》与已化人形的老龙过着老夫老妻的日子。</p>1-10特殊符号
1-11无序列表
无序列表正确写法 默认在每一行前加上实心圆
<ul> <li>
双标签
<ul>是无序列表的外层容器、<li>是列表项
ul和li必须是组合出现的，他们之间不能有其他标签
<ul>
<li>石榴</li>
<li>苹果</li>
<li>番石榴</li>
</ul> 无序列表前实心圆可改变为其他，加上属性type type属性真实开发很少用，基本是用css去控制
<ul type="circle">
<li>苹果</li>
</ul>无序列表错误写法（不规范）
<ul>
<p>
<li>
苹果
</li>
</p>
</ul>1-12有序列表
有序列表： 在内容前加上1，2，3等序号
<ol><li>
双标签
<ol>是有序列表的外层容器、<li>是列表项
注：有序列表用得非常少，经常都是用无序列表，无序列表可以代替有序列表
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>1-13定义列表
<dl> :定义列表
<dt> :添加标题
<dd>: 添加标题的描述
注：一般用于内容左右结构的情形 dl>dt>dd
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
<dt>javascript</dt>
<dd>脚本行为</dd>
</dl>效果图
1-14嵌套列表
无序列表和有序列表的嵌套
<ul>
<li>水果
<ol>
<li>哈密瓜
<ul>
<li>新疆哈密瓜</li>
<li>进口哈密瓜</li>
</ul>
</li>
<li>葡萄</li>
<li>香蕉</li>
</ol>
</li>
<li>热菜
<ul>
<li>牛肉炒苦瓜</li>
<li>孜然虾</li>
</ul>
</li>
<li>凉菜</li>
</ul>定义列表的嵌套
<dl>
<dt>广东</dt>
<dd>
<dl>
<dt>广州市</dt>
<dt>佛山市</dt>
<dt>深圳市</dt>
</dl>
</dd>
</dl>
1-15表格标签
<table> ：表格的最外层容器
<tr> ：定义表格行
<td>：定义表格列
<th>：定义表头
<caption>：定义表格标题 -->
<!-- 语义化标签
<tHead>:包裹表格头部内容，一个表格只能出现一次
<tBody>:包裹表格正文内容，一个表格可以出现多次
<tFood>:包裹表格尾部内容，一个表格只能出现一次
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<!-- th-列-表头 -->
<th>日期</th>
<th>天气</th>
<th>出行</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2021-9-9</td>
<td><img src=".//photo/屏幕截图 2024-03-06 162746.png" alt=""></td>
<td>适合出行</td>
</tr>
<tr>
<td>2021-9-9</td>
<td><img src=".//photo/屏幕截图 2024-03-06 162746.png" alt=""></td>
<td>适合出行</td>
</tr>
</tBody>
</table>1-16表格属性
表格属性
border：表格边框
cellpadding：单元格内的空间，内边距
cellspacing：单元格之间的空间
rowspan：合并行
colspan:合并列
align:左右对齐方式
left ：左
center ：中
right ：右
valign：上下对齐方式
top ：上
middle ：中
bottom：下
<table border="1" cellpadding="30" cellspacing="10">
<tr align="center">
<th rowspan="2">1-1</th>
<!-- 合并行（上下），只需要在合并的第一行上加上属性即可 -->
<th colspan="2">1-2</th>
<!-- 列同上 -->
<!-- <th>1-3</th> -->
</tr>
<tr valign="middle">
<!-- <th >2-1</th> -->
<th>2-2</th>
<th>2-3</th>
</tr>
</table>1-17表单input
<label>：辅助表单，双标签，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。但是两处id应当相同 -->
<input type="text" placeholder="请输入" id="username">2) password-密码框，输入为隐藏字符
<input type="password">3) radio-单选框，但需要加上 name="(内容随意，上下一致即可)"
<input type="radio" name="a">男
<input type="radio" name="a">女4) disabled-是否可用，加上去后网页内此文本框内容不可更改
value 属性指定 <input> 元素的值。
<input type="text" value="广东" disabled>5) checkbox-复选框
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">羽毛球
<input type="checkbox">乒乓球
6) file-文件表单（类似上传头像)
<input type="file">7) submit-提交（登录），reset-重置
<input type="submit">
<input type="reset">8) textarea-多行文本框，可拉伸
<textarea name="" id="" cols="30" rows="10"></textarea>9) <select>：下拉菜单，双标签
<option>:下拉列表的每一项内容
加上disabled selected-表明只可以选择一次
<select name="" id="">
<option value="" disabled selected>请选择</option>
<option value="">广东</option>
<option value="">广西</option>
<option value="">福建</option>
</select>1-18div和span
<div>这是一个区域</div>
<span>修饰文本的标签，需要配合css使用</span>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
