目录
- html
- 标签于声明
- lang语言种类
- 二、标签
- 2.1、标题标签
- 2.2、段落标签
- 2.3、换行标签
- 2.4、文本格式标签
- 2.5、媒体标签
- 2.5.1、图片标签是单标签
- 2.5.2、路径
- 2.5.3音频标签
- 2.5.4、视频标签
- 2.6、链接标签
- 2.盒子标签
- 表格
- 表格空间
- 合并单元格
- 表单
- form表单域
- input标签
- 下拉表单元素
- optgrou标签分组
- 文本域
HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、FlexboxJavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs其他： 移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力html标签于声明
声明为 HTML5 文档
元素是 HTML 页面的根元素
- 头部
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
charset 常用的值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 被称为万国码，基本包含了全世界所有国家需要用到的字符
</strong></li></ul><p>元素描述了文档的标题</p><ul><li><strong></strong></li></ul><p>用户可以看到的标签</p><p>元素包含了可见的页面内容</p></blockquote><h2>lang语言种类</h2><blockquote><p>用来定义当前文档显示的语言</p><ul><li>en定义语言为英语</li><li>zh-CN定义语言为中文</li></ul></blockquote><pre><code></code></pre><h1>二、标签</h1><h2>2.1、标题标签</h2><blockquote><p>h1——h6</p><ul><li>加了标题的文字会变的加粗，字号也会以此变大</li><li>一个标题独占一行</li></ul></blockquote><h2>2.2、段落标签</h2><blockquote><ul><li>文本在一个段落这种会根据浏览器窗口的大小进行自动换行</li><li>段落和段落之间保有空隙</li></ul></blockquote><pre><code><p> 段落标签</p></code></pre><h2>2.3、换行标签</h2><blockquote><ul><li><code><br /</code>>（<br<code>></code>）是个单标签</li><li><code><br /></code> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距</li></ul></blockquote><h2>2.4、文本格式标签</h2><p>为文字设置粗细、斜体、下划线等效果</p><table><thead><tr><th>语义</th><th>标签</th></tr></thead><tbody><tr><td>加粗</td><td><code><strong></code></td></tr><tr><td>倾斜</td><td><code><em></em></code></td></tr><tr><td>删除线</td><td><code><del></del></code></td></tr><tr><td>下划线</td><td><code><ins></ins></code></td></tr></tbody></table><h2>2.5、媒体标签</h2><h3>2.5.1、图片标签是单标签</h3><p>代码：</p><pre><code><noscript><img decoding="async" src="" alt=""></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="" alt=""></code></pre><p>场景：在网页显示图片</p><p>属性名：src</p><ul><li>图片的https://www.cnblogs.com/aixiaohou/archive/2023/03/10/url路径</li></ul><p>属性名：alt</p><p>属性值：替换文本</p><ul><li>当图片加载失败时，才显示alt文本</li><li>当图片加载成功时，不会显示alt文本</li></ul><p>属性名：title</p><p>属性值：提示文本</p><ul><li>当鼠标悬停时，才显示的文本</li></ul><h3>2.5.2、路径</h3><h3>2.5.3音频标签</h3><pre><code><audio src="URL路径" controls muted></audio></code></pre><p>属性：controls</p><p>属性：muted</p><ul><li>禁音</li></ul><h3>2.5.4、视频标签</h3><pre><code><video src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/url路径" controls="controls" autoplay="" muted> </video></code></pre><h2>2.6、链接标签</h2><pre><code><a href="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/url路径" target="目标新窗口的弹出方式-blank" rel="noopener"></a></code></pre><h2>2.盒子标签</h2><blockquote><p><code></p><div></code>:一行只能放一个大盒子</p><p><code><span></span></code>：</p></blockquote><h1>表格</h1><table><thead><tr><th>标记</th><th>说明</th></tr></thead><tbody><tr><td>table</td><td>表格标记</td></tr><tr><td>caption</td><td>表格标题标记</td></tr><tr><td>th</td><td>表格表头标记</td></tr><tr><td>tr</td><td>表格的行标记</td></tr><tr><td>td</td><td>表格的列标记</td></tr><tr><td>theaad</td><td>定义表格的表头</td></tr><tr><td>tbody</td><td>定义表格的主体</td></tr><tr><td>tfoot</td><td>定义表格的页脚</td></tr></tbody></table><h2>表格空间</h2><p>属性：<code>cellspacing</code></p><blockquote><p>定义表格单元格之间的空间</p></blockquote><p>属性：<code>cellpadding</code></p><blockquote><p>表示单元格边框与单元格内容之间的距离</p></blockquote><h2>合并单元格</h2><p>属性：<code>colspan</code></p><ul><li>如果要将两个或多个列合并为一个列</li></ul><p>属性：<code>rowspan</code></p><ul><li>如果要合并两行或更多行</li></ul><h1>表单</h1><p>HTML 表单用于收集不同类型的用户输入。</p><h2>form表单域</h2><pre><code>基本语法 </code></pre><p>属性名：action</p><p>属性值如下：</p><blockquote><ul><li>指定处理表单信息的服务器端（相当于数据要传输的地方）</li></ul></blockquote><p>属性名：method</p><p>属性值如下：</p><blockquote><ol><li><p>指定向服务器发送数据的方法，get、post，默认get</p></li><li><p>两种提交方式的区别：</p><ul><li>get：地址栏状态会发生变化，表单数据会在url信息中展示。</li><li>post：不会改变地址栏状态，表单数据不会被显示</li></ul><p>post<code>方式提交的数据安全性要明显高于</code>get方式提交数据。</p></li></ol></blockquote><p>属性名：enctype</p><p>属性值如下：</p><blockquote><p>规定表单数据在发送到服务器之前进行编码。有三种</p><ol><li>application/x-www-form-urlencoded（在发送前编码所有字符，默认）</li><li>multipart/form-data（不对字符编码，文件上传时必须使用此值）</li></ol></blockquote><h2>input标签</h2><p>基本语法：</p><pre><code></code></pre><p>属性名：type</p><p>属性值如下：</p><blockquote><ol><li><p>text：单行文本输入框</p></li><li><p>password：密码输入框</p></li><li><p>checkbox：复选框</p><pre><code> 1 2 3 </code></pre></li></ol><p><noscript><img decoding="async" src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309232935885.png" alt="image-20230309232935885" loading="lazy"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309232935885.png" alt="image-20230309232935885" loading="lazy"></p><ol><li>radio：单选按钮</li></ol><pre><code> 1 2 3 </code></pre><p><noscript><img decoding="async" src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309232800143.png" alt="image-20230309232800143" loading="lazy"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309232800143.png" alt="image-20230309232800143" loading="lazy"></p><ol><li>image：图像按钮</li><li>submit：提交按钮</li><li>reset：重置按钮</li><li>button：普通按钮</li><li>file：文件选择框</li></ol><pre><code> 上传文件 </code></pre><p><noscript><img decoding="async" src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309233308178.png" alt="image-20230309233308178" loading="lazy"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309233308178.png" alt="image-20230309233308178" loading="lazy"></p><ol><li>hidden：隐藏框</li></ol></blockquote><p>属性名：name</p><h2>下拉表单元素</h2><p>属性：select</p><pre><code>选择时间为 1 2 1 2 </code></pre><p><noscript><img decoding="async" src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235154467.png" alt="image-20230309235154467" loading="lazy"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235154467.png" alt="image-20230309235154467" loading="lazy"></p><h2>optgrou标签分组</h2><p>属性名：label</p><p>属性值：表示分组名</p><pre><code> 郑州 新乡 驻马店 海淀区 朝阳区 </code></pre><p><noscript><img decoding="async" src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235421044.png" alt="image-20230309235421044" loading="lazy"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235421044.png" alt="image-20230309235421044" loading="lazy"></p><h2>文本域</h2><pre><code> <textarea rows="3" cols="20"> 文本内容 </textarea> </code></pre><p><noscript><img decoding="async" src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235100649.png" alt="image-20230309235100649" loading="lazy"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://www.cnblogs.com/aixiaohou/archive/2023/03/10/C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235100649.png" alt="image-20230309235100649" loading="lazy"></p><blockquote><p>通过<<code>textarea</code>> 标签可以轻松地创建多行文本输入框。<br />cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小。<br />readonly=”readonly”：设置为只读模式，不允许编辑。<br />disable=”disable”：设置禁用文本域</p></blockquote><p>