初识HTML/css

护你一世无怨.メ

于 2019-09-09 19:14:40 发布

阅读量248

点赞数

文章标签：初识HTML

本文链接：https://blog.csdn.net/qq_45260446/article/details/100671485

版权

1.html 标签

 <div>最常用的标签</div>
    <!-- h5新增很多语义化标签: 看的标签名就知道标签的作用 -->
    <header>头部标签，顶部的导航信息</header>
    <main>网页主要内容</main>
    <footer>网页尾部，地址，电话，联系方式，版权</footer>
    <aside>侧边栏，经常放广告或与网页内容联系不大的信息</aside>
    <h1>h1-h6 从大到小的6个表题</h1>
    <table>
    表格表格 
    <tr>table row 表格中的一行</tr>
    <td>table data 一个单元格数据</td>
    </table>
    <ol>
        order list 顺序列表
        <li> list 列表中的列表项</li>
    </ol>
    <ul>
        unorder list 无序列表
    </ul>
    <dl> 
        define list 定义列表
        <dt> define title 表题</dt>
        <dd> define date 定义列表的列表项</dd>
        <dt> 内容</dt>
        <dd>html5</dd>
        <dd>css3</dd>
        <dd>javascript</dd>
    </dl>
    <!-- 常见的文字标签 -->
    <p>段落标签</p>
    <span>没有任何附样式的文字标签</span>
    <h6>加粗</h6>
    <I>斜体</I>
    <u>下划线</u>
    <del>删除线</del>
    <small>相对正常文字小</small>
    <sub>下标</sub>
    <sup>上标</sup>
    <strong>加粗</strong>
    <a href="">超链接</a>
    <img src="" alt="">
    <!-- 图片标签 -->
    <img src="" alt="">
    <br>换行
    <hr>横线
    <input type="text">

HTML标签如果按照结构分类，可分两类：单标签/双标签
    双标签：有开始和结束标签
    单标签：只有开始标签，没有结束标签

2.网页结构

  <!-- 一个网页上的代码必须写在一个固定的代码结构中 -->
    <!-- 注释：（1）对代码的解释说明，给我们开发者或者给他人看的 
        （2) 代码如果不想执行，可写成注释
        （3） 适合新手做笔记 -->
    <!-- html标签是网页框架标签（根标签）网页中所有的内容都要放在html中 -->
    <HTML>
    <!-- 网页头标签，放网页配置信息和样式 -->
    <head>
    <!-- 文本的编码方式 charset 字符集  utf-8 国际通用字符集 -->
    <meta charset="UTF-8">
    <!-- 网页表题 -->
    <title></title>
    <!-- 层叠样式 -->
    <style></style>
    </head>
    <!-- 网页主体标签，所有在网页中显示的内容都要写在body中 -->
    <body>
    
    </body>
<!-- javascript逻辑编辑语言 -->
<script></script>
</HTML>

3.css样式

  <!-- css样式有三种写法：
        1，内联样式 ：在html的style标签中写样式
        2， 外联样式 ：在link标签中导入外联样式
        3，行内样式 ： 在body标签中的标签中style:中直接写样式
    -->
    <style></style>
</head>
<body>
    <div style="width:100%;background-color:aqua;">我</div>
    </body>

4.常见的CSS样式

  <style>
    div{
        /* 文字颜色常用3种写法：颜色名，rgb三原色，16进制三原色 */
        color: red;
        color: rgb(rgb(255, 0, 0), green, blue);
        color: rgba(225, 0, 255, 0.5);
        /* 十六进制 : ff 转化十进制是255 */
        color: #ff0000;
        /*文字尺寸：默认16px*/
        font-size: 26px;
        /*文字类型 italic斜体*/
        font-style:italic;
        /* 文字粗细  bold加粗 normal正常字体*/
        font-weight: bold;
        /*文字字体 默认显示第一个，后边的备用*/
        font-family: 楷体,宋体,黑体;
        /* 文字下划线  none 去除下划线*/
        text-decoration: underline;
        /*文字内容居中 left/center/right*/
        text-align: center;
        /* 文字阴影 阴影向右 向下 模糊度 颜色*/
        text-shadow: 10px 10px 10px red;

        /* 背景颜色*/
        background-color: aquamarine;
        /* 背景图片*/
        background-image: url(1.jpg);
        /*背景图尺寸*/
        background-size: 10px 50px ;
        /*取消重复*/
        background-repeat: no-repeat;
        /*背景的位置*/
        background-position: center;
        /*删除线*/
        text-decoration-line: line-through;
        /* 边框 solid实线 dotted点线 double双实线 */
        border: 1px solid  black;
        /* 单独设置某一个边的边框 */
        border-top: dotted 3px sandybrown;
        border-right: 2px solid cadetblue;
        /*边框圆角 50% 可以变成圆或者椭圆*/
        border-radius: 50%;
        /*标签透明度 [0-1]*/
        opacity: 1;
    }
    </style>
</head>
<body>
    <div>dhbd</div>
</body>