• HTML/CSS标签(慕课网上截图,东西不多,有点乱)


    部分标签的使用方法:

    <hx>标题     

    <p>段落         

    <q>对简短文本的引用     

    <blockquote>对长文本的引用   

    <em><strong>

    em 是句意强调,加与不加会引起语义变化。 strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。   

    <span>    

    <address>地址  

    <code>显示一行代码语言  

    <pre>在网页中加入大段代码    

    <ul><li></li></ul>无前后顺序列表信息  

    <ol><li></li></ol>有前后顺序的列表信息

     <table><tr><td></td></tr></table>   <table summary="摘要">  <caption>标题  

    <a href="#" target="_blank"></a>链接在新窗口打开

    <form    method="post"   action="save.php">
            <label for="username">用户名:</label>
            <input type="text" name="username" />
            <label for="pass">密码:</label>
            <input type="password" name="pass" />
    </form>表单

    <form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
    <option value="看书">看书</option>
    <option value="旅游" selected="selected">旅游</option>
    <option value="运动">运动</option>
    <option value="购物">购物</option>
    </select>
    </form>

    结果:

     label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

    1、使用内联式CSS设置“超酷的互联网”文字为粉色

    2、然后使用嵌入式CSS来设置文字为红色

    3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。

    但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式

    但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。

    其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)

    但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况

                                

           

    p{text-indent:2em;}段落缩进       

    p{line-height:2em;}行间距

      

    css代码:

    div{
        200px;
        padding:20px;
        border:1px solid red;
        margin:10px;    
    }

    html代码:

    <body>
       <div>文本内容</div>
    </body>

    元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型,如下图:

    不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):

    1. 加入 table 标签
    2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
    3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

     设计步骤:

  • 相关阅读:
    SpringBoot初识日志
    SpringBoot配置文件(2)
    SpringBoot配置文件(1)
    java8新特性之stream流
    java8新特性之Lambda表达式
    Java入门——第一个Java程序HelloWorld(Dos命令窗口)
    Invalid bound statement (not found): com.xxx.xxx.dao.ShopMapper.insertShop
    2019总结过去,规划未来
    进程和线程的区别
    python(tuple元组、scalar types:数字类型、字符类型、类型转换)
  • 原文地址:https://www.cnblogs.com/td-tkzc/p/5753216.html
Copyright © 2020-2023  润新知