学习日记50--html学习

  1. CS架构:Client/Server架构,即客户端/服务器架构。是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,需要安装客户端才可进行管理操作
  2. BS架构:Browser/Server架构,客户端基本上没有专门的应用程序,应用程序基本上都在服务器端。由于 客户端没有程序,应用程序的升级和维护都可以在服务器端完成,升级维护方便。
  3. html规范
    1. 所有的标签必须小写
    2. 所有的属性必须用双引号括起来
    3. 所有标签必须闭合
    4. img必须要加alt属性(对图片的描述)
  4. html块
    1、div标签 块元素,表示一块内容,没有具体的语义。
    2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。
  5. 含样式和语义的标签
    1、em标签 行内元素,表示语气中的强调词,效果—(斜体)
    2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇,效果—(斜体)
    3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名,效果—(加粗)
    4、strong标签 行内元素,表示非常重要的内容,效果—(加粗)
  6. 语义化的标签
    语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。
  7. 插入图片
    <img src=”images/pic.jpg” alt=”产品图片” / >
    “ ./ ” 表示当前文件所在目录下
    “ ../ ” 表示当前文件所在目录下的上一级目录
  8. 插入链接
    <a>标签可以在网页上定义一个链接地址,通过href属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。
    <a href=”链接地址” title=“链接上的提示文字” >文字 </a> ——–文字链接网址
    <a href=”链接地址” title=“链接上的提示文字” ><img src=”xxx.jpg alt=”xxx”/> </a>——–图片链接网址
    <a href=”#”>文字 </a> ——— # 表示链接到页面顶部
  9. <a href=”javascript:;”>文字 </a> ——— js语句为空表示链接不做任何事
  10. 定义页面内部跳转
    设置锚点—>设置链接
    <h3 id=”maodian”>标题3</h3> — 设置标题3为锚点
    <a href=”#maodian”>跳转到锚点</a> —设置链接跳至锚点
  11. 新建窗口打开链接
    <a href=”链接地址” title=“链接上的提示文字” target=”_blank”>文字 </a> ——–文字链接网址
  12. 有序列表,每条项目上会按1、2、3…编号

    <ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
    </ol>

    在sublime中emmet插件的快捷键是:ol>li*3+Tab
  13. 无序列表,显示小圆点

    <ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
    </ul>

    在sublime中emmet插件的快捷键是:ul>li*3+Tab
  14. 带链接的无序列表

    <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    </ul>

    快捷键:ul>(li>a)*3+Tab,
    同理,div>div*3+Tab , > 表示嵌套
  15. 注释的快捷键: ctrl + /
  16. ★ 按住ctrl,点击其他位置,可以产生多个光标,实现同步修改
  17. 定义列表,定义–解答 样式

    <dl>
    <dt>1</dt>
    <dd>1</dd>
    <dt>2</dt>
    <dd>2</dd>
    <dt>3</dt>
    <dd>3</dd>
    </dl>

    快捷键:dl>(dt+dd)*3 + Tab
  18. html表格

    1. 创建主体
      快捷键:table>(tr>td*5)*6 + Tab
    2. 定义表格尺寸,合并单元格

      // <th>:定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。
      <table border="1" width="600" height="300">
          <tr>
              <th colspan="5" align="center">基本情况</th>
          </tr>
          <tr>
              <td width="18%" align="center">姓名</td>
              <td width="18%"></td>
              <td width="18%" align="center">性别</td>
              <td></td>
              <td rowspan="5" width="28%"><img res="xxx.png" alt="xxx"></td>
          </tr>
          <tr>
              <td align="center">民族</td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td align="center">政治面貌</td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td align="center">籍贯</td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td align="center">电子邮箱</td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
      </table>
      
    3. 传统表格布局

      1. cellpadding 定义单元格内内容与边框的距离
      2. cellspacing 定义单元格与单元格之间的距离
      3. align和valign设置的是自己相对于父级的对齐方式,valign只有<td>里面有
      4. 传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:
        1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0
        2、★单元格里面嵌套表格
        3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
        4、通过属性或者css样式设置单元格中元素的样式
  19. 表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="http://www.baidu.com"> <!--数据提交位置-->
            <div>
                <label>用户名:</label>
                <input type="text" name="username"> 
    
            </div>
            <br>
            <div><!--单行文本-->
                <label>密 &nbsp;&nbsp;码:</label>
                <input type="password" name="pwd">
            </div>
            <br>
            <div><!--单选-->
                <label>性别:</label>  
                <input type="radio" name="gender"><!--名称写一样,可以保证单选-->
                <input type="radio" name="gender"></div>
            <br>
            <div><!--多选-->
                <label>爱好:</label>  
                <input type="checkbox" name="like"> 学习
                <input type="radio" name="like"> 上网
            </div>
            <br>
    
            <div><!--上传文件-->
                <label>照片:</label>
                <input type="file" name="">
    
            </div>
            <br>
    
            <div><!--多行文本-->
                <label>个人描述:</label>
                <textarea></textarea>
            </div>
            <br>
    
            <div><!--下拉菜单-->
                <label>籍贯:</label>  
                <select>
                    <option>北京</option>
                    <option>上海</option>
                    <option>杭州</option>
                    <option>深圳</option>
                </select>
            </div>
            <br><!--提交按钮-->
            <input type="submit" name="" value="提交">
    
        </form>
    
    </body>
    </html>
  20. 内嵌框架

    <body>
    <a href="http://www.baidu.com" target="myframe">baidu</a>
    <a href="http://www.qq.com" target="myframe">tencent</a>
    <a href="http://www.inspur.com" target="myframe">inspur</a>
    <iframe src="http://www.baidu.com" width="900" height="500" 
    frameborder="no" scrolling="no" name="myframe"></iframe>
    </body>

    可以实现,在页面内嵌一个页面,并设置内嵌页面的高度,边框和滚动条,还可以创建超链接

  21. 一个不错的学习资料:https://codeme.gitbooks.io/easy-web-code-book/

没有更多推荐了,返回首页