HTML基础随记

Web标准

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

 

浏览器内核

文档类型<!DOCTYPE>

作用：声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

 

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。

 

b 只是加粗 strong 除了可以加粗还有 强调的意思， 语义更强烈。

<i> <em>  让文字倾斜

图片标签：  <img>  

alt    图片不能显示的替换文本

title： 鼠标悬停时显示的内容

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 

tatget=    _self / _blank

注意：

  1. 外部链接 需要添加 http:// www.baidu.com

  2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

锚点定位

1.使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>

2.使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）

<a href="#two">

base 标签

<base target="_blank" />

总结：

  1. base 可以设置整体链接的打开状态

  2. base 写到 <head> </head> 之间

  3. 把所有的连接 都默认添加 target="_blank"

预格式化文本pre标签

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

 

特殊字符

重点记住 大于号 &gt   小于号 &lt  和空格 &nbsp

 

表格

<teble>   <tr>  <tb>     //  th标签替换tb 一般作为表头   

cellspacing  单元格与单元格之间的空白间隙 默认2像素

cellpadding  单元格边框与内容之间的空白间隙 默认1像素

 表格标题 caption

<table>
<caption>我是表格标题</caption>  //  写在表格内  显示在表格外
</table>                    

合并单元格

  • 跨行合并：rowspan="合并单元格的个数"

  • 跨列合并：colspan="合并单元格的个数"

  • 合并的顺序我们按照 先上 后下 先左 后右 的顺序 **
  • <td colspan="3"> </td>

细线表格

  • 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

  • 但是两个单元格之间的边框会出现重叠，从而使边框变粗

  • 通过css属性：

    table{ border-collapse:collapse; }  

    • collapse 单词是合并的意思

    • border-collapse:collapse; 表示相邻边框合并在一起。

表格划分结构

对于复杂的表格：

              又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注

注意：

  1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！

  2. <tbody></tbody>：用于定义表格的主体。放数据本体 。

  3. <tfoot></tfoot>放表格的脚注之类。

  4. 以上标签都是放到table标签中。

<table border="1">
        <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </thead>
                    <tr>
                <th>4</th>
                <th>5</th>
                <th>6</th>
        </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
    </table>

列表 ul, ol , dl

input： 

下拉列表 select

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

查文档

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

 

posted @ 2021-03-04 20:16  勿扰。。清梦  阅读(68)  评论(0)    收藏  举报