学习日记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. 插入图片
    ”产品图片”
    “ ./ ” 表示当前文件所在目录下
    “ ../ ” 表示当前文件所在目录下的上一级目录
  8. 插入链接
    标签可以在网页上定义一个链接地址,通过href属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。
    文字 ——–文字链接网址
    ”xxx”/ ——–图片链接网址
    文字 ——— # 表示链接到页面顶部
  9. 文字 ——— js语句为空表示链接不做任何事
  10. 定义页面内部跳转
    设置锚点—>设置链接

    标题3

    — 设置标题3为锚点
    跳转到锚点 —设置链接跳至锚点
  11. 新建窗口打开链接
    文字 ——–文字链接网址
  12. 有序列表,每条项目上会按1、2、3…编号


    1. 列表文字一

    2. 列表文字二

    3. 列表文字三



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


    • 列表文字一

    • 列表文字二

    • 列表文字三



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







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


    1

    1

    2

    2

    3

    3



    快捷键: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只有里面有
      4. 传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:
        1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0
        2、★单元格里面嵌套表格
        3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
        4、通过属性或者css样式设置单元格中元素的样式
  19. 表单

    
    <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>密   码: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">baidua>
    <a href="http://www.qq.com" target="myframe">tencenta>
    <a href="http://www.inspur.com" target="myframe">inspura>
    <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/

你可能感兴趣的:(日记)