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" 表示连接什么样的文件,样式连接表

 

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

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