web第二天

一，文件的命名规范

　　小写英文字母，数字，下划线的组合，开头必须是英文。

二，文件的注释

　　<!---注释的内容--->

　　注释的代码，只有在文件照片中看得到，但是浏览器上不会显示。

　　用途1：可以将暂时不用的代码进行注释，方便以后使用。2：可以用于代码信息提示。

　　快捷键：

　　　　1：ctrl+/  将光标置于行内按ctrl+/可以注释该行代码。

　　　　2：shift+alt+a  选中需要注释的代码后按shift+alt+a注释改代码

三，HTML语义化

　　所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

　　好处：

　　　　1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。

　　　　2. 有利于SEO，让搜索引擎爬虫更好的理解网页。

　　　　3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。

　　　　4. 便于团队开发与维护。

四，常见的语义化HTML标签

　　1，标题标签

　　　　<h1></h1>   <h2></h2>......<h6></h6>

　　　　h1是网页中最重要的标题标签，只能有一个，h5，h6一般不怎么用

　　2，段落标签

　　　　<p></p>:表示段落。

　　3，文本修饰标签

　　　　<strong></strong> : 强调标签，可以给文本加粗。

　　　　<em></em> : 强调标签，可以给文本斜体。(没有strong强调的那么强烈)

　　　　<sub>,<sup> : 下标文本，上标文本

　　　　<del><ins> : 删除文本，插入文本

 <!-- 勾股定理 -->

    a²+b²=c²

<!-- 化学式水分子 -->

    <p>H₂O</p>

<!-- del ins -->

    <p>促销  <del>原价：300</del>  <ins>现价：100</ins></p>

　　4，<br>与<hr>

　　　　<br> : 单标签，让文本换行

　　　　<hr>：单标签，让文本添加下划线

　　5，图片标签

　　　　<img>：单标签

　　　　　　src=“” ：图片的链接地址

　　　　　　alt=“” ： 图片加载出错的时候显示的文字 

　　6，超链接

　　　　<a></a> : 双标签

　　　　　　href=“” 链接地址

　　　　　　target=“” 新窗口打开的方式，默认为当前窗口-self ，新窗口打开-blank。

　　　　　　<base target=“-blank”>  设置所有的a链接的打开方式。

　　7，锚点

　　　　使用锚点实现在当前页面跳转的两种方式。

　　　　<a href="#html"></a>

　　　　<p id="html"></p>

　　　　

　　　　<a href="#css"></a>

　　　　<a name="css"></a>

五，相对地址与绝对地址

　　相对路径：针对当前文件进入路径的引入方式。

　　　　在同一目录下：./...

　　　　下一个目录下：./img/pic/...

　　　　在上一个目录下： ../img/...

　　绝对路径：与当前文件无关，一般为文件保存地址。

六，列表标签

　　1，无序列表：

　　　　<ul></ul> : 列表最外层的容器

　　　　<li></li> ： 列表的子项

　　　　<ul>

       　　　　 <li></li>

       　　　　 <li></li>

        　　　　<li></li>

　　　　</ul>

　　　　注意 ： ul与li之间不能添加其他标签。

　　　　快捷键 ：ul>li*3

　　2，有序列表：

　　　　<ol></ol>

　　　　<li></li>

　　3，定义列表：

　　　　带有描述性标题的列表

　　　　<dl>

　　　　　　<dt></dt> : 描述标题

　　　　　　<dd></dd> : 描述内容

　　　　</dl>

七，表格

　　<table>：表格的最外层容器

　　<tr> ： 定义表格行

　　<th>： 定义表头

　　<td>： 定义表格单元

　　<caption>：定义表格标题    

　　<border> : 给表格添加边框            

     

      语义化标签：<tHead>、<tBody>、<tFood>

 

　　表格的属性

　　border ： 表格边框

　　cellpadding ： 单元格内的空间

　　cellspacing ： 单元格之间的空间

　　rowspan ： 合并行

　　colspan ： 合并列

　　align ： 左右对齐方式

　　valign ：上下对齐方式

　　col：设置表格的列的属性（行在tr里设置）

 

 

　　实例 ： 使用表格制作一份个人简历表格

<table border="1" cellspacing="0" cellpadding="0">

        <col width="100px">

        <col width="100px">

        <col width="100px">

        <col width="100px">

        <col width="100px">

        <col width="100px">

        <col width="100px">

        <col width="100px">

        <tr height="40px" align="center" >

            <td colspan="8">H5-2002学员介绍</td>

        </tr>

        <tr align="center">

            <td>您的大名</td>

            <td colspan="2"></td>

            <td>年龄</td>

            <td colspan="2"></td>

            <td colspan="2" rowspan="5"></td>

        </tr>

        <tr align="center">

            <td>专业</td>

            <td colspan="2"></td>

            <td>是否毕业</td>

            <td colspan="2"></td>

        </tr>

        <tr align="center">

            <td>大学名称</td>

            <td colspan="5"></td>

        </tr>

        <tr align="center">

            <td>从事过工作</td>

            <td colspan="5"></td>

        </tr>

        <tr align="center">

            <td>h5基础程度</td>

            <td colspan="3"></td>

            <td colspan="2"></td>

        </tr>

        <tr align="center">

            <td>自我性格描述</td>

            <td colspan="7"></td>

        </tr>

        <tr height="80" align="center">

            <td rowspan="2">简述<br>1.目标规划<br>2.对H5疑问<br>3.建议</td>

            <td rowspan="2" colspan="3"></td>

            <td colspan="4"></td>

        </tr>

        <tr height="80" align="center">

            <td colspan="4"></td>

        </tr>

        <tr align="center">

            <td colspan="8" >欢迎来到H5-2002，前端值得你拥有</td>

        </tr>

    </table>