博客园 首页 新随笔 联系 订阅 管理

1.HTML标题

标题标签  ->   <h1></h1>...<h6></h6>

注:

  (1)从h1到h6,越来越小

  (2)在一个网页中,每一个<h1></h1>标签只能出现一次

 

2.HTML段落

段落标签  ->  <p></p>

 

3.HTML文本修饰标签

<strong></strong>    表示强调,对文本进行加粗

<em></em>       表示强调,使文本斜体

<sub></sub>        下标文本

<sup></sup>        上标文本

<del></del>        删除线

<ins></ins>        插入线

 

4.HTML图片标签

<img> 标签

属性:

  (1)src        图片的路径

  (2)alt        当图片加载错误时显示的一段友好文字

  (3)title        提示信息

  (4)width、height  图片的宽与高

注:

  (1)相对路径:相对于某一个文件的路径

  (2)绝对路径:真实的路径

  (3)./ 表示当前目录下,../ 表示上一级目录下

 

5.HTML跳转链接

  <a>标签

  属性:

    (1)href:所跳转的链接的地址

    (2)target:改变链接打开的方式,默认情况下是在当前页面打开:_self, 若设置为" _blank" 则是在新的页面打开

    (3)也可以在<head></head>标签中加入base标签,并设置target为"_blank",就等同于设置所有的<a>标签的target属性为_blank

  注:跳转锚点

    (1) # 号 + id

      href = "#id1"   <tag id="id1">content1</tag>

    (2) # 号 + name

      href = "#name1" <a name="name1"></a>

6.HTML特殊符号

  概念:在编写一些文本时,经常会遇到无法输入的字符,这些无法输入的字符都是特殊字符。HTML为这些特殊字符准备了专门的代码。

  例:

    (1) & + lt;    左键括号

    (2) & + gt;   右尖括号

    (3) & + nbsp;   空格

    (4) & + copy;   版权

    (5) & + reg;     注册商标

    (6) & + amp;    和号

    (7) & + yen;     人民币

    (8) & + deg;     摄氏度

 

7.HTML列表

  (1) 无序列表

      <ul>

         <li>content</li>

          ......

         <li>content</li>

      </ul>

   注:

      (1) ul和li必须是组合出现的,且他们之间不能有其他标签

      (2) type属性,改变前面标记的样式

        <ul type="value">

           <li>content</li>

            ......

           <li>content</li>

        </ul>

        value可以取disc、circle、square

 

  (2) 有序列表    

      <ol>

         <li>content</li>

          ......

         <li>content</li>

      </ol>

    注:

      (1)有序列表用的非常少,一般用的是无序列表,无序列表可以替代有序列表

      (2)type属性,改变前面标记的样式    

        <ol type="value">

           <li>content</li>

            ......

           <li>content</li>

        </ol>

        value可以取"A"、"a"、"I'、"i"

  

  (3) 定义列表

    <dl>:定义列表

    <dt>:定义专业术语和名词

    <dd>:对名词进行解释和描述

 

  (4) 嵌套列表

    列表之间可以相互嵌套形成多级列表

   

8.HTML表格

  (1)表格标签

  <table>    表格的最外层容器

  <tr>     定义表格行

  <th>     定义表格头

  <td>     定义表格单元

  <caption>  定义表格标题

 

  注:

    语义化标签

    <tHead>、<tBody>、<tFoot>

    在一个表格中<tBody>可以出现多次,<tHead>和<tFoot>只能出现一次

  

  (2)表格属性

    border       表格边框

    cellpadding    单元格内的空间

    cellspacing    单元格间的空间

    rowspan      合并行

    colspan       合并列

    align         左右对齐方式  (left、center、right)

    valign        上下对齐方式  (top、middle、bottom)

 

    注:

       cellpadding、cellspacing、border -> <table></table>

         rowspan、colspan -> <td></td>

         align、valign -> <tr></tr>

9.HTML表单

  (1) 表单标签

    <form> 表单的最外层标签

      action=""  提交的路径

 

    <input> 搜集信息的input框

 1       <h2>输入框</h2>
 2       <input type="text" placeholder="请输入用户名">
 3       <h2>密码框</h2>
 4       <input type="password" placeholder="请输入密码">
 5       <h2>复选框</h2>
 6       <input type="checkbox" checked>苹果
 7       <input type="checkbox" disabled>香蕉
 8       <input type="checkbox"> 9       <h2>单选框</h2>
10       <input type="radio" name="gender">11       <input type="radio" name="gender">12       <h2>上传文件</h2>
13       <input type="file">
14       <h2>提交和重置按钮</h2>
15       <input type="submit">
16       <input type="reset">

      注:

         (1)对于checkbox,checked表明默认勾选,disabled则表明禁选

         (2)对于radio, 一定要给元素加上name属性,并设置name属性的值相同

   

    <textarea> 多行文本

1 <textarea name="" id="" cols="30" rows="10"></textarea>

 

    <select> <option>下拉菜单

      

 1 <h2>下拉菜单</h2>
 2         <select>
 3             <option selected disabled>请选择</option>
 4             <option>北京</option>
 5             <option>上海</option>
 6             <option>杭州</option>
 7         </select>
 8 
 9         <select size="3">
10             <option>请选择</option>
11             <option>北京</option>
12             <option>上海</option>
13             <option>杭州</option>
14         </select>
15 
16         <select multiple>
17             <option>北京</option>
18             <option>上海</option>
19             <option>杭州</option>
20         </select>

      注:其中的selected表明该选项默认勾选,disabled则表明禁选

        size表明显示的项数,multiple则表明多选

    <label> 标签

  注:

    还有一些常见属性:checked、disabled、name、for

 

  表格表单之间可以组合形成数据展示效果

10. div 和 span

  (1) div:划分区域

    div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。

    即HTML中大多数的标签都可以嵌套在<div>标签中,<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。


  (2) span(内联):文本修饰
    用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行。
    
    注意:没有任何默认样式
posted on 2021-12-30 14:53  Computer_Science  阅读(145)  评论(0编辑  收藏  举报