HTML的主要知识点

1.web的第一门编程语言:javaScript
  html:超文本标记语言
2.html-css-js的关系
  网页三剑客:
    html: 结构  网页框架构建
    css:表现  样式设置
    js:行为   事件、动态
3.html
  生成文档结构的快捷键 !或者  html:5
  注释快捷键: ctrl+/  注释很重要!!!
4.实体
空格   大于号 > 小于号< br标签 换行 hr标签 分割
5.块级 行内
  块级元素:div p h1-h6 ul.li ol.li dl.dd.dt header footer nav article section aside
  特点:独占一行
        宽度默认100% 相对父元素而言  高度由子元素及内容区决定 
        或者css样式设置宽度
        块级可以直接设置宽高
        块级可以包含块级与行内元素
  行内元素:span img a strong...
          a:链接外部或内部网址href="相对路径./ ../  绝对路径 https//ip:端口号/项目/文件"
            锚点:定义锚点,连接锚点
            
         1.<a href="#center">到中部</a>
          2.<div id="center">找到我,中部</div>

       

            回到顶部 <a href="#"></a> 点击没反应 <a href="javascript:">点我没反应</a>
            target:定义点击后页面加载的位置 默认_self 
                                          新窗口/新标签页_blank

 img :图片
                  src:图片的路径
                  width宽 height高
                  alt:图片加载出现问题时给用户的解释内容
                  title 悬停时给图片的注释

  
1.列表元素
  无序列表 ul li  新闻/导航栏
    有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分
    <ul type="value">
      <i>展示数据 </i>
    </ul>
    disc    默认值 实心圆
    circle  空心圆
    square  实心方块


  有序列表 ol li  排名
     有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分
      <ol type="A">
       <li>展示数据</li>
      </ol>
      1   默认值。数字有序列表。(1、2、3、4)
      a   按字母顺序排列的有序列表,小写。(a、b、c、d)
      A   按字母顺序排列的有序列表,大写。(A、B、C、D)
      i   罗马字母,小写。(i, ii, iii, iv)
      I   罗马字母,大写。(I, II, III, IV)

  定义列表 dl dt dd
        给一堆数据添加列表语义,先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
        dt的含义就是用来定义列表中的标题
        dd的含义就是用来定义标题对应的描述的

  表格标签
    一对table标签就是一个表格
​    一对tr标签就是表格中的一行
​    一对td标签就是一行中的一个单元格 
    <table>
      <tr>
        <td>内容</td>
      </tr>
    </table>
    1.表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
    2.表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
    3.可以给table标签和td标签使用
    表格的宽高:默认是按照内容的尺寸来调整的
                手动改变:table的width、height
    单元格的宽高:td的width、height
    (行内样式:style="color:red" 优先级高)
    4.表格内单元格的水平,垂直对齐
      水平align: left center right
      table(表格在水平方向的对齐方式)  tr td(当前单元格内容的水平方向的对齐方式) 
      垂直 valign : top mid bottom  tr td (当前单元格中的内容在垂直方向的对齐方式) 

    5.表格外边距和内边距的属性
      cellspacing外边距就是单元格和单元格之间的距离, 为外边距默认2px
      cellpadding内边距就是单元格的边框和文字之间的间隙, 为内边距默认1px  

    6.  细线表格的制作方式:
      1.给table标签设置bgcolor="black",cellspacing = "1px"
      2.给tr标签设置bgcolor="white"

    7.合并单元格
      colspan  水平合并 <td colspan="2"></td>
      rowspan 垂直合并 <td rowspan="2"></td>

    8.form表单元素
    <form action="提交的服务器接口地址">
      <表单元素>
    </form>

    input
    明文输入框 <input type="text" >
    暗文输入框 <input type="password" >
    单选框 <input type="radio" name="xx" value="xxx" checked> checked默认选中
    互斥操作,设置相同的name
    多选框 <input type="checkbox" name="xxx" value="xxx">

    提交按钮 <input type="submit">
    作用: 将表单中已经填写好的数据, 提交到远程服务器(action:服务器地址)
    注意:需要给需要提交到服务器的表单元素添加一个name属性

    普通按钮 <input type="button" value="xxx">
    图片按钮 	<input type="image" src="">
    重置按钮 <input type="reset" value="xx">
    隐藏域 <input type="hidden" name="xx" value="xxx">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值