html总结

2023-03-10 00:28 由 1小侯发表于 #前端开发

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> </ul> <p>元素描述了文档的标题</p> <ul> <li><strong><body></strong></li> </ul> <p>用户可以看到的标签</p> <p>元素包含了可见的页面内容</p> </blockquote> <h2 id="lang语言种类">lang语言种类</h2> <blockquote> <p>用来定义当前文档显示的语言</p> <ul> <li>en定义语言为英语</li> <li>zh-CN定义语言为中文</li> </ul> </blockquote> <pre><code class="language-html"><html lang="en"> </code></pre> <h1 id="二标签">二、标签</h1> <h2 id="21标题标签">2.1、标题标签</h2> <blockquote> <p>h1——h6</p> <ul> <li>加了标题的文字会变的加粗，字号也会以此变大</li> <li>一个标题独占一行</li> </ul> </blockquote> <h2 id="22段落标签">2.2、段落标签</h2> <blockquote> <ul> <li>文本在一个段落这种会根据浏览器窗口的大小进行自动换行</li> <li>段落和段落之间保有空隙</li> </ul> </blockquote> <pre><code class="language-html"><p> 段落标签 </p> </code></pre> <h2 id="23换行标签">2.3、换行标签</h2> <blockquote> <ul> <li><code><br /</code>>（<br<code>></code>）是个单标签</li> <li><code><br /></code> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距</li> </ul> </blockquote> <h2 id="24文本格式标签">2.4、文本格式标签</h2> <p>为文字设置粗细、斜体、下划线等效果</p> <table> <thead> <tr> <th>语义</th> <th>标签</th> </tr> </thead> <tbody> <tr> <td>加粗</td> <td><code><strong></stroung></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 id="25媒体标签">2.5、媒体标签</h2> <h3 id="251图片标签是单标签">2.5.1、图片标签是单标签</h3> <p>代码：</p> <pre><code class="language-html"><img src="" alt=""> </code></pre> <p>场景：在网页显示图片</p> <p>属性名：src</p> <ul> <li>图片的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 id="252路径">2.5.2、路径</h3> <h3 id="253音频标签">2.5.3音频标签</h3> <pre><code class="language-html"><audio src="URL路径" controls muted></audio> </code></pre> <p>属性：controls</p> <p>属性：muted</p> <ul> <li>禁音</li> </ul> <h3 id="254视频标签">2.5.4、视频标签</h3> <pre><code class="language-html"><video src="url路径" controls="controls" autoplay="" muted> </video> </code></pre> <h2 id="26链接标签">2.6、链接标签</h2> <pre><code class="language-html"><a href="url路径" target="目标新窗口的弹出方式-blank"></a> </code></pre> <h2 id="2盒子标签">2.盒子标签</h2> <blockquote> <p><code><div></div></code>:一行只能放一个大盒子</p> <p><code><span></span></code>：</p> </blockquote> <h1 id="表格">表格</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 id="表格空间">表格空间</h2> <p>属性：<code>cellspacing</code></p> <blockquote> <p>定义表格单元格之间的空间</p> </blockquote> <p>属性：<code>cellpadding</code></p> <blockquote> <p>表示单元格边框与单元格内容之间的距离</p> </blockquote> <h2 id="合并单元格">合并单元格</h2> <p>属性：<code>colspan</code></p> <ul> <li>如果要将两个或多个列合并为一个列</li> </ul> <p>属性：<code>rowspan</code></p> <ul> <li>如果要合并两行或更多行</li> </ul> <h1 id="表单">表单</h1> <p>HTML 表单用于收集不同类型的用户输入。</p> <h2 id="form表单域">form表单域</h2> <pre><code class="language-html">基本语法 <form action="url地址" enctype="multipart/form-data" method="post">  </form> </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 id="input标签">input标签</h2> <p>基本语法：</p> <pre><code class="language-html"><input name="" type="text" maxlength="设置文本框最多可以输入的字符串" size="定义文本框的长度，单位时一字符" value="定义文本框默认值，也就是文本框内的文字" readonil/> <input name="" type="password" maxlength="" size=""> </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 class="language-html"> <form action=""> <input type="checkbox" name="num">1 <input type="checkbox" name="num">2 <input type="checkbox" name="num">3 </form> </code></pre> </li> </ol> <p><img src="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 class="language-html"> <form action=""> <input type="radio" name="num">1 <input type="radio" name="num">2 <input type="radio" name="num">3 </form> </code></pre> <p><img src="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 class="language-html"> <form action=""> 上传文件 <input type="file" name="num"> </form> </code></pre> <p><img src="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 id="下拉表单元素">下拉表单元素</h2> <p>属性：select</p> <pre><code class="language-html">选择时间为 <select name="" id=""> <option value="1">1</option> <option value="2">2</option> <option value="1">1</option> <option value="2">2</option> </select> </code></pre> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235154467.png" alt="image-20230309235154467" loading="lazy"></p> <h2 id="optgrou标签分组">optgrou标签分组</h2> <p>属性名：label</p> <p>属性值：表示分组名</p> <pre><code class="language-html"> <form action="form.php" method="post"> <select name="city"> <optgroup label="河南省"> <option value="1" title="郑州">郑州</option> <option value="2" selected="selected">新乡</option> <option value="3">驻马店</option> </optgroup> <optgroup label="北京市"> <option>海淀区</option> <option>朝阳区</option> </optgroup> </select> </code></pre> <p><img src="C:%5CUsers%5C86152%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230309235421044.png" alt="image-20230309235421044" loading="lazy"></p> <h2 id="文本域">文本域</h2> <pre><code class="language-html"> <textarea rows="3" cols="20"> 文本内容 </textarea> </code></pre> <p><img src="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>

热门相关：地球第一剑霸皇纪大神你人设崩了我不喜欢年轻的男人2 薄先生，情不由己