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. 合并单元格的步骤是?
    1.先判断是跨行(rowspan)还是跨列(colspan)
    2.把属性名和合并的行数写在] z ? E O w %第一个要G ) ] _ u w = C合并的单元格上
    3.把多余的单元格注释掉
  2. table布局的缺点是?
    a.太深的嵌套,比如table> tr> td&E M + #gt;h3,2 S L ! I ? nB @ 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 -->

发表回复

您的电子邮箱地址不会被公开。