前端学习日记之HTML、CSS 简单总结

其他 2018-05-07 22:57:04 阅读次数: 5

前端学习日记之HTML、CSS 简单总结

标签（空格分隔）： html css 前端学习日记

html超文本标记语言

一. h标题标签

h1-h7

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="11">
        <meta name="description" content="11">
        <title>test</title>
    </head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>
    <h7>7</h7>
    </body>
</html>
  • H1标签(搜索引擎可以搜索到)在一个页面当中只能出现一次，其它h次数不限

  • 标签中无论输入多少空格或换行符都只显示一个空格

    二. p段落标签

    alt+shift+w

    <p>----------------------------------</p>
  • 上下元素自动换行，为文字添加样式

  • p标签中不能嵌套块级元素（前后元素会被换行） 都是内联标签

    三. a超链接标签

    <a href="">i am a title</a>
  • href 属性指定超链接目标的URL
  • href=“# ” 锚点标记只能作用于别的a标签中的name值

  • id 属性可以在任何标签中跳转
    ```html
    我是顶部的a标签


###**四. b、i、u、strong、特殊符号使用** ####**1. i标签(斜体)**html
我会倾斜
####**2. b标签(粗体)**html
我被加粗了
####**3. 标签(下划线)**html
我有下划线
####**4. strong标签(加粗)**html
我也可以加粗
```

  • 与b标签不同的是strong标签可被搜索引擎搜到

5. 特殊符号

  • &nbsp; 可以代替一个空格，输入几次得到几个空格！
  • &lt;strong&gt;小于符号;大于号
  • &quot; 引号
  • &copy; 版权号
  • &times; × 符号 非X符号
  • &amp; & 符号
  • <hr>标签 ：分隔线
  • <br>标签 ：换行

五. 图片标签

1. 图片的常见格式

1> BMP:位图格式(点阵图),占用空间大，色彩丰富(相机主流格式)
2> JPEG: 压缩格式，通常是破坏数据性压缩方式, 图片失帧效果.
3> GIF: 对透明色和多帧支持,动态图。
4> PNG:透明图片格式，无损压缩位图格式，支持Alpha通道的透明、半透明特性

2. 如何引用一个图片标签

1> 绝对路径引用图片
 <img src="/home/halooyan/图片/3.png" alt="图片3">
  • src:图片的绝对路径
  • alt:图片描述信息（当图片显示不成功时会显示）可供搜索引擎爬取信息
2> 相对路径引用图片
<img src="2.jpg" alt="图片2">
  • src:图片的相对路径（相对于当前html文件下的路径）

  • alt:图片描述信息（当图片显示不成功时会显示）可供搜索引擎爬取信息
    ________________________________________

    3. 图片标签的其他属性

    <img src="" alt="e" width="px" height="px">

  • width、height属性：图片显示的大小，单位为像素

六.列表标签

1. 无序列表

<ul type="">
    <li>123</li>
</ul>
  • <li></li>:列表项
  • type="disc(圆点)、square(方块)、circle(圆环)"

  • ul>li*10>a[href="javascript:void(0);"]{$@-}

    2. 有序列表

    <ol>
<li>123</li>
<li>12314</li>
<li>asd</li>
</ol>
  • type="a(a.b.c..字母)、1(1.2.3...数字)、i(罗马小写数字) "

  • li{$}*27 按tab键 生成27个li项

    扫描二维码关注公众号，回复： 157534 查看本文章

    3. 自定义列表

    <dl>
<dt>上衣</dt>
<dd>T恤</dd>
<dd>羊毛衫</dd>
<dd>衬衣</dd>
</dl>
  • dt: define title

  • dd: define data

    七.表格

    <table border="1">
<caption>hahaha</caption>
<thead>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>

    </tr>
</thead>

<tbody>
    <tr>
        <td>111</td>
        <td colspan="2">222</td>
    </tr>
    <tr>
        <td>444</td>
        <td>555</td>
        <td rowspan="2">666</td>
    </tr>
    <tr>
        <td>777</td>
        <td>888</td>
    </tr>
</tbody>
</table>
  • border="1" :1像素的线框
  • tr :橫行
  • td :一个单元格
  • rowspan="2" :从上往下合一列的两个单元格(跨行)
  • cospan="2" : 从左往右合并一行的两个单元格(跨列)
  • caption: 表格标题
  • th :td加粗,表头专用
  • thead：表头

  • tbody：表身

    八.form表单域

    1. 单行输入框、密码框、单选按钮、多选框、提交方式

    <form action="#" method="get/post ">

账号：<input name="user" type="text" value="123456" maxlength="7"readonly disabled placeholder="请输入账号"><br><br>
密码：<input name="pwd" type="password" placeholder="请输入密码"><br><br>

性别：
    <input type="radio" name="gender" value="男"> 男
    <input type="radio" name="gender"value="女"> 女 <br><br>
爱好:
    <input name="run" type="checkbox">跑步
    <input checked name="swim" type="checkbox">游泳
    <input name="basketball" type="checkbox">篮球
    <input name="bassball "type="checkbox">足球

生日:
    <select size="3">
        <option value="1990">1990</option>
        <option value="1991">1991</option>
        <option selected value="1992">1992</option>
        <option value="1993">1993</option>
        <option value="1994">1994</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
    </select>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>   

<input type="submit" value="完成"> <!--value修改了提交按钮的文字显示内容-->
</form>
  • action="#":发送到哪个服务器(# 代表当前网页)
  • method="get" 不写method的话默认是get-在url后拼接？
  • method="post" 隐式的提交
  • <input type=" ">:一个输入框，默认type为text(明文输入)，password(隐藏输入)
  • radio(单选按钮)，在单选按钮中加一个name属性，且值相同就可以实现互斥
  • checkbox(多选按钮)，可选可不选，可多选
  • checked：默认选择了当前项
  • submit:将name=" "这个属性提交给服务器,该属性的值的属性的值为input的内容如果没有input，而是选择(单选或多选)那么该属性的值的属性可用value=" "来代替
  • maxlength: 限制字符长度
  • readonly : 只读
  • disabled : 明令禁止，不会向服务器发送该数据
  • <select><option></option></select>:下拉列表
  • sezi="3":下拉列表框呈现3列数据

  • selected:默认选择了当前项
    ____________________________________________

    2. 多行文本输入框、按钮、重置、hidden、pre

  • 多行文本输入框
    ```html


- 按钮html

- 重置:还原页面初始加载内容html

- 隐藏域:在页面上不会显示，value由系统生成html

- lable标签:文字和选项都可点击，for=" " == id=" "html



- pre标签：格式化文本，保留空格换行

 ad asd asd asd
```

CSS层叠样式表

  • cascading style sheet
  • CSS属性和值使用冒号分隔，每条样式结束后加分号；

一. 引用样式的方法

1. 选择器(选择标签，添加样式)

1> class选择器：将多个元素规成一类，对这一类的元素应用样式。
<head>

    <style type="text/css">
    .title{
        color:red;
    }
    </style>
</head>
<body>
    <h2 class="title">This is H2</h2>
    <h2 class="title">This is H2</h2>
    <h2 class="title">This is H2</h2>
    <p class="title">
        This is P
    </p>
    <h2 class="title">This is H2</h2>
    <h2 class="title">This is H2</h2>
</body>
2> id选择器： id的值具有唯一性
<head>
    <style type="text/css">
    #title{
        color: green;
    }
    </style>
</head>
<body>
    <h2 id="title">This is H2</h2>
</body>
3> 标签(元素)选择器：当前页面所有此标签
<html>
<head>
    <style>
    h2{
        background: orange;
    }
    </style>
</head>
<body>
    <h2 class="title">This is H2</h2>
</body>
</html>
4> 通配符：选择页面所有元素
<html>
<head>
    <style>
     *{
        background:blue 
    }
    </style>
</head>
<body>
    <h2 class="title">This is H2</h2>
</body>
</html>
  • 权重： ID选择器 > Class 选择器 > 元素选择器 >
  • 假如选择器相同，则从上往下覆盖，下面覆盖上面
  • 派生（子代）选择器 ：.list li
  • 有子代选择器时，要比较，强的大于弱的，多的大于少的

  • 表示重要的一个样式，一定会被用
    li{ color:gree !important; }

    2. 行内样式、内联样式（标签中直接添加样式）

<html>
<head>
    <style>
    </style>
</head>
<body>
    <h2 class="title" style="color:blue;">This is H2</h2>
</body>
</html>

  • 权重大于style里面的样式

    3. 通过link标签，引用style.css样式文件

    <head>
<style>

</style>
<link rel="stylesheet" href="样式文件的路径">
</head>

    二. 段落文本样式

    1. 字符间距

    letter-spancing: *px;

    2. 行间距

    line-height: *px;

    3. 背景颜色

    background: green;

    4. 空格间距(主要用于英文文本)

    <html>
<head>
<style>
    .spacing{
        word-spacing: 10px;
    }
</style>
</head>
<body>
<h2 class="title" style="color:blue;">This is H2</h2>
<p class="spacing">
    jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
</p>
</body>
</html>

    5. 对其方式

    <html>
<html>
<head>
<style>
    .align1{
        /*文本对齐方式:左对齐left,居中center,右对齐right*/
        text-align: center; /*可以水平居中内容中的文字、内联元素、内联块*/
    }
    .align2{
        text-align: left;
    }
    .align3{
        text-align: right;
    }
</style>
</head>
<body>
<p class="align1">
    男，1952年出生于中国香港，香港邵氏电影演员，于70年代开始活跃娱乐圈，曾参演过不少动作电影，专演反派角色。他是空手道高手，所以不少电影中以及兼任武指，代表作包括《扮猪吃老虎》、黄志强执导的《打擂台》、《大纽约华埠风云》、《皇家飞凤》等，演出超过100部电影。</p>
<p class="align2">
    男，1952年出生于中国香港，香港邵氏电影演员，于70年代开始活跃娱乐圈，曾参演过不少动作电影，专演反派角色。他是空手道高手，所以不少电影中以及兼任武指，代表作包括《扮猪吃老虎》、黄志强执导的《打擂台》、《大纽约华埠风云》、《皇家飞凤》等，演出超过100部电影。</p>
<p class="align3">
    男，1952年出生于中国香港，香港邵氏电影演员，于70年代开始活跃娱乐圈，曾参演过不少动作电影，专演反派角色。他是空手道高手，所以不少电影中以及兼任武指，代表作包括《扮猪吃老虎》、黄志强执导的《打擂台》、《大纽约华埠风云》、《皇家飞凤》等，演出超过100部电影。</p>
</body>
</html>
</html>

    6. 缩进及文字大小

    <!DOCTYPE html>
<html>
<head>
<style>
    .indent{
        /*默认body标签的文字大小font-size:16px;可以自定义*/
                    font-size:20px;
                    /*首行缩进*/
        text-indent:2em;
                        /*
            单位:
                px 像素
                % 百分比 相对body根文字大小
                em 相对单位, 1em == 当前文字大小
                rem rootem 根文字大小
                vem
        */
    }
</style>
</head>
<body>
<h2 class="title" style="color:blue;">This is H2</h2>
<p class="indent">
美国航空（American Airlines）作为寰宇一家的创始成员之一，是世界最大的航空公司。联合旗下附属美鹰航空和美国连接，美国航空遍布260余个通航城市——包括美国本土150个城市及40个国家的城市。
</p>
</html>

    实际效果展示：
    [此处输入图片的描述][1]

    三. 装饰文本：

    1. 上、下、删除划线（～～xx～～）

    <!DOCTYPE html>
<html>
<head>
<style>
    .underline{
        text-decoration: underline; /*下划线*/
    }
    .overline{
        text-decoration: overline;/*下划线*/
    }
    .line-through{
        text-decoration: line-through;/*删除线*/
    }
</style>
</head>
<body>
<p class="underline">
美国航空（American Airlines）作为寰宇一家的创始成员之一，
</p>
<p class="overline">是世界最大的航空公司。联合旗下附属美鹰航空和美国连接，</p>
<p class="line-through">美国航空遍布260余个通航城市——包括美国本土150个城市及40个国家的城市。</p>
</html>

  • <del>￥9.9<\del>del标签也可以表示中划线
    装饰文本效果图：
    [装饰文本效果图][2]

    2. 字体样式

    1>字体大小：font-size:16px;一般都为偶数像素
    2>文字字体：font-family:"微软雅黑";衬线体：有笔锋 ，arial无衬线，sans-serif有衬线
    3>font-face: xx
4>字体风格：font-style:italik主要用于倾斜或者不倾斜 italik,normal
5>加粗（除了标签，样式也可以加粗）：font-weight:normal; 100-900不同字体有限制, normal==400,bold==700
6>简写方式：font: italik bold 12px/20px(行距离) arial

三. 背景样式

1. div(division划分即图层)

<!DOCTYPE html>
<html>
<head>
    <style>
    .box1{
        width: 800px;
        height: 800px;
        /*背景颜色*/
        background-color: skyblue;
        /*背景图片*/
        background-image: url(http://img2.imgtn.bdimg.com/it/u=4185127117,2252657627&fm=27&gp=0.jpg);
        /*背景重复*/
        background-repeat: no-repeat; /*repeat-x,repeat-y*/
        /*背景位移，前X后Y*/
        background-position: 0px 
0px; 
                /*背景大小，cover边框自适应/
        background-size: 100%；

    }
    </style>
</head>
<body>
123
<div class="box1">456
</div>

789
</html>

盒子效果展示：
[盒子效果展示][3]

2. div特点

1>自动将盒子拉伸到最大，如果有宽度则没有外右边距
2>默认高度为0，可以由子元素将父元素的高度撑起来
3>和h标签类似，前后元素自动换行

3. 外边距

元素与元素之间的距离
margin、margin-top、margin-bottom、margin-left、margin-right

  • 如果div有宽度，就没有外右边距，因为要遵循前后元素换行
  • HTML排练方向，从右到左，从上到下
  • 内联元素没有垂直方向的外边距，但是可以有margin-left、margin-right
  • margin：四个参数时-上右下左、两个参数时-垂直水平、三个参数时-上水平下
  • margin-left：auto; margin-right: auto; 有宽度的块级元素居中
  • 外边距允许负值，auto只有外边距才有
<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            width: 160px;
            height: 160px;
            background-color: skyblue;
        }
        .box2{
            width: 160px;
            height: 160px;
            background-color: black;
            margin-top: 20px;
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

外边距效果展示
[外边距效果展示][4]

4. 外边距重合

定义：一个元素的下外边距和下面一个元素的上外边距碰到一起会发生重合，外边距会顶着实际的内容边缘，谁的绝对值大就应用谁的
解决办法：
1> 在外面套一个父类盒子，盒子添加样式border：1px solid transparent;
2> 同样添加父类盒子，添加样式为：overflow: hidden;(溢出隐藏)
3> 设置内边距，给父类盒子设置内边距

5. 内边距

padding

  • 内边距没有负值也没有auto。
  • 可以撑大元素体积填充东西（内补白），不会改变蓝色主要内容区域。

  • 可以解决外边距重合的问题

    6. 边框(加在元素外围)

    border-width border-color border-style 四面都有边框
    border-top-width border-top-color border-top-style 只给一面加边框

  • 可用来做一个三角形：块级元素宽高为0，背景颜色透明或无，三角形腰上的边框用来调整角度 颜色为透明（transparent）

  • border-style: solid(实线)、dotted（点状）、dashed(虚线)、double(双线)
    ```html



![此处输入图片的描述][5] ####**7. 浮动(元素飘到浮动层上)**html



猜你喜欢

转载自www.cnblogs.com/halooyan/p/9005494.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022