html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

时间：2022-10-23 20:24:45

HTML

标记语言为非编程语言
负责完成页面的结构

组成：
　　标签：被<>包裹的由字母开头，可以结合合法字符（ -|数字 ），能被浏览器解析的特殊符号，标签有头有尾
　　指令：被<>包裹的由 ! 开头
   转义字符：
　 　　&nbsp; 空格   &lt : <  &gt ： >

 

页面模板

<!doctype html>
        <!--页面开始-->
        <html>
            <!--头-->
            <head>
                <!--字符编码-->
                <meta charset="utf-8">
                <!--页面标签的标题-->
                <title>页面</title>
                <!--内部或外部的css样式 | js脚本 | 页面其他设置 -->

            </head>
            <!--身体-->
            <body>
                <!--存放给展示用户的内容-->
                xx
            </body>

        <!--页面结束-->
        </html>

 

常用标签

最常用标签:没有语义，也没有特殊功能，也没有特殊样式
    <div></div>
换行标签: <br>

标题标签: h1 - h6
段落标签: <p>xxx</p>     段落与段落之间间隔很大

文本标签：同行显示

span   文本标签

i 斜体
em 斜体方式强调

b 加粗
strong 加粗方式强调

sup 上角标
sub 下角标

 超链接标签：a

<a href="连接地址" target="_blank">超链接</a>
href="连接地址" arget="_blank/_self" 属性表示新开一个窗口

锚点：快速定位到页面指定位置
　　<a name='top'></a>   通过 a 的 name 设置锚点
　　<a href='#top'>返回Top</a>   再通过 a 的 href 属性转跳到锚点位
图片标签
<img src="图片地址" alt="资源加载失败显示的文字" title="鼠标悬浮显示文字提示">
列表标签： ul  ol
有序：
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

无序：
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

表格标签 table

 
 
border: 表格边框宽度
cellspacing: 单元格之间的距离
rules: all(全部) | groups(组线) | rows(行线) | cols(列线)
cellpadding: 内容距上距左的距离


<table border="10" width="500" height="300" cellspacing="0" rules="all" cellpadding="20">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <!--th{标题}*3-->
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <!--(tr>td{单元格}*3)*2-->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <!--tr>td{单元格}*3-->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tfoot>
</table>
 
 
 

 

了解
 

 
 
分割线： <hr>  （了解）
显示文本：<pre></pre>
 

 

 标签分类
 

 
 
单标签  br hr img meta link 功能具体，不需要内容，设置为单标签   eg:<link rel="stylesheet" href="">
双标签 h1 p span div 具有子标签，包含内容     eg:<h1>内容</h1>
 




 
 

css
 

负责页面的风格设计
 

 
 
选择器：由标签，类，id单独组合出现
作用域：一组打括号包含的区域
样式块：满足css连接语法的众多样式
 

 

css的三种引入方式
 

1.行间式
 

 
 
样式块写在标签的style的属性中
属性 与 属性 间用 ; 分号隔开

<div style="color: red"></div>
 

 

2.内联式
 

 
 
写在style标签中
用选择器与html建立连接


 <style type="text/css">
        .farther div {
            color: red;
            font-size: 100px;
            float: right;
        }
 </style>
 

 

3.外联式
 

 
 
css外式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中
用 link 标签将css文件与 html 建立连接
< link rel="stylesheet" href="" >   rel="stylesheet" 表示连接什么样的文件，样式连接表
 

 

 
 

三种引入方式的执行顺序：
 

 
 
外联 < 内联 < 行间    行间式最后执行
 

 

 
 

 
 

 
 

 
 

 
 

 
















 

 
标签：
相关文章