HTML与CSS学习笔记

---恢复内容开始---

  • <a href="http://www.jisuanke.com" title="点击进入计蒜客" target="_blank">计蒜客</a>

    title:当鼠标移动到“计蒜客”上时,显示文本提示  target:点击链接后打开一个新的标签页

  •  <q>千金散尽还复来——李白</q>

    result:q为短文本引用标签,会自动加上双引号。

  • <em></em>:斜体;
  • <strong></strong>:粗体;
  • <br>:换行;            <hr>:下划线(自闭和标签)
  • &nbsp:空格
  • 表格样例:

        <table>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>高一一班</td>
                <td>89分</td>
            </tr>
            <tr>
                <td>李雷</td>
                <td>高一二班</td>
                <td>90分</td>
            </tr>
        </table>
  • 男:<input type="radio" value="m" name="gender">
    女:<input type="radio" value="f" name="gender">

    单选框:name属性值相同

  • 看书<input type="checkbox" value="book" name="hobby">、
    足球<input type="checkbox" value="soccer" name="hobby">、
    游泳<input type="checkbox" value="swim" name="hobby">

    复选框(checked = "checked")

  • <select name="money">
        <option value="500" selected="selected">五百元</option>
        <option value="5000">五千元</option>
        <option value="50000">五万元</option>
        <option value="500000">五十万元</option>
    </select>

    下拉选框,selected意味着默认显示的选项。表单上传给服务器的是value和name

  • <input type="submit" value="确定" name="submit">
    <input type="reset" value="重置" name="reset">提交按钮和重置按钮

<a href="http://www.jisuanke.com" title="点击进入计蒜客" target="_blank">计蒜客</a>

---恢复内容结束---

  • <a href="http://www.jisuanke.com" title="点击进入计蒜客" target="_blank">计蒜客</a>

    title:当鼠标移动到“计蒜客”上时,显示文本提示  target:点击链接后打开一个新的标签页

  • <q>千金散尽还复来——李白</q>

    result:q为短文本引用标签,会自动加上双引号。

  • <em></em>:斜体;
  • <strong></strong>:粗体;
  • <br>:换行;            <hr>:下划线(自闭和标签)
  • &nbsp:空格
  • 表格样例:

    <table>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>高一一班</td>
                <td>89分</td>
            </tr>
            <tr>
                <td>李雷</td>
                <td>高一二班</td>
                <td>90分</td>
            </tr>
        </table>
  • 男:<input type="radio" value="m" name="gender">
    女:<input type="radio" value="f" name="gender">

    单选框:name属性值相同

  • 看书<input type="checkbox" value="book" name="hobby">、
    足球<input type="checkbox" value="soccer" name="hobby">、
    游泳<input type="checkbox" value="swim" name="hobby">

    复选框(checked = "checked")

  • <select name="money">
        <option value="500" selected="selected">五百元</option>
        <option value="5000">五千元</option>
        <option value="50000">五万元</option>
        <option value="500000">五十万元</option>
    </select>

    下拉选框,selected意味着默认显示的选项。表单上传给服务器的是value和name

  • <input type="submit" value="确定" name="submit">
    <input type="reset" value="重置" name="reset">提交按钮和重置按钮

CSS部分

<html>
<head>
    <style>
        p {text-indent: 2em;}
        p {line-height: 1.5em;}
        p {text-align: right;}
    </style>
</head>
<body>
    <h1>老王的爱情</h1>
    <p id="first">为什么要那么痛苦地忘记一个人,时间自然会使你忘记。如果时间不可以让你忘记不应该记住的人,我们失去的岁月又有甚么意义?</p>
    <p id="second">爱情如果不落到穿衣、吃饭、睡觉、数钱这些实实在在的生活中去,是不会长久的。<span>真正的爱情</span>,就是不紧张,就是可以在他面前无所顾忌地打嗝、放屁、挖耳朵、流鼻涕;真正爱你的人,就是那个你可以不洗脸、不梳头、不化妆见到的那个人。</p>
</body>
</html>
  • CSS嵌入的三种方式分别 为:内联式、嵌入式、外部式,其优先级为:内敛>嵌入>外部。
  •         p {font-size: 12px;}  // 标签选择器
            .bac_blue {background-color: blue;}  //类选择器
            #first {background-color: green;}   //id选择器
  •         #food > div {border: 1px solid red;}  //子选择器,只作用于第一代后代
            #food div {color: blue;}  //后代选择器,作用于所有后代  
  • a:hover {color: green;}  伪类选择器
     * {color: red;}   通用选择器
  • 文字排版:

    <html>
    <head>
        <style>
            body {font-family: "宋体";}
            #first {font-family: "Microsoft Yahei";}
            h1 {font-size: 40px;  color: red;}
            #first span {font-style: italic;}
            #second span {font-weight: bold;}
            h1 {text-decoration: underline;}
        </style>
    </head>
    <body>
        <h1>老王的爱情</h1>
        <p id="first">为什么要那么痛苦地忘记一个人,时间自然会使你忘记。如果时间不可以让你忘记不应该记住的人,我们<span>失去的岁月</span>又有甚么意义?</p>
        <p id="second">爱情如果不落到穿衣、吃饭、睡觉、数钱这些实实在在的生活中去,是不会长久的。<span>真正的爱情</span>,就是不紧张,就是可以在他面前无所顾忌地打嗝、放屁、挖耳朵、流鼻涕;真正爱你的人,就是那个你可以不洗脸、不梳头、不化妆见到的那个人。</p>
    </body>
    </html>
  • <html>
    <head>
        <style>
            p {text-indent: 2em;}       em代表一个字体宽度,indent意思是缩进
            p {line-height: 1.5em;}
            p {text-align: right;}
        </style>
    </head>
    <body>
        <h1>老王的爱情</h1>
        <p id="first">为什么要那么痛苦地忘记一个人,时间自然会使你忘记。如果时间不可以让你忘记不应该记住的人,我们失去的岁月又有甚么意义?</p>
        <p id="second">爱情如果不落到穿衣、吃饭、睡觉、数钱这些实实在在的生活中去,是不会长久的。<span>真正的爱情</span>,就是不紧张,就是可以在他面前无所顾忌地打嗝、放屁、挖耳朵、流鼻涕;真正爱你的人,就是那个你可以不洗脸、不梳头、不化妆见到的那个人。</p>
    </body>
    </html>
  • CSS简写:你一定还记得在讲盒模型时,外边距(margin)、内填充(padding)和边框(border)设置四个方向的边距是按照顺时针方向设置的:上右下左。

    当上右下左四个方向的取值都相同,比如这样:margin: 20px 20px 20px 20px;

    可缩写为:margin: 20px;

  • CSS布局模型:流动模型、浮动模型、层模型地位
时间: 2024-08-07 06:52:44

HTML与CSS学习笔记的相关文章

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

css学习笔记.1--以校园资讯平台为例

#id .class 这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得 margin 老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 如图: 就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域:内容(content).边框距(padding).边界(border