zoukankan      html  css  js  c++  java
  • html----基础

    手册:https://www.w3school.com.cn/html5/index.asp

     HTML标签:

    <strike>为文字加上一条中线</strike>
    <em>: 文字变成斜体.</em>
    2<sup>2</sup>                  #
    22
    log<sub>2<sup>2</sup></sub>    #log22
    <br>:换行.
    <hr>:水平线

    &lt; &gt;&quot;&copy;&reg; 特殊字符

    块级标签:就是独占一行,可以自行设置宽高!如:先学到的 div,p,h1-h6,ul li dl dt dd  

    内联标签:按内容占位,高度和广度是由自己的内容填充的 如: a,br,img  

    判断块级标签和内联标签的方法:

      1.是否独占一行(可以通过设置背景颜色去判断)

      2.是否可以单独为元素设置高度和宽度。

    display:inline(行内)                 强制变成行类元素(可以在一行,不可以设置宽高)
    display:block(块级)                  强制变成块级元素,独占一行
    display:inline-block(行类块)         可以在一行,又可以给每一个设置不同宽高   img  input  textarea(自带行类块)

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
    2. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
    3. li内可以包含div
    4. 块级元素与块级元素并列、内联元素与内联元素并列。

    标签嵌套问题

    p标签嵌套div标签
    <p style="background-color: blue; 100px">
      p标签
      <div style="background-color: rgba(255,46,51,0.4); 200px;height: 200px"> div标签 </div>
    </p>
    此时浏览器会解释成
    <p  style=" 100px"> p标签 </p>
      <div style=" 200px;height: 200px">
            div标签
        </div>
    <p></p> #多出一个p标签,并且之前的 p标签 和 div 标签分离
    a标签嵌套div标签
    问题不是很明显,唯一就是div标签不可以将a标签撑起(如果给a设置背景颜色,就只是a标签自己本身,给a标签设置display:block;,此时a标签的背景颜色就可以完全罩住div标签了),
    但是div标签还是a标签的子标签,可以继承a标签的一些属性(如颜色),

    img标签

    src: 要显示图片的路径.
    
    alt: 图片没有加载成功时的提示.
    
    title: 鼠标悬浮时的提示信息.
    
     图片的宽
    
    height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

    a标签

    绝对 URL - 指向另一个站点(比如 href="http://www.jd.com)
    相对 URL - 指当前站点中确切的路径(href="index.htm")
    锚 URL - 指向页面中的锚(href="#top")
    <a href="javascript:;" id="showBindEmailModal">去绑定</a>

    列表标签

    <ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
        <ul>
          <li></li>
        </ul>
    <ol>: 有序列表 <li>:列表中的每一项. <dl> 定义列表 <dt> 列表标题</dt> <dd> 列表项</dd>
    <dt>列表标题</dt>
      <dd> 列表项</dd>
    </dl>

    表格标签

    <table border="1">
             <tr>
                    <th>标题</th>
                    <th>标题</th>
             </tr>
    
             <tr>
                    <td>内容</td>
                    <td>内容</td>
             </tr>
    </table>

    <tr>: 表行
    <th>: 表头
    <td>:表数据
    属性:
        border: 表格边框.
        cellpadding: 内边距   汉字和内边框的距离
        cellspacing: 外边距. 外边框和内边框之间的距离
         像素 百分比.(最好通过css来设置长宽)
        rowspan:  单元格竖跨多少行
        colspan:  单元格横跨多少列(即合并单元格)   
       bgcolor:表格的背景颜色    background:表格的背景图片    style="text-align: center" 文字居中 

    表单元素

    type:        text 文本输入框
    
                 password 密码输入框
    
                 radio 单选框
    
                 checkbox 多选框  
    
                 submit 提交按钮            
    
                 button 按钮(需要配合js使用.) button和submit的区别?
    
                 file 提交文件:form表单需要加上属性enctype="multipart/form-data" 
    value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:
    
                    type="button", "reset", "submit" - 定义按钮上的显示的文本
                     
                    type="text", "password", "hidden" - 定义输入字段的初始值
                     
                    type="checkbox", "radio", "image" - 定义与输入相关联的值
    checked:  radio 和 checkbox 默认被选中
    readonly: 只读. text 和 password
    
    disabled: 对所用input都好使.

    select标签

     <select>
         <optgroup label="汽车"></optgroup>      #为每一项加上分组
         <option value="1">宝马</option>
         <option value="2">奔驰</option>
     </select>

    <textarea> 多行文本框

    <form id="form1" name="form1" method="post" action="">
            <textarea rows="3" cols="20">
            在w3school,你可以找到你所需要的所有的网站建设教程。
            </textarea>
    </form>

    属性:
      cols:规定文本区内可见的列数 cols=20 一行10字
      rows:规定文本区内可见的行数。
      required :定义为了提交该表单,该 textarea 的值是否是必需的。
      

    <label>标签

    1 label 元素不会向用户呈现任何特殊效果。
    2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

    <form method="post" action="">
            <label for=“username”>用户名</label>     #点击用户名,光标会自动进入 input 框中
            <input type=“text” name=“username” id=“username” size=“20” />
    </form>

    <fieldset>标签

    标签的拼接

    <img th:src="'/website'+${file.image}"/>
    

      

  • 相关阅读:
    软件工程之美42讲——反面案例:盘点那些失败的软件项目
    软件工程之美41讲——为什么程序员的业余项目大多都死了?
    20172330 2017-2018-2《程序设计与数据结构》课程总结
    哈夫曼解码编码实现
    20172313 2017-2018-2 《程序设计与数据结构》实验三报告
    20172330 2018-2019-1 《程序设计与数据结构》第九周学习总结
    20172313 2017-2018-2 《程序设计与数据结构》实验二报告
    20172330 2018-2019-1 《程序设计与数据结构》第八周学习总结
    20172330 2018-2019-1 《程序设计与数据结构》第七周学习总结
    20172330 2018-2019-1 《程序设计与数据结构》第六周学习总结
  • 原文地址:https://www.cnblogs.com/yanxiaoge/p/10524783.html
Copyright © 2011-2022 走看看