HTML5

要成为六边形战士 發表於 2020-3-10 16:32:00

<h2 id="html">HTML</h2>
<h3 id="1html与xhtml区别">1.HTML与xhtml区别</h3>
<ul>
<li>DOCTYPE文档及编码</li>
<li>元素大小写</li>
<li>属性布尔值</li>
<li>属性引号</li>
<li>图片的alt属性</li>
<li>单标签写法</li>
<li>双标签闭合</li>
</ul>
<h3 id="2strong与bem与i">2.strong与b、em与i</h3>
<ul>
<li>表现形态都是文本加粗和文本斜体</li>
<li>区别：是否具备语义化（strong和em表示强调）</li>
</ul>
<h3 id="3引用标签">3.引用标签</h3>
<ul>
<li>blockquote:引用大段的段落解释</li>
<li>q:引用小段的短语解释</li>
<li>abbr:缩写或首字母缩略词</li>
<li>address:引用文档地址信息</li>
<li>cite:引用著作的标题</li>
</ul>
<h3 id="4iframe标签">4.iframe标签</h3>
<ul>
<li>可以引入其他的html到当前html中显示</li>
<li>主要是利用iframe属性进行样式的调节</li>
</ul>
<h3 id="5br与wbr">5.br与wbr</h3>
<ul>
<li>br就是换行，wbr就是软换行(比较长的单词)</li>
</ul>
<h3 id="6pre与code">6.pre与code</h3>
<ul>
<li>
<p>针对网页中的程序代码显示效果</p>
</li>
<li>
<pre><code class="language-html"><pre>
<code>
代码段,如 &lt;div&gt;
</code>
</pre>
</code></pre>
</li>
</ul>
<h3 id="7map与area">7.map与area</h3>
<ul>
<li>
<p>给特殊图形添加链接，area能添加热区的形状：矩形、圆形、多边形</p>
</li>
<li>
<pre><code class="language-html"><img src="" alt="" usemap="#star">
<map name="">
<area shape="rect" coords="205 83 386 173" href="" alt="">
//矩形左上角点坐标+右下角点坐标
<area shape="circ" coords="300 130 50" href="" alt="">
//圆形圆心坐标+半径
<area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">
//多边形连续点坐标首尾相连
</map>
</code></pre>
</li>
</ul>
<h3 id="8embed与object">8.embed与object</h3>
<ul>
<li>能嵌入一些多媒体，如Flash动画，插件等，基本没太多区别，主要为了兼容不同浏览器</li>
<li>object 元素需要配合param元素一起完成</li>
</ul>
<h3 id="9audio与video">9.audio与video</h3>
<ul>
<li>
<p>引入音频与视频的文件</p>
</li>
<li>
<pre><code class="language-html"><audio src=".mp3" controls loop autoplay></audio>
//controls显示控件(默认不显示) loop循环播放 autoplay自动播放
<video src=".mp4" controls></video>
<video>
<source src=".ogv"></source>
<source src=".mp4"></source>
</video>
//备选操作(如果浏览器不支持可以备选)
</code></pre>
</li>
</ul>
<h3 id="10文字注解">10.文字注解</h3>
<ul>
<li>
<p>ruby、rt组合</p>
</li>
<li>
<pre><code class="language-html"><ruby>
寒<rt>hán</rt>
</ruby>
</code></pre>
</li>
<li>
<p>bdo</p>
</li>
<li>
<pre><code class="language-html"><p>
<bdo dir="ltr"></bdo>//rtl 反向
</p>
</code></pre>
</li>
</ul>
<h3 id="11link扩展">11.link扩展</h3>
<ul>
<li>
<p>添加网址标题栏前的小图标</p>
</li>
<li>
<pre><code class="language-html"><link rel="icon" type="/image/x-icon" href="http:''www.mobiletrain.org/favicon.ico">
</code></pre>
</li>
</ul>
<h3 id="12meta扩展">12.meta扩展</h3>
<ul>
<li>meta添加辅助信息</li>
<li>name http-equiv</li>
</ul>
<h3 id="13html5新语义化标签">13.html5新语义化标签</h3>
<ul>
<li>
<p>header：页面</p>
</li>
<li>
<p>footer：页脚</p>
</li>
<li>
<p>main：主体</p>
</li>
<li>
<p>hgroup：标题组合</p>
</li>
<li>
<p>nav：导航</p>
</li>
<li>
<p>注：header、footer、main在一个网页中只能出现一次</p>
</li>
<li>
<p>article：独立的内容</p>
</li>
<li>
<p>aside：辅助信息的内容</p>
</li>
<li>
<p>section：区域</p>
</li>
<li>
<p>figure：描述图像或视频</p>
</li>
<li>
<p>figcaption：描述图像或视频的标题部分</p>
</li>
<li>
<p>datalist：选项列表</p>
</li>
<li>
<p>details/summary：文档细节/文档标题</p>
</li>
<li>
<p>progress/meter：定义进度条/定义度量范围</p>
</li>
<li>
<p>time：定义日期或时间</p>
</li>
<li>
<p>mark：带有记号的文本</p>
</li>
<li>
<pre><code class="language-html"><body>
<header>
   <hgroup>
         <h1>主标题</h1>
         <h2>副标题</h2>
   </hgroup>
   <nav>
         <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>关于</li>
         </ul>
   </nav>
</header>
<main>
   <article>
         <section>
            <ul>
               <li>
                     <figure>
                        <img src="" alt="">
                        <figcaption></figcaption>
                     </figure>
               </li>
            </ul>
         </section>
         <section>
            <input type="text" list="elems">
            <datalist id="elems">
               <option value="a"></option>
               <option value="b"></option>
               <option value="c"></option>
               <option value="d"></option>
               <option value="e"></option>
               <option value="f"></option>
               <option value="g"></option>
            </datalist>
            <details>
               <summary>HTML</summary> //添加open属性，可以默认展开
               <p>超文本标记语言</p>
            </details>
            <progress //进度
            min="0" max="10" value="8">
            </progress>
            <meter //度量
            min="0" max="100" value="35" low="10" high="60">
               //low 最小值 high 最大值
            </meter>
         </section>
         <section></section>
   </article>
   <aside>

   </aside>
</main>
</body>
</code></pre>
</li>
</ul>
<h3 id="14html表格">14.html表格</h3>
<ul>
<li>添加单线：border-collapse：collapse</li>
<li>隐藏空单元：empty：hide</li>
<li>斜线分类：border/rotate</li>
<li>列分组：colgroup及col标签定义列属性</li>
<li>单元格边距：cellpadding</li>
<li>单元格间距：cellspacing</li>
<li>表格标题：caption标签</li>
<li>thead、tbody、tfoot</li>
</ul>
<h3 id="15表单扩展">15.表单扩展</h3>
<ul>
<li>美化表单控件 1. :checked 2. position + opacity</li>
<li>新的input控件
<ul>
<li>email：电子邮件地址输入框</li>
<li>url：网址输入框</li>
<li>number：数值输入框</li>
<li>range：滑动条</li>
<li>date/month/week：日期控件</li>
<li>search：搜索框</li>
<li>color：颜色控件</li>
<li>tel：电话号码输入框(在移动端默认调起数字键盘)</li>
<li>time：时间控件</li>
</ul>
</li>
<li>新的表单属性
<ul>
<li>autocomplete：自动完成    默认 on/off</li>
<li>autofocus：获取焦点</li>
<li>required：不能为空</li>
<li>pattern：正则验证</li>
<li>method：数据传输方式</li>
<li>enctype：数据传输类型</li>
<li>name/value：数据的键值对</li>
</ul>
</li>
<li>扩展标签
<ul>
<li>fieldset：表单内元素分组</li>
<li>legend：为fieldset元素定义标题</li>
<li>optgroup：定义选项组</li>
</ul>
</li>
</ul>
<h3 id="bfc规范">BFC规范</h3>
<ul>
<li>触发BFC规范的容器，可以形成一个独立的容器，不受到外界的影响，从而解决一些布局问题</li>
<li>触发的样式
<ul>
<li>float(除none以外的值)</li>
<li>position(absolute,fixed)</li>
<li>display(inline-block,table-cells,flex)</li>
<li>overflow(除了visible以外的值，hidden、auto、scroll)</li>
</ul>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/oreic/p/12456527.html

頁: [1]

琼殿技术论坛's Archiver

HTML5