zoukankan      html  css  js  c++  java
  • HTML,CSS学习笔记

    <p>元素,代表是一个段落,单独另起一行</p> 

    <h1>的意思就是主标题</h1> 
    <h1><h2><h3>...<h6>它们的字体是依次减小的~<h1>最大,<h6>最小 
    <h1 style="color:blue">***的个人网页</h1>(调字体颜色) 

    text-align 属性规定元素中的文本的水平对齐方式 
    <h1 style="text-align:center">***的个人网页</h1>(居中) 
    <h1 style="text-align:left">***的个人网页</h1>(左对齐) 
    <h1 style="text-align:right">***的个人网页</h1>(右对齐) 


    <hr/>这个元素的功能就是定义一条水平线出来。 
    <hr style="color:red;height:5px;500px;">(调水平线颜色,粗细,长宽) 


    float不想让它们单独在一行,想合并成一行 
    <p style="float:left;margin-right:100px;">姓名:***</p> 
    <p style="float:left;margin-right:100px;">年龄:**</p> 
    <p style="float:left;margin-right:100px;">性别:女</p> 
    <p style="float:left;">爱好:男</p> 

    <p style="position:absolute;top:230px;right:25px;">这是美丽的图片</p>(固定绝对位置(上top、下、左left、右right)) 

    <i>元素,编写出斜体字,可以放在<p>元素里面来使用</i> 

    <b>元素:编写出粗体的文字</b> 

    <br>的作用是换行 

    <u>新元素:文字带下划线</u> 

    <img>元素:插入图片 
    <img> 标签的 src 属性是必需的。它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。 
    例:<img src="http://wx2.sinaimg.cn/thumb180/71f81b09ly1fgjk9dvzifj20bq0e8q5o.jpg";style=" position:absolute;top:100px;left:200px;"> 

    <ul>和<li>无序列表 
    <ul>标签是定义无序列表的 
    <li>是定义里面的每一行内容 
    例: 
    <ul> 
    <li>地球</li> 
    <li>月球</li> 
    <li>火星</li> 
    </ul> 
    <div style="border-1px;border-color:black;border-style:dotted;"> 
    </div> 
    (border-1px;border-color:black;border-style:dotted;为HTML元素设置边框,依次是边框宽度、边框颜色、边框样式;可以将它们组合,写成这样:border:1px black dotted;) 
    边框换个颜色(red、green)、宽度、样式(solid、dashed、double) 
    <div>的作用,里面的元素随着<div>位置的改变而改变,现在它就把它里面的内容就分成了网页中的一部分。 
    <div style="border:solid 1px;position:absolute;top:600px;right:200px;"> //绝对位置
    <h2>想吃的东西</h2> 
    <p>好多好多</p> 
    </div> 

    <ol>和<li>有序列表 
    <ol>标签是定义有序列表的 
    <li>是定义里面的每一行内容 
    例: 
    <ol> 
    <li>地球</li> 
    <li>月球</li> 
    <li>火星</li> 
    </ol> 
    <li style="margin-top:20px;margin-left:20px;">地球</li>(通过margin-top:20px;为HTML元素设置上边距,每个元素可以设置四个边距(上top、下、左left、右right);可以将它们组合,类似边框样式,这样写:margin:20px 10px 5px 10px;代表着上边距20px、右边距10px、下边距5px、左10px) 

    <td style="padding:20px;">第一行第一列</td>(通过padding:20px;设置外边距,这是距离四外边距离都一样的情况;可以将它们组合,类似边框样式,这样写:margin:20px 10px 5px 10px;代表着上边距20px、右边距10px、下边距5px、左10px;只设置一个内边距:padding-top(上内边距)、padding-bottom(下内边距)、padding-left(左内边距)、padding-right(右内边距)) 

    <table>、<tr>、<td>编写一个简单的表格 
    <table> 标签是定义 HTML 表格的 
    <tr>元素定义表格的行,<td>元素定义表格的列 
    例: 
    <table border="1"> 
    <tr> 
    <td>第一行第一列</td> 
    <td>第一行第二列</td> 
    </tr> 
    <tr> 
    <td>第二行第一列</td> 
    <td>第二行第二列</td> 
    </tr> 
    </table> 
    <table border=”2” style="border-color:blue"> 
    border是<table>元素的一个属性,作用就是设置表格外面的边框。 
    border=”1”的意思是设置边框的粗细为1 



    <video>元素:插入视频 
    <video> 标签的 src 属性是必需的。它的值是视频文件的 URL,也就是引用该视频文件的的绝对路径或相对路径。 
    例: 
    <video width="200" height="200" src="http://resource.haorenao.cn/cxy720-2.mp4" controls>我的视频</video> 

    <a> 标签定义超链接,重要的属性是 href 属性,它指示链接的目标。 
    例: 
    <a href="http://weibo.com/haorenao">@陈斌儿童编程和机器人</a> 

    <!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8""> 
    </head> 
    <body style="1000px;margin:0 auto;padding-top:50px;font-family:arial,stkaiti,kaiti,sans-serif;"> 
    <img src="http://resource.haorenao.cn/back.jpg"> 
    </body> 
    </html> 


    width:1000px ;它的意思是给我们本网页设置的宽度为1000像素。
    margin:0 auto;意思是上下外边距为0.左右外边距根据屏幕分辨率自动设置,其实就是居中。
    padding-top:50px;意思是距离浏览器的上边框50像素。
    font-family: Arial,STKaiti,KaiTi,sans-serif,Time New Roman;设置多个字体。
    font-size:设置内容的大小
    background-color:lightgray,为HTML元素设置背景颜色

  • 相关阅读:
    Java实现 LeetCode 667 优美的排列 II(暴力)
    Java实现 LeetCode 665 非递减数列(暴力)
    Java实现 LeetCode 665 非递减数列(暴力)
    Java实现 LeetCode 665 非递减数列(暴力)
    Java实现洛谷 P1873 砍树(StreamTokenizer+IO+二分)
    PHP RESTful
    PHP 获取图像宽度与高度
    PHP imagecolorclosesthwb
    PHP imagecolorclosestalpha
    PHP imagecolorclosest
  • 原文地址:https://www.cnblogs.com/muziqiu/p/7202566.html
Copyright © 2011-2022 走看看