设为首页 加入收藏

TOP

前端学习日记之HTML、CSS 简单总结(一)
2019-09-03 03:32:36 】 浏览:73
Tags:前端 学习 日记 HTML CSS 简单 总结

前端学习日记之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段落标签

<p>----------------------------------</p>

  • 上下元素自动换行,为文字添加样式
  • p标签中不能嵌套块级元素(前后元素会被换行) 都是内联标签

三. a超链接标签

<a href="">i am a title</a>

  • href 属性指定超链接目标的URL
  • href=“# ” 锚点标记只能作用于别的a标签中的name值
  • id 属性可以在任何标签中跳转

<a name="tag" href="java script: void(0);">我是顶部的a标签</a>

<a href="tag"></a>

四. b、i、u、strong、特殊符号使用

1. i标签(斜体)

<i>我会倾斜</i>

2. b标签(粗体)

<b>我被加粗了</b>

3. 标签(下划线)

<u>我有下划线</u>

4. strong标签(加粗)

<strong>我也可以加粗</strong>

  • 与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="java script: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项

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>
首页 上一页 1 2 3 4 5 6 7 下一页 尾页 1/10/10
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇sublime text3格式化html,css,js.. 下一篇ife2018 零基础学院 day 4