全栈攻防局
HTML初识笔记(不完整版)
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区5.注释和文档说明<maquee loop="100"></maquee> 滚动 loop控制循环次数
注释<!--这里写注释--><input type="text"> 这是一个输入框
7.meta字符编码UTF-8<meta charset="UTF-8">
8.lang设置语言
整个代码大体语言，body中某一部分可以修改<head lang="cn、en...">
9.标准结构
10.排版标签
标题标签 h1-h6
<h1>我是一级标题</h1>
<h2>我是一级标题</h2>
<h3>我是一级标题</h3>
<h4>我是一级标题</h4>
<h5>我是一级标题</h5>
h6>我是一级标题</h6>
段落标签<p>这是一个段落标签</p>
div包裹这些段 包装袋
<div>
<p>这是一个段落标签</p>
<p>这是一个段落标签</p>
<p>这是一个段落标签</p>
<!--Ctrl+回车 光标到快速换行到下一行-->
</div>
11.语义化标签
因为语义使用这些标签，而不是因为样式而使用这些标签
默认效果不重要，语义才重要
12.块级元素和行内元素
块级元素，独占一行，自动换行<maquee>双 <h1>双 <p>双 <div>双
行内元素，不独占一行，不会自动换行<input>单 <span>双<span></span>行内 inline，用来包裹一小段文字 / 行内内容， 文字内局部修饰
自动换行，独占一行，整块区域布局
注意事项
块级元素中可以写块级元素、行内元素（几乎都能写）
行内元素中只能写行内元素
标题标签h1-h6不能互相嵌套
p标签中不能写块元素
13.常用文本标签
em着重阅读的内容
strong非常重要的内容，加粗
span没有语义，包裹标签
<p>
好好学习，<em>天天向上</em>
</p>
<p>
好好学习，<strong>天天向上</strong>
</p>
<p>
好好学习，<span>天天向上</span>
</p>
14.不常用的文本标签
cite作品标题
dnf特殊术语，专有名词
del ins 删除和插入文本
sub sup 下标和上标
code表示一段代码
samp从上下文中，将某些内容提取出来
kbd文本从键盘输入
abbr缩写+title鼠标悬停提示
bdo改变文本方向，配合dir使用，属性ltr rtl
var标记变量
small复试细则，不重要的内容
1<p>
好好学习，<cite>《天天向上》</cite>
</p>
2<p>
好好学习,<dfn>天天向上</dfn>
</p>
3<p>
<del>好好学习</del>,<ins>天天向上</ins>
</p>
4<p>
水的化学符号：H<sub>2</sub>O 2的2次方：2<sup>2</sup>
</p>
5<p>
这里是一段代码<code>input</code>
</p>
6<p>
数字是<samp>123456</samp>
</p>
7<p>
从键盘输入的是：<kbd>123456</kbd>
</p>
8<p>
<abbr title="英雄联盟">LOL</abbr>非常好玩
</p>
9<p>
你好吗：<bdo dir="rtl">你好吗</bdo>
</p>
10<p>
这里的变量是：<var>a</var>
</p>
11<p>
这里的内容<small>不是很重要</small>
</p>
15.img图片标签
行内元素（不会自动换行），单位像素，使浏览器知道图片内容<img scr="地址" width="100" height="100" alt="图片加载不出的说明">
16.相对地址和绝对地址
ctrl+shift+ + 整体放大
相对路径
相对于当前位置
同级 ./表示当前位置
<img scr="怪兽.jpg" alt="">等于
<img scr="./怪兽.jpg" alt="">./可省略
下一级 /
<img scr="./a/喜羊羊.jpg" alt=""><img scr="./a/b/灰太狼.jpg" alt="">上一级../ 上三级../../../
可以找他同级的兄弟
<img scr="../灰太狼.jpg" alt="">绝对路径
以跟位置作为参考点
本地绝对路径
从盘符出发
有很大弊端，liveServer不支持
<img src="E:/demo1/demo2/hhh.jpg" alt="">网络绝对路径
在新标签页中打开图片，找到图片位置
可能有防盗链，不允许引用
<img src="http:/....图片网址" alt="">补充：常见图片格式
.jpg或.jpeg：色彩丰富，有损的压缩格式，占用空间小，不支持透明背景，不支持动态图
png：扩展名为.png 色彩丰富，支持透明背景，不支持动态图
.bmp：色彩丰富、保留的细节更多，不进行压缩，不支持，不支持；对细节要求极高
.gif：支持色彩少，仅支持简单透明背景，支持动态图
.webp：谷歌退出，兼容性不好
base64：本质一串特殊文本，要通过浏览器打开；原理：把图片进行base64编码，形成一串文本；使用：直接作为img的src属性的之即可，不受文件位置的影响
17.超链接标签行内元素，可以包裹其他标签，但不能包裹a标签，文字间多个空格回车会被解析成一个去哪 哪哪18.超链接跳转文件浏览器可以直接打开的跳转打开浏览器不能直接打开的，eg 。。。.zip压缩包不能直接打开浏览器强制下载下载这个文件19.超链接跳转锚点快速定位，name区分大小写，不能重复（先入为主）a标签：href属性是超链接，name的是锚点（只能是a）name和id区分大小写id不能数字开头在前面做标记做标记
这是第五只小狗
a.name+a.href#查看第二只小狗a.href#+p.id 更准确查看第五只小狗这是第五只小狗
回到顶部、刷新页面
说完了，直接回到顶部
回到顶部 刷新页面 查看其他网页的锚点查看其他页面的锚点弹窗，执行js脚本javascript:alert(666弹窗内容);">点我弹窗20.通过超链接唤起指定位置的应用 电话联系 邮箱联系 短信联系 21.列表列表中的列表项list items有序列表 ordered list- 打开冰箱门
- 把大象放进去
- 关上冰箱门
- 北京
- 深圳
- 上海
-
术语
- 对术语的描述 做笔记，标题
- 做笔记会很重要，对术语的描述 做笔记，标题
- 做笔记会很重要，对术语的描述
- 去ds，放超链接要放li理
-
列表之间可以互相嵌套，通过span 是**行内元素（inline），本身没有默认样式、无换行、不独占一行，专门用来包裹一小段文字 / 行内内容**，做局部样式、逻辑标记。
- 北京
- 深圳
-
上海，嵌套列表结构要写完整
- 外滩
- 东方明珠
- 迪士尼
标题caption这是一个学生信息表表头theadtr th 姓名 性别 年龄 民族 政治面貌 主体tbodytr td 张三 男 18 汉族 团员 李四 钕 20 满族 群众 王五 男 19 回族 党员 脚注tfoottr td 共计：4人
<table> <caption></caption> <thead>tr th </thead> <tbody>tr td</tbody> <tfoot>tr td</tfoot> </table>24.表格属性 边框 宽度 高度 边框距离
宽高调整，表格整体会适应改变
table的heigth表示至少为600，tbody补充满足<table border="8" width="500" height="600" cellspacing="0"></table>head body foot属性只能写height，水平对齐align：left center right,垂直对齐valign：top、middle、bottom
25.表格的跨行跨列
需要配合删除修改多余的块
列colmn 跨行属性colspan=“5跨5列”
表现为横形方块
行row 跨行rowspan=“5跨5行”
表现为竖形方块<tr> <td rowspan="4">3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> <td>3-5</td> <td>3-6</td> <td>3-7</td> <td rowspan="4">3-8</td> </tr>26.补充几个常用标签
换行标签
分割线
按原文显示
27.form表单基本结构
表单用于收集用户输入的信息
表单数据提交到后端接口地址（必填）
method提交方式，常用两种：
get数据拼在网址里，适合查询，不安全、长度有限，输入框的数据会拼接在网址后面传递给后端
post数据放请求体，适合登录、上传，更安全
不加type属性的默认是提交按钮，点击会直接提交表单。name 是给后端识别参数的**唯一标识**
表单提交时，浏览器只会把带有 name 属性的输入框数据发给后端； 如果 input 没有写 name，不管输入什么内容，后台完全接收不到。
提交数据格式规则：name值=用户输入的内容
表单+输入框+按钮
提交/请求+响应/反馈<form action="处理链接/s、search" target="\_blank" method="get"> <input type="text" name="wd 后端工程确定"> <button>这是一个按钮</button> </form>28.表单的常用控件
1.input
name：参数名（给后端看的「变量名」），相同name进行分组
value：参数值（用户输入 / 控件自带的「数据内容」） 表单提交规则：整体传给后台
单行文本输入框：<font style="color:rgb(0, 0, 0);"><input type="text" name="username" value="默认值" maxlength="10"></font>
密码框：<font style="color:rgb(0, 0, 0);"><input type="password" name="pwd" value="默认值" maxlength=""></font>
单选框：<font style="color:rgb(0, 0, 0);"><input type="radio" </font><font style="color:#DF2A3F;">name="sex" value="man"</font><font style="color:rgb(0, 0, 0);"> </font><font style="color:rgb(0, 0, 0);background-color:#FBDE28;">checked</font><font style="color:rgb(0, 0, 0);">>男 </font><font style="color:rgb(0, 0, 0);"><input type="radio" </font><font style="color:#DF2A3F;">name="sex" value="woman"</font><font style="color:rgb(0, 0, 0);">>女</font>
复选框：<font style="color:rgb(0, 0, 0);"><input type="checkbox" name="hobby" value="game" </font><font style="color:rgb(0, 0, 0);background-color:#FBDE28;">checked</font><font style="color:rgb(0, 0, 0);">>游戏</font>
下拉框：<font style="color:rgb(0, 0, 0);"><select name="city"> </font><font style="color:rgb(0, 0, 0);"><option value="zz" </font><font style="color:rgb(0, 0, 0);background-color:#FBDE28;">selscted</font><font style="color:rgb(0, 0, 0);">>郑州</option> </font><font style="color:rgb(0, 0, 0);"><option value="bj">北京</option> </font><font style="color:rgb(0, 0, 0);"></select></font>
隐藏域
看不见的输入框，用来偷偷携带固定参数一起提交给后端，不用用户手动输入。<input type="hidden" name="abc" value="123">
2.按钮
普通按钮<button type="button">普通按钮</button><input type="button" value="普通按钮">
提交按钮<button type="submit">提交按钮</button><input type="submit" value="提交按钮">
重置按钮<button type="reset">重置按钮</button><input type="reset" value="重置按钮">
3.文本域txextarea多行文本输入框
出现一个输入框，没有value属性<textarea name="ahh" cols="20每行宽度" rows="10行数">我是文本域</textarea>
29.禁用表单控件disabled
放哪都可以，disabled之后不可选<button disabled type="submit">确认</button>
30.表单label标签
获取焦点，点击文字也能选中
1.lable与input相关联，令for=id
2.把表单控件直接放label里<label for="zhanghu">账户：</label> <input id="zhanghu" type="text" name="account" value="默认值" maxlength="10"> <br> <label> 密码：<input type="password" name="pwd" value="默认值" maxlength="6"> </label>31.fieldset和legend
两个标签配套使用，专门给表单分组
相关推荐
云笔记项目完整版源码
这个是一件编写完成的云笔记项目,有兴趣的可以参考x下,如果需要下载未编写的资料我也有上传
html+css+javascript笔记完整版
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
韩顺平html+css+javascript笔记完整版
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
商城静态HTML完整版
商城静态页面模板电脑版本，页面完整可使用商业，页面美观整洁。
bootstrap学习笔记之初识bootstrap
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用bootstrap搭建出简洁，清新的网站或软件界面，有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。 bootstrap是一Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。bootstrap提供了优雅的html和css规范，它即是由动态css语言Less写成。是Github上的热门开源项目。 它基于jQuery框架开发，在jQuery框架的基础上进行了更为人性化和个性化的完善，形成了一套自己独有的网站风格，并兼容大部分j
