HTML

1.1常用编辑器

dreamweaver、sublime、webstorm、Hbuilder、vscode

1.2 浏览器内核

分为渲染引擎和JS引擎

渲染引擎：它负责取得网页的内容（HTML、X* 6 j a C hM9 / I v E Q y , iL、图像等等）、整理讯息（例如加入CSW T p + | ` =Sy f / 等），以及计算网页的显示方式，然后会输出至显示器或打印机

JS引擎：JS引擎则是解析Javascript语言，执行javascript语} 7 ) 5 \言来实现网页的动态效果

IE: Trident
Firefox: Gecko
Chrome: Webkit 到 BlinkJ D 1 \ d r A , D
SaT ; ( a N U S Lfari: Webkit
Opera: Presto 到 Webkit 到 Blink

1.3 标签

<!-- 四类八种 -->
<b>粗体</b><strong></strong>
<i>斜体</i><em></em>
<s>删除线</s><del></del>
<u>下划线</uf _ V><ins></in? | # ` n w ` - Os>
<img src="https://www.cnblogs.com/recreyed/p/%E5%9Bd E h O ] Y [ V%BE%E7%89%87%E8%B7%AF%E5%BE%84" alt="出错显示信息">
<a href="https://www- ! [.cnblogs.com/recrez @ 1 , Kyed/p/%E8%B7%B3%E= ~ b *8%BD%AC%E9%93%BE%E6%8E%A5" target="6 L { a d c 5 D目标窗口的弹出方式">文本或图像</a>
<!-- 锚点定位 -->
<a href="#one"></a>
<p id="one"&gX t o E . ` H O kt;段落</p>
<ul>
<li></li>
<li>I S X W i f * e;</li>
</ul>
<ol>
<li></li>
<li></li>
&l_ _ V { L Z ut;/ol>
<y ) b O ? o;!-- 自定义列表 -->
<dl>c T l t , [ O d
<dt></dt>
<dt></dt>
</dl>

1.4 表格

<table align="center" border="1" cellspaci^ J _ / e 0 @ Yng="0" cellpadding="10" >
<caption>年中工资报表</cap| x \ Ttion>
<thead>
<tr>
<tc ) z , u x T r 7h colO R 5span="2">区域办事处</th>
<!-- <th>岗位</thi . ; k Y | = M> -->
</tr&g[ _ a = P 4 s j &t;
</thead>
<tbody>
&l4 $ ^t;tr>
<td rowspan="2">abch k P p k i</td>
<td>abc</td>
</tr>
<tr>
<H 6 V k U;!-- <td>abc</td> -->
<td>abc</td>
</tr>
</tbody>
</table>

合并单元格的步骤是？
1.先判断是跨行(rowspan)还是跨列(colspan)
2.把属性名和合并的行数写在] z ? E O w %第一个要G ) ] _ u w = C合并的单元格上
3.把多余的单元格注释掉
table布局的缺点是？
a.太深的嵌套,比如table> tr> td&E M + #gt;h3,2 S L ! I ? n会B @ M F = `导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗J – @ I R G /余代码量。
b.灵活性差,比如要将tr设置bf G p 2order等q B K – : Z属性, 是不行的，得通过td
c.代码臃肿,当在t\ – x Q G w H S }ablt o x Re中套用table的时候，阅读代码会显得异常混乱
d.混乱的colspan与rowspan,用来布局时，频繁使! b y @用他们会造成整个文档] H , H D顺序混乱。
e.不够语义化

1.5 表单

<!--
action 提交的地址
methz c ]od 提交的方式
name 表单名字
-->
<form actL x ? ] e [ V t |ion="https://www.baidu.com" method="GET" name="f] g [ ]orm1">
<!--
label 标记标签 (获取焦点 label for与input iv T O 6 h u Vd)
input 控件标签 size 长度
-->
<div>
<label for="user">姓名</label>
<input type="text" id="user" value="默认值">
</div>
<!-S % 3 N 3 P- 密码框 -->
<div>
&lx e 6 s w a \ ` !t;label for="pwd">` I ! , P /;密码</label>
<input type="g ? ~password" id="pwd" size="30">
</div>
<!--
单选c c Y框，name一样具有单选效果
默认单选框内容( * # n \:
checked="checked"
checked=true
checked
-->
<div>
<input type="radio" name="sex" checked><sm q : / W | vpan>男</span>
<input type="radio" name="sex"><span\ @ Z m P T + e h>女</span>
</div>
<!-- 多选框 -->
<div>
<) ] ? \input type="checkbox" checked><span>1</sp[ ( O v S a D R aan>
<} H { * W *;input tyi x o F :pe="checkbox"&f Q h V o Kgt;<i 6 6;span>2</span>~ h g T ` \ ^;
<input tyP t c & S epe="checkbox" checked><span>3* : 3</span>
</div>
<!--
组合标签
默认选择内容，selected，同checked
-->
<div>
<span>家庭住址</span>
<select name="" id="">
<option value="">石家庄</option>k V [ G 0
<option value="" selected>迁安</option&s / ~ S + I 6 Xg, A K ) B ut;
</select>
</div>
<br>
<!-- row 长 cols宽 -->
&lw % # h u Rt;div>3 ~ J p =;
<span>多行文本框</span>
<textarea name="" id="" cols="30" rows="7"><I i 1 r O 9;/textarea>
</div>
<br>
&p j dlt;input ty; @ o F U Kpe="reset" value="重新设置">
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
</form>

1.6 HTML5

<header>头部标签</header>
<!-- 导航标签 -->
<nav>
<ul>
<li><a href="#"&\ 1 ` J a k dgt;导航标签链接1</a></li>
<liY } &><a href="#">导航标签链接2</a></li>
</ul>
</nav>
<section>小节标签</section&E \ + % H x u kgt;
<sectin h # 5on>
<!-- 侧边栏标签aside -->
<aside>
<ul>
<li>9 5 k W # 7 m j; <a href="https://www.cnblogs.co# W F V F }m/recreyed/p/\"></a>{ g = e * Y M K *; 侧边栏</li>
</ul>
</aside>
</sectioZ 5 b @ wn>
<section>
<!-- 文章标签 -->
<article></a} $ Rrticle>
<Y k q;/section>
<footer>尾部标签</foote0 C e . _ wr>
<!-- 进度条标签 -->
<progress max="600" value="100"></progress>

1.u Q g j7 HTML5-form

&+ : p P qlt;form action="#" met5 ^ N n N lhod="GET" name="form-1"&\ / ] = Agt;
<!-- h5新增选择框 -->
<span>选择</span>
<input tI $ [ # B } f ;ype="text" list="l1">
<datalist id="= v Bl1">
<option value="op3"></option>
<option value="op4"></option>
<option value="op5"></option>
</datalist>
<c 0 I k ) f , k Ybutton>& : p u j n H Oh5普通按钮</button>
<section>
<!--
placeholde[ M V M S f u %r：占位符
required：不能为空
autop | kfocus：q Y 0 i自动获取焦点
autocomplete：自动完成
-->
<label for="user">姓名</label>
<input type="text" id="user" name="user" placeholder="占位符" reqB 9 Puired autofocus autocomplete="off">
</section>
<section>
<!-- maxlength --&go ! V . zt;
<label for="pwd">密码</label>
<input type="password" id="pwd" name="pwd" placeholder="占位符" maxlength="6" minlength="3"s f g>
<( l k s 5/section2 ( ^ q ? r r>
<!-- 新增的table. * c 3 ? E属性 -->
&E o nlt;section>
<label for="">r 6 \ e 6 F b G x;邮箱</l1 9 _ c j Qabel>
<input type="email" autocompM 0 E \ 2 L Olete="off">
</section>
<sectio1 V H Q O = = ^ in>i J . Q 5 S;
<label for="">地址<[ L \ ~ n W/label>
<input typl z d i F d ? . @e="url" name="" id=""&gd ( Y Ot;
<input type="colq , - h |or">
</secti_ 9 - lon>
<section&R c I \ U r $ $ %gt;
<label for="">搜索框</label>
<input type` k R |="search" placeholder="输入搜索内容">
</section>
<section>
<z P n hlabel for="">时间</label>
<input type="time" name="" id=""><br>
<label for="">日期</label>d @ e I;
<inN n R n ;put type="date" name="" id=""><br>
<label for="">月份</label>
<f { ^ einput type="month" name="" id=""><br&{ 3 Ygt;
<label for="">周&U 1 x \ f { q s }lt;/label&B F } Q t X W 1gt;
<input type="week" name="" id="">
</section>
</form>

1.8 HTML5t | M-media

<!--
控件：ct : 9 X 1onta + C .rols
循环：loop
静音：mutedq % e s q
-->
<audio srF - . F E B & 4 mc="" controls loop="loop" muted! & _ d W - y n="muted"></audio>
<audio control9 0 w J C \ S \s>
<source src="">
</audio>
<video src="" cQ | { c Q 9 N M Vontrols loop="loop" muted="muted"  ></video>
<!L | l ! =-- video双标签，同audio -->

特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！