zoukankan      html  css  js  c++  java
  • html基础与入门

    html就是指一个html文件,它是由各种标签组成的
    html分为 < !DOCTYPE html > 和 Head 和 Body

    1. Head title+meta+link+style
    2. Body 标签元素+script

    标签元素在js里叫做节点dom-node,节点,标签,元素都是他的叫法

    最常用的标签元素当然是 div
    其次还有 a,p,span,img,table标签,表单标签,按钮button

    1. table标签有table,thead,tbody,tr,th,td
    2. 表单标签有form,input(输入框,密码框,单选,多选,下拉框,textarea,提交submit)

    标签有属性和方法的触发条件

    标签有特有的属性attr,每个属性有特定的功能,是html标签特有的
    比如a标签和link的href,a标签还有一个target,script和img的src,表单标签的value,disabled,单选多选的checked,select的selected 等等等

    标签还可以自定义属性,就是在标签里写什么属性都行,不影响标签的使用,常用来记录数据,比如this-id="",data-id="",aa="",bb=""....但是最能被理解的,不会被下一个维护者骂娘的肯定是data-xx=""

    怎么取得自定义属性,或者自带属性的值在js里讲

    标签还能赋予方法,比如给div的点击条件绑定方法

    <div onclick="say()">点击我执行js的say方法</div>
    

    还可以直接写行内方法

    <div onclick="alert(1111)">点击我执行alert方法</div>
    

    这个触发条件是标签自带的,给没有这个触发条件的标签添加方法是不会执行的,比如单选,多选,下拉框,文件选择框有onchange触发条件,form有submit触发条件,输入框有光标移入移出键盘按下触发条件,但是div没有,所以给一个div添加onchange去执行say的时候,say是怎么都不会执行的

    标签元素分为块级元素,行内元素

    1. 块级元素就是宽度自动就是占满父元素的,而高度是由子元素撑开的,可以通过css改变宽高,跟另一个元素一起会把自己占一行,把自己换行,把下一个挤换行,天生的块级元素有div,p,以及html5的语义化标签
    2. 行内元素就是一行可以有多个元素的,他们的宽和高都是由子元素撑开的,设置宽高是不生效的,天生的行内元素有span,button,表单标签,img
      而任何一个标签元素都是可以用css的display改变,只要记住他们的特点就行

    讲讲标签的理解

    1. 讲讲a标签,a标签是用来跳转连接的,如果不是就别用;
    2. 讲讲img标签,img标签在足够大的区域里,会显示自身图片的原始大小,只把宽度设置为100%,会占满宽度的区域,高度由自身比例改变,也可以只设置高度,让宽度按图片比例改变,也可以同时设置宽度和高度,但是会导致图片变形,所以一般只设置宽度为100%,通过改变img的父标签的宽度控制img标签的宽度;
    3. 讲讲一些废弃的标签,font,color,time,这些标签别用,虽然很语义化但是别用,不解释;
    4. 讲讲form,form是很老的提交数据去到服务器的方式,现在除了提交文件根本用不到了,提交from的方式有【在子元素只有一个输入框时按下回车键,按下form标签里的submit标签或者button标签】,而且form提交会导致页面跳转,当然阻止form跳转的方式也是有的,阻止form提交会在js的上传文件的几种方式里讲,我想说的是除了文件上传之外别用到form,别用form,别用form;
    5. 谈谈input[type=submit]和button,这两个标签平时能当按钮使用,在form标签里触发提交事件,而且这两个标签自带样式,很丑的样式,还得手动去去除,所以能别用就别用,用span去代替他们的使用

    html其实没什么好讲的,因为入门只有div

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>第一个页面</title>
      <link rel="stylesheet" href="">
    </head>
    <body>
      <div>
        <p>Hello Word</p>
        <img src="" alt="">
      </div>
      <script type="text/javascript">
    
      </script>
    </body>
    </html>
    
  • 相关阅读:
    Java并发(三):重排序
    Java并发(六):volatile的实现原理
    Java并发(五):synchronized实现原理
    Java并发(一):多线程干货总结
    JDK源码学习笔记——String
    Java并发(二):Java内存模型
    JVM命令-java服务器故障排查
    vue之数据请求方式
    vue之菜单添加选择,知识:数据双向绑定、循环渲染、事件点击以及按键的点击
    Vue【第3章】:Vue常用指令二:事件和方法
  • 原文地址:https://www.cnblogs.com/pengdt/p/12037434.html
Copyright © 2011-2022 走看看