前端基础之html基础精华（边学边写，注意细节）

今天想写一下简单的前端知识，在学习前端的时候，有两点特别重要：

1、编写的时候没有报错，所以要特别小心，小编有的时候就是因为一个花括号要找许久bug，所以在写代码的时候一定要注意格式和代码规范。

2、命名的时候要注意语义化，不要自己命名的到后面因为太多把自己搞乱了。

以下是个人总结：

html是不区分大小写的，但建议小写，在使用标签的时候尽量使用语义化的标签
h1~h6标签是块级标签，会自动换行，并且加粗字体,h1一个页面只出现一个（这是经验）
元信息meta：

（1）网页文字和语言

http-equiv=”content-type”content=”text/html”;charset=”utf-8”（一般只写标红的就行）

（2）关键字 name=”keywords”
（3）页面说明 name=”description”
水平线<hr size=”” color=”” align=”” width=”” noshade>
特殊符号： < < &gt > © © " “
插入图片的时候最好直接指定图片原本大小，不然容易失真，在设置图片的时候，只写宽度或者高度，图片会等比例缩放
页面中的跳转：锚链接——

（1）创建跳转标记，也就是 <a name=”标记” ></a>

（2）创建链接，当前页面跳转 <a href=”#标记”></a>

（3）可以跳到其他页面的锚链接，直接在跳转页面之后接上#标记

功能性链接——邮箱

<a href=”mailto:[email protected]”>[联系我们]</a>
声明文档类型：<!Doctype html>
<del>这是一个删除线标签</del>
<ins>这是一个下划线标签</ins>
<em>这是一个斜体标签</em>
<strong>这是一个加粗标签</strong>
空链接，直接加个#号就行
超链接的优化写法：在<head></head>标签中写

<base target=”_blank”>使得每个超链接都在新窗口打开
列表

（1）自定义列表标签：（推荐都使用自定义的列表）

<dl>

<dt>小标题</dt>

<dd>解释标题</dd>

<dd>解释标题</dd>

</dl>

（2）无序列表去掉前面的符号

<ul style="list-style: none;">
			<li>我</li>
			<li>喜</li>
			<li>欢</li>
			<li>你</li>
</ul>

16.音乐标签：<embed src hidden=”true”></embed>

17.滚动：<marquee behavior direction loop width height>滚动的内容</marquee>

18.

页面布局：

（一）表格

<table border="" width="" height="" align="表格在页面中的位置" bordercolor="" cellspacing="单元格间的间距"

cellpadding="单元格里的内容与单元格边框的间距" bgcolor="" background="" summary="表格的简介文本（便于搜索引擎读懂）">

<caption>这是表格标题</caption>

<tr align="内容的对齐方式">这是表格的一行</tr>

<tr>

<td colspan="水平合并单元格数量" rowspan="垂直合并单元格数量"align="内容的对齐方式">这是一个单元格</td>

<td>这是一个单元格</td>

</tr>

</table>

注意：在表格布局中继续嵌套表格时需要使用<td>单元格，必须借助单元格嵌套表格

（二）框架（可以嵌套）

删除body

</frameset>

不用删除body，浮动框架<iframe src="" name="" frameborder="" width="" height="" align="" scrolling=""></iframe>

19.

浏览器地址栏里显示的图片

20.

seo：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名

通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，在不损害用户体验的情况下提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。

21.

表单（注意：不加form也可以用input，但是还是要加上form，因为要提交数据）

</select>月

电话：<input type="text" value="tel" name="电话" /><br />

邮箱：<input type="text" value="mail" name="邮箱" />

</fieldset>

控件链接：（实现点击文字也可以链接到控件）

</form>（所有的表单标签最好都放在最大的form标签中）

注意事项：

（1）get（不安全）：通过地址栏传递信息

post：通过处理的网页传递信息（直接在HBuilder里用浏览器打开点提交没有效果，因为测试没有这种方式，需要直接在浏览器中运行action才有用）

（2）readonly=”readonly”只读文本

（3）disabled= “disabled”未激活区域

（4）所有文本输入框的属性对密码框都有效

（5）单选框：只有把name都设成相同的时候实现单选

（6）控件新特性：<input type=”url/date/time/email/number/range”>

（7）当按钮是file类型时需要在form属性中加上enctype=" multipart/form-data "

22.

标签语义化，根据内容选择合适的标签（结构合理，有利于seo）

尽量减少使用不必要的div或者span标签

问题：

1.如何使得表格里插入的照片贴合单元格？

把照片的宽高和单元格的宽高设成一样的

2.如何实现左中右布局？

可以使用表格或者DIV（float）

3.如何使相邻表格贴合？

把两个相邻的表格border="0" cellpadding="0" cellspacing="0"都设为0

4.如何使文本域不可拉动？

textarea{resize:none;}

前端基础之html基础精华（边学边写，注意细节）

猜你喜欢