html总结笔记（html总结）

时间2025-06-19 14:29:52分类IT科技浏览4328

导读：HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、...

HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack 、CSS基本功：布局、盒子模型、选择器优先级、 HTML5 、CSS3 、Flexbox JavaScript：数据类型、运算、对象、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><br /> </ul><br /> <p>元素描述了文档的标题</p><br /> <ul><br /> <li><strong><body></strong></li><br /> </ul><br /> <p>用户可以看到的标签</p><br /> <p>元素包含了可见的页面内容</p><br /> </blockquote><br /> <h2 id="lang语言种类">lang语言种类</h2><br /> <blockquote><br /> <p>用来定义当前文档显示的语言</p><br /> <ul><br /> <li>en定义语言为英语</li><br /> <li>zh-CN定义语言为中文</li><br /> </ul><br /> </blockquote><br /> <pre><code class="language-html"><html lang="en"><br /> </code></pre><br /> <h1 id="二标签">二、标签</h1><br /> <h2 id="21标题标签">2.1、标题标签</h2><br /> <blockquote><br /> <p>h1——h6</p><br /> <ul><br /> <li>加了标题的文字会变的加粗，字号也会以此变大</li><br /> <li>一个标题独占一行</li><br /> </ul><br /> </blockquote><br /> <h2 id="22段落标签">2.2 、段落标签</h2><br /> <blockquote><br /> <ul><br /> <li>文本在一个段落这种会根据浏览器窗口的大小进行自动换行</li><br /> <li>段落和段落之间保有空隙</li><br /> </ul><br /> </blockquote><br /> <pre><code class="language-html"><p><br /> 段落标签<br /> </p><br /> </code></pre><br /> <h2 id="23换行标签">2.3 、换行标签</h2><br /> <blockquote><br /> <ul><br /> <li><code><br /</code>>（<br<code>></code>）是个单标签</li><br /> <li><code><br /></code> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距</li><br /> </ul><br /> </blockquote><br /> <h2 id="24文本格式标签">2.4 、文本格式标签</h2><br /> <p>为文字设置粗细、斜体、下划线等效果</p><br /> <table><br /> <thead><br /> <tr><br /> <th>语义</th><br /> <th>标签</th><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td>加粗</td><br /> <td><code><strong></stroung></code></td><br /> </tr><br /> <tr><br /> <td>倾斜</td><br /> <td><code><em></em></code></td><br /> </tr><br /> <tr><br /> <td>删除线</td><br /> <td><code><del></del></code></td><br /> </tr><br /> <tr><br /> <td>下划线</td><br /> <td><code><ins></ins></code></td><br /> </tr><br /> </tbody><br /> </table><br /> <h2 id="25媒体标签">2.5 、媒体标签</h2><br /> <h3 id="251图片标签是单标签">2.5.1 、图片标签是单标签</h3><br /> <p>代码：</p><br /> <pre><code class="language-html"><img src="" alt=""><br /> </code></pre><br /> <p>场景：在网页显示图片</p><br /> <p>属性名：src</p><br /> <ul><br /> <li>图片的url路径</li><br /> </ul><br /> <p>属性名：alt</p><br /> <p>属性值：替换文本</p><br /> <ul><br /> <li>当图片加载失败时，才显示alt文本</li><br /> <li>当图片加载成功时，不会显示alt文本</li><br /> </ul><br /> <p>属性名：title</p><br /> <p>属性值：提示文本</p><br /> <ul><br /> <li>当鼠标悬停时，才显示的文本</li><br /> </ul><br /> <h3 id="252路径">2.5.2 、路径</h3><br /> <h3 id="253音频标签">2.5.3音频标签</h3><br /> <pre><code class="language-html"><audio src="" alt="image-20230309232935885" loading="lazy"></p><br /> <ol><br /> <li>radio：单选按钮</li><br /> </ol><br /> <pre><code class="language-html"> <form action=""><br /> <input type="radio" name="num">1<br /> <input type="radio" name="num">2<br /> <input type="radio" name="num">3<br /> </form><br /> </code></pre><br /> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309232800143.png" alt="image-20230309232800143" loading="lazy"></p><br /> <ol><br /> <li>image：图像按钮</li><br /> <li>submit：提交按钮</li><br /> <li>reset：重置按钮</li><br /> <li>button：普通按钮</li><br /> <li>file：文件选择框</li><br /> </ol><br /> <pre><code class="language-html"> <form action=""><br /> 上传文件 <input type="file" name="num"><br /> </form><br /> </code></pre><br /> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309233308178.png" alt="image-20230309233308178" loading="lazy"></p><br /> <ol><br /> <li>hidden：隐藏框</li><br /> </ol><br /> </blockquote><br /> <p>属性名：name</p><br /> <h2 id="下拉表单元素">下拉表单元素</h2><br /> <p>属性：select</p><br /> <pre><code class="language-html">选择时间为 <select name="" id=""><br /> <option value="1">1</option><br /> <option value="2">2</option><br /> <option value="1">1</option><br /> <option value="2">2</option><br /> </select><br /> </code></pre><br /> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235154467.png" alt="image-20230309235154467" loading="lazy"></p><br /> <h2 id="optgrou标签分组">optgrou标签分组</h2><br /> <p>属性名：label</p><br /> <p>属性值：表示分组名</p><br /> <pre><code class="language-html"> <form action="form.php" method="post"><br /> <select name="city"><br /> <optgroup label="河南省"><br /> <option value="1" title="郑州">郑州</option><br /> <option value="2" selected="selected">新乡</option><br /> <option value="3">驻马店</option><br /> </optgroup><br /> <optgroup label="北京市"><br /> <option>海淀区</option><br /> <option>朝阳区</option><br /> </optgroup><br /> </select><br /> </code></pre><br /> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235421044.png" alt="image-20230309235421044" loading="lazy"></p><br /> <h2 id="文本域">文本域</h2><br /> <pre><code class="language-html"> <textarea rows="3" cols="20"><br /> 文本内容<br /> </textarea><br /> </code></pre><br /> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235100649.png" alt="image-20230309235100649" loading="lazy"></p><br /> <blockquote><br /> <p>通过<<code>textarea</code>> 标签可以轻松地创建多行文本输入框。<br><br /> cols=“每行中的字符数 ” ，rows=“显示的行数 ” ，我们在实际开发中不会使用，都是用CSS 来改变大小。<br><br /> readonly="readonly"：设置为只读模式，不允许编辑。<br><br /> disable="disable"：设置禁用文本域</p><br /> </blockquote><br />

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。