HTML笔记( 一)

 一、图像标签

     1、<img  src = "图像文件名"/  title = "  "  alt = "  "  width = "  " >  注意： src必须写

    alt ：图片显示不出来的时候 显示的文字

    title：提示文本， 鼠标放到图像上显示的文字

     

        (!注意 属性标签要放在 src后面）

       2.名词：

      根目录 ：文件夹打开第一个界面

      相对路径 ：相对于文件

      上一级目录： ../访问  <img src =“../imagine / yjl.jpg”>

      下一级目标 :  / 访问  < img src = "imagine / yjl.jpg">  

       访问网络上的绝对路径图片：

        1、复制网络上的绝对路径 地址

        2、< img stc = " http:// 等等等一些"/> 即可显示网络上的图片

二、超链接标签（重点）

        <a href = " 跳转目标"  target = “ 目标窗口的弹出方式 ”>文本或图像</a>

   

 

 

        （1） 外部链接 : 访问外部的链接

               <h4>1.外部链接 </h4>

               <a href = " http://www.qq.com" target  = "_self"> 腾讯</a>  (注意默认 target = "_self" 用当前窗口打开 _blank 为新窗口打开)

        （2） 内部链接： 访问文件内部的链接

             <a href = "内部链接文件名.HTML">内部链接</a>

           (3) 空连接 ：没做好的链接

               <a href ="#">空连接名</a>

            (4) 下载链接： 地址链接为  文件.exe 或者是.zip等

           <a href ="img.zip">
            (5)网页元素的链接：在网页中各种网页元素，如文本，图像，表格，音频，视频等可以添加超链接

            例如在图片上加入链接： <a href ="www.baidu.com"><img src = "yjl.jpg"/ ></a>

          （6）锚点链接 ：快速定位到页面中的某个位置

            链接文本的属性添加： <a href  = “#two ”>  第二集 </a>

             目标位置标签，添加id属性 =,如<h3 id = "two">第二集介绍</h3>

  三、注释添加及特殊字符：

       （1）注释：< ！--注释内容 -->   或者 快捷键 ctrl + /

       （2）特殊字符 ：  &nbsp； 表示空格

     

四、表格标签 ：用来展示数据

       （1）<table> //表格

                     <tr> //行  <td> //单元格</td>  </tr>

                     <tr>      <td> //单元格   </td>  </tr>

         (2)表头单元格  将<td> 换为<th> 加粗并居中显示

         (3)表格属性 （不常用） <table align=" center " cellspacing = "0">

 

 

        (4) 可以设置<thead> </thead>  可以包含头部区域  <tbody> </tbody>包含主体区域

        (5)合并单元格 跨行: rowspan  跨列： colspan

五、列表：布局（重点）

     （1）无序列表  <ul>只能放<li>   <li>里面方式什么都可以

                <ul>

                       <li> 列表项一</li>

                       <li> 列表项二</li>

                       <li> 列表项三</li>

           <ul>

        (2)<ol>  有序列表 :自动生成1.2.3.4

           <ol>

                  <li>   </li>

                   <li>  </li>

                   <li>  </li>

              </ol>   

       （3）自定义列表（重点）<dl>

        <dl>

               <dt>小标题

                     <dd>小一

                     <dd>小二

                     <dd>小三

               </dt>

        <dl>      

 六、表单  都要在 <form> </form>中

      （1）组成表单域，表单控件（表单元素） ，提示信息

   （2）<form> 表单域 将内容提交给服务器，后台<form action ="url地址" method ="提交方式" name ="name1名字">

      （3）表单元素

        1、输入< input type=“text”  name =“ ”  id>

 

 

 

 

    (4) label 标签 <label for=“txt”> 账号：</label> <input type="number" id="txt" >  for 与 id 进行匹配

    (5)下拉标签 <select>

                       <option> 山东 </option>

                        <option> 上海 </option>

                       <option> 北京</option>

                     </select>

  (6)文本域标签<textarea> 表单元素

 

<textarea rows=100 cols=50>

                        </textarea>

最后：学会查阅文档

 一、百度 www.baidu.com

二、w3c:www.w3school.com.cn/

三、MDN：https://developer.mozilla.org/zh-CN/

完结撒花！告一段落……