Zerg_Wang
Zerg_Wang

HTML自学笔记#2

环境：VS Code

插件：HTML Snippets、open in browser

 

表格

内容与边框

通过

声明一个表格，在每个表格中，通过声明每一行，在每一行中，通过，则会显示出其边框，无内容：

HTML自学笔记#2_第2张图片

可通过

声明每个单元格及其内容。

表格的设置不一定非要n×m，如下图：


    

        1
        2
    

    

        3
        4
        5

HTML自学笔记#2_第1张图片

当然，如果在第一行写了三个

，但第三个仅仅是
处的属性border设置外边框，不写则为0，内、外边框都无。若大于0，则外边框按这个值变化，内边框不变。

除了border，属性cellspacing用于设置单元格间距，属性cellpadding设置单元格边距。（即单元格中的内容与单元格边框的距离）

此外，整个table或单个单元格都可通过background属性设置背景、align设置对齐方式等等。

表头及标题

假设有3列，则表头可如下设计：

则内容会对应加粗，出现在每一列中间。

如果要表头在列表上端，则要写于其他行之前。

表头不一定要与实际列数相匹配，可自由设计。此外，表头也可以是每行一个，这样一来

中声明。

标题写在

Column 1 Column 2 Column 3
要在每个
中，但不需要声明：

标题内容会显示在表的上方居中位置，无论这段代码写在何处。

HTML自学笔记#2_第3张图片

单元格合并

通过colspan（合并相邻列）和rowspan（合并相邻行）进行操作。

HTML自学笔记#2_第4张图片

 

列表

无序列表

以

    开头，以
  • 定义每一项。

      
    
    • Chapter I
      • 
    
    • Chapter II
      •

    HTML自学笔记#2_第5张图片

    有序列表

    以

      开头，以
    1. 定义每一项。每一项开头不再是黑点，而是按顺序排列的数字：

      HTML自学笔记#2_第6张图片

      可在

        处通过属性start定义序号的开始值，默认为1。

        若连续定义多个有序表，且start为默认值，则序号不会在表间延续，到下一个表，又从1、2、3开始。

        自定义列表

        以

        开头，以
        定义每一项。每项开头无黑点也无数字。

        此外，在

        下还可通过
        补充对该项的描述，每项可有多个
        对其进行描述。

        
    
        Mike
        
    
        27
        
    
        worker
        
    
        James
        
    
        23
        
    
        engineer

        HTML自学笔记#2_第7张图片

         

        代码结构

        块元素与内联元素

        HTML中元素可分为块元素（block level element）以及内联元素（inline element）。

        浏览器显示块元素时，通常会在其开始和结束前以一空行与其他元素相隔，如

        、

        。内联元素则不会，如、。

        与

        这两个相当于C++中的大括号{}，相当于Pascal中的begin和end，逻辑上为一体的一部分代码可以写在一个

        或中，两者的区别在于，
        为块元素，为内联元素。

        此外，通过在

        或处的属性设置，可同时将多组代码设置为同一风格，如：

        
    
        Chapter II
        
    
        blablabla...

        HTML自学笔记#2_第8张图片

        此外，更可以为每个

        设置类别，相同类别设置为同一风格，不同类别设置为不同风格，然后在之外可为每一类设计显示风格，例如：

        

    


    
        
        
        Apple
        
    
        

    
        
        
        Cat

        除了class，也可以使用

        这种形式，在

        My Diary

         

        框架

        将当前页面分割为多个框架，使其可显示多个页面，用设置：

        HTML自学笔记#2_第9张图片

        通过在中添加属性来确定为水平分割（rows）或者垂直分割（cols），还可通过百分比为每个框架分配大小，可写任意个百分比（对应多个页面），只要加起来为100%即可。（其实不为100%也不会报错……）

        设置每个框架内显示的页面，可以为网址，也可以为本地的文档。

        框架之间的分割线可用鼠标拖拽来调整页面大小，若要禁用，可在相应处设置属性noresize="noresize"。

        另外要注意的是，写于之外，或者说，与不能同在，除非使用，在<noframes>中使用<body>，从而当浏览器无法正确显示框架时显示出<body>中的相应信息：</p> <pre class="has"><code class="language-html"><html> <frameset cols="50%,50%"> <frame src="index1.html"/> <frame src="index2.html"/> <noframes> <body>您的浏览器无法处理框架！</body>

        若要在当前页面不仅仅有框架，还要求有其他元素，可以使用内联框架，这个是写在之中的：

        src可以是本地网页，也可以是网址、图片等等。在src后面可以使用width、height定义框架大小，frameborder设置边框粗细。

        以下为与内联框架的互动：（通过按钮使内联框架内显示不同页面）

        


    
        原来是页面1
        
    
    
        点击打开页面2

        HTML自学笔记#2_第10张图片HTML自学笔记#2_第11张图片

         

        头部元素

        即中的部分，一般写于之前，提供关于页面本身的信息（如页面标题、默认设置等等）

        元素</h3> <p>规定页面在浏览器标签页所显示的标题，若没有，则会显示本地网页的文件名。</p> <pre class="has"><code class="language-html"><html> <head> <title>我是标题

        我是正文

        HTML自学笔记#2_第12张图片

        元素

        规定页面上所有链接的默认地址以及默认目标（target）

        


    
    



    不写网址也可打开

        即使在中不设置target，页面也还是会在新标签页打开（因为在）中规定了默认为_blank。

        然而，即使在中规定了默认网址，href却不能省，写成空字符串即可。

        若中有具体URL或本地文件，打开网页时会按照中网址来。但有例外：

        


    
    



    不写网址也可打开

        打开的是不是本地的index2.html，而是http://www.bilibili.com/index2.html，若用绝对地址则不会出现以上情况。

        元素

        定义网页与外部资源之间的关系，常用于连接外部样式表来设计内容显示效果。

        元素

        定义网页的元数据（metadata），即描述数据的数据（data about data），可使用定义网页内容简介、作者、修改日期、关键字等，按一定规则定义这些内容可方便搜索引擎对网页的索引。

        

    
    
    
    


    
        这是一个简单的网页

        第一个定义了网页内容的形式和编码方式。

        通过http-equiv，可以设置网页的重定向：

        


    


    
        该网页不存在，5秒后会跳转到首页
        
    
        若未跳转，请点击：首页

        HTML自学笔记#2_第13张图片

         

        表单

        ，用于收集用户输入。

        元素

        属性type定义用户的输入类型，有单行的文本输入框，但有两种形式：type="text"的用户可见自己的输入；type="password的不可见。

        


    
        
        请输入用户名：
        
        
        
        
        请输入密码：

        HTML自学笔记#2_第14张图片

        单选按钮（type="radio"）

        
    男
    
        
    女

        复选框（type="checkbox"）

          
    1
    
        
    2

        按钮（type="button"），这里写了一个点击后弹出“Hello World”提示信息的按钮。实际上，单独的

        HTML自学笔记#2_第15张图片

        向表单处理程序提交表单的按钮（type="submit"）。

        不仅在输入方式上多样，在辅助用户输入方面也有不少功能强大的属性：

        value属性：规定输入字段的初始值。

          
    
        请输入

        HTML自学笔记#2_第16张图片

        readonly属性：输入框内的内容由value确定，无法由用户更改。

        disabled属性：输入框被禁用，其值不会被提交。disabled下框变成灰色，内容无法被选中。（readonly下可被选中）

        HTML自学笔记#2_第17张图片

        maxlength属性：规定用户输入内容的最大长度。例如下面设为5，则用户在这个框内只能输入5个字符（无论中英文）。

        HTML5为加入了大量输入类型，功能极为强大，也加入多种属性，可对用户的输入进行更为灵活、全面的辅助，此处暂不列举。

        一样也是输入框，为下拉列表形式。

        HTML自学笔记#2_第18张图片

        元素

        用于组合表单中的数据，其中元素用于为

        定义标题。

        

        
    用户登录
    
        请输入用户名：
        
    
        
    
        请输入密码：

        HTML自学笔记#2_第19张图片

        action属性

        定义提交表单时执行的动作，若无该属性，则默认为点击submit后打开当前页面。一般所执行的内容通过脚本规定。

        要使用户输入内容能正确提交且被脚本所用，一般获取用户输入的元素、

我的标题
Name Phone Number
John 1521336 1526688