html笔记(完整版)

标记 类型 译名或意义 作 用 备注
文件标记
文件声明 让浏览器知道这是HTML文件
开头 提供文件整体信息
标题 定义文件标题,将显示于窗口标题
本文 设计文件格式及内文所在
段落标记
说明标记 为文件加上说明,但不被显示

段落标记 为文字、图片、表格等之间留一空白行

换行标记 令文字、图片、表格等显示于下一行

水平线 插入一条水平线
居中 令文字、图片、表格等显示于页面中央 不建议使用
保留原格式 令文件按照原始格式的排列方式显示
区域标记 设定文字、图片、表格等的摆放位置
强制不分行 令文字不因太长而自动换行
根据宽度换行 根据浏览器的大小显示文本
字体标记
加重语气 产生字体加粗Bold的效果
粗体标记 产生字体加粗的效果
强调标记 字体出现斜体效果
斜体标记 字体出现斜体效果
打字字体 Courier字体,字母宽度相同
加上底线 加上底线 不建议使用

一级标题标记 变粗变大加宽,程度与级数反比

二级标题标记 将字体变粗变大加宽

三级标题标记 将字体变粗变大加宽

四级标题标记 将字体变粗变大加宽
五级标题标记 将字体变粗变大加宽
六级标题标记 将字体变粗变大加宽
字形标记 设定字形、大小、颜色 不建议使用
基准字形标记 设定所有字形、大小、颜色 不建议使用
字体加大 令字体稍为加大
字体缩细 令字体稍为缩细
画线删除 为字体加一删除线 不建议使用
程式码 字体稍为加宽如
键盘字 字体稍为加宽,单一空白
范例 字体稍为加宽如
变数 斜体效果
传记引述 斜体效果
引述文字区块 缩排字体
述语定义 斜体效果
地址标记 斜体效果
下标字 下标字
上标字 指数(平方、立方等)
列表标记
    有序列表 列表项目将以数字、字母顺序排列
      无序列表 列表项目将以圆点排列
    • 列表项目 每一标记标示一项列表项目
      选单列表 列表项目将以圆点排列,如
        不建议使用
        目录列表 列表项目将以圆点排列,如
          不建议使用
          定义列表 列表分两层出现
          定义条目 标示该项定义的标题
          定义内容 标示定义内容
          表格标记
          表格标记 设定该表格的各项参数
          表格标题 做成一打通列以填入表格标题
          表格列 设定该表格的列
          表格栏 设定该表格的栏
          表格标头 相等于 ,但其内之字体会变粗
          表单标记
          表单标记 决定单一表单的运作模式
          文字区域 提供文字区域以输入更多文字
          输入标记 决定输入形式
          选择标记 建立下拉列表
          选项 每一标记标示一个选项(下拉列表时使用)
          图形标记
          图形标记 用以插入图形及设定图形属性
          连结标记
          链接标记 加入链接
          基准标记 可将相对URL转绝对及指定链接目标
          框架标记
          框架设定 设定框架
          框窗设定 设定框窗
          页内框架 于网页中间插入动态框架 IE
          不支援框架 设定当浏览器不支援框架时的提示
          影像地图
          影像地图名称 设定影像地图名称
          连结区域 设定各连结区域
          多媒体
          背景声音 于背景播放声音或音乐 IE
          多媒体 加入声音、音乐或影像
          其他标记
          滚动文字 令文字左右走动 IE
          闪烁文字 闪烁文字 NC
          页内寻找器 可输入关键字寻找于该一页 不建议使用
          开头定义 让浏览器知道这是HTML文件
          关系定义 定义该文件与其他 URL 的关系
          StyleSheet

          注:

          ► ● 表示该标记属成对标记,即需要关闭标记如

          ► ○ 表示该标记属空标记,即不需要关闭标记。

          ► IE 表示该标记只适用于 Internet Explorer。

          ► NC 表示该标记只适用于 Netscape Communicator。

          背景颜色 bgcolor

          <body bgcolor="blue">
          秦帅哥
          body>
          

          html笔记(完整版)_第1张图片

          注释

          不添加注释:

          <body>
          <body>
          秦帅哥
          秦帅哥
          body>
          

          1586962014062

          添加注释:

          <body>
          秦帅哥
          
          

          1586962453114

          空格 

          <body>
          秦 帅       哥<br>      body>
          

          html笔记(完整版)_第2张图片

          版权符©©

          <body>
          ©版权归秦帅哥所有
          body>
          

          1586962551600

          网页标题

          <head>
          
          <title>秦帅哥的网页标题title>
          head>
           
          <body>
          秦帅哥
          body>
          

          html笔记(完整版)_第3张图片

          标题标记

          共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小

          <body>
          <h1>秦帅哥h1>
          <h2>秦帅哥h2>
          秦帅哥
          <h6>秦帅哥h6>
          body>
          

          html笔记(完整版)_第4张图片

          网页编码

          <head>
          <meta charset="utf-8" />
          <title>秦帅哥的网页标题title>
          head>
          

          设置链接颜色link、alink、vlink

          link 链接的颜色

          alink 正在点击的颜色

          vlink 已经访问的连接颜色

          <body link="red" alink="yellow" vlink="green">
          <a href="http://www.baidu.com">百度a>
          <a href="http://www.taobao.com">淘宝a>
          body>
          

          强制换行标记

          <body>
          秦帅哥<br>
          秦帅哥
          body>
          

          html笔记(完整版)_第5张图片

          换段落标记

          <body>
          <p>秦帅哥p>
          <p>秦帅哥p>
          body>
          

          html笔记(完整版)_第6张图片

          居中对齐白标记

          <body>
          <center>秦帅哥center>
          body>
          

          1586962866774

          预格式化标记

          <body>
          <pre>秦 帅     哥pre>
          body>
          

          1586962884512

          列表项目标记
        • <body>
              <li>秦帅哥li>
              <li>秦帅哥li>
              <li>秦帅哥li>
              <li>秦帅哥li>
              <li>秦帅哥li>
          body>
          

          html笔记(完整版)_第7张图片

          无序列表标记

            <body>
            <ul>
              <li>秦帅哥li>
              <li>秦帅哥li>
              <li>秦帅哥li>
              <li>秦帅哥li>
              <li>秦帅哥li>
            ul>
            body>
            

            html笔记(完整版)_第8张图片

            有序列表标记

              <body>
              <ol>
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
              ol>
              body>
              

              html笔记(完整版)_第9张图片

              有序列表的type属性值

              html笔记(完整版)_第10张图片

              <body>
              <ol type="A">
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
              ol>
              body>
              

              html笔记(完整版)_第11张图片

              指定一个新的数字起始值value

              <body>
              <ol>
                <li>秦帅哥li>
                <li value="5">秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
                <li>秦帅哥li>
              ol>
              body>
              

              html笔记(完整版)_第12张图片

              列表嵌套

              <body>
              <ol>
                <li>秦帅哥li>
                <li>
                  <ol  type="A">
                    <li>秦帅哥li>
                    <li>秦帅哥li>
                    <li>秦帅哥li>
                  ol>
                li>
                <li>秦帅哥li>
                <li>秦帅哥li>
              ol>
              body>
              

              html笔记(完整版)_第13张图片

              定义型列表

              html笔记(完整版)_第14张图片

              <body>
              <dl>
                <dt>软件说明:dt>
                <dd>简单介绍软件的功能及基本应用dd>
                <dt>软件界面dt>
                <dd>用于选择软件的外观
                <dd>
              dl>
              body>
              

              html笔记(完整版)_第15张图片

              水平分割线标记

              <body>
              秦帅哥
              <hr>
              秦帅哥
              body>
              

              html笔记(完整版)_第16张图片

              分区显示标记

              <body>
              <div> 秦帅哥 div>
              <div> 秦帅哥 div>
              body>
              

              html笔记(完整版)_第17张图片

              字体设置标记

              设置字体的格式

              html笔记(完整版)_第18张图片

              <body>
              秦帅哥<br>
              <font size="14px" color="red" face="微软雅黑">秦帅哥font>
              body>
              

              html笔记(完整版)_第19张图片

              粗字体标记

              <body>
              秦帅哥<br>
              <b>秦帅哥b>
              body>
              

              html笔记(完整版)_第20张图片

              斜字体标记

              <body>
              秦帅哥<br>
              <i>秦帅哥i>
              body>
              

              html笔记(完整版)_第21张图片

              文字下标字体标记

              <body>
              2<sub>3sub>
              body>
              

              1586963298121

              文字上标字体标记

              <body>
              2<sup>3sup>
              body>
              

              1586963312177

              下划线字体标记

              <body>
              秦帅哥<br>
              <u>秦帅哥u>
              body>
              

              html笔记(完整版)_第22张图片

              其它标记

              html笔记(完整版)_第23张图片

              图像标记

              html笔记(完整版)_第24张图片

              <body>
              <img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px">
              <img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px" border="5px">
              <img src="file:///D|/孤独秦哥/2/ha.pg" width="200px" height="200px" alt="灰太狼">
              body>
              

              html笔记(完整版)_第25张图片

              超链接的使用

              html笔记(完整版)_第26张图片

              在当前窗口中打开链接

              <body>
              <a href="http://www.baidu.com">百度a>
              <a href="Test2.html">test2a>
              body>
              

              1586963501713

              在一个新的窗口中打开链接

              <body>
              <a href="http://www.baidu.com" target="_blank">百度a>
              body>
              

              img

              锚点链接

              <body>
               <a name="dingbu">a>
               <a href="#dibu">到页面底部a>
                  <br>内容<br>
               <a href="#dingbu">到页面顶部a>
               <a name="dibu">a>
              body>
              

              html笔记(完整版)_第27张图片

              表格

              1.标记

              html笔记(完整版)_第28张图片

              2.

              标记

              html笔记(完整版)_第31张图片

              4.

              标记

              html笔记(完整版)_第29张图片

              <head>
                <title>表格title>
                <meta charset="utf-8">
              head>
              <body>
                <table width="500px" height="230px" border="1px" align="center"  cellspacing="0px"> 
                  <caption>表格的标题caption>
              	  <tr>
              		<th align="cernter">班级th>
              		<th>姓名th>
              		<th>年龄th>
              		<th>成绩th>
              	  tr>
              	  <tr align="center" valign="center">
              		<td>四年级一班td>
              		<td>张三td>
              		<td>16td>
              		<td>80td>
              	  tr>
              	  <tr>
              		<td>四年级一班td>
              		<td>李四td>
              		<td>14td>
              		<td>90td>
              	  tr>
                table>
              body>
              

              html笔记(完整版)_第30张图片

              3.

              html笔记(完整版)_第32张图片

              <body>
                <table width="500px" height="230px" border="2px" cellspacing="0px"> 
              	<tr>
              	  <td colspan="2">td><td>td><td>td>
              	tr>
              	<tr>
              	  <td>td><td>td><td rowspan="2">td><td>td>
              	tr>
              	<tr>
              	  <td>td><td>td><td>td>
              	tr>
                table>
              body>
              

              html笔记(完整版)_第33张图片

              框架

              框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果

              html笔记(完整版)_第34张图片

              <html>
                <head>
                  <title>框架title>
                  <meta charset="utf-8">
                head>
              
                <frameset rows="190px,*,190px">
                  <frame>
                  <frameset cols="20%,80%">
                    <frame>
                    <frame>
                  frameset>
                  <frame>
                frameset>
              html>
              

              html笔记(完整版)_第35张图片

              表单设计

              1.表单标记

              html笔记(完整版)_第36张图片

              2.文本域和密码标记

              html笔记(完整版)_第37张图片

              3.提交、重置、普通按钮

              img

                <body>
                  <form method="post">
              	  账号:<input type="text" name="zhanghao" size="10" maxlength="5">
              	  <br>
              	  <br>
              	  密码:<input type="password" name="mima" size="10">
              	  <br>
              	  <br>
              	  <input type="submit" value="提交">
              	  <input type="reset" value="重置">
                  form>
                body>
              

              html笔记(完整版)_第38张图片

              4、单选框和复选框

              img

                <body>
                  <form>
                    
                    性别:
                    <input id="man" type="radio" name="sex" checked="checked"><input id="woman" type="radio" name="sex">form>
                body>
              

              img

                <body>
                  <form>
                    
                    爱好:
                    <input type="checkbox" name='foods' value='niurou'>牛肉
                    <input type="checkbox" name='foods' value='caixin'>菜心
                    <input type="checkbox" name='foods' value='lianou'>莲藕
                  form>
                body>
              

              img

              5、隐藏域

              当时,为隐藏表单域

                <body>
                  <form>
                    <input type="hidden" value="隐藏的内容" name="yincang">
                  form>
                body>
              

              6、多行文本域

              html笔记(完整版)_第39张图片

                <body>
                  <form>
                    自我介绍:<br>
                    <textarea name="ziwojieshao" rows="5" cols="35">
                    textarea>
                  form>
                body>
              

              html笔记(完整版)_第40张图片

              7、菜单下拉列表域标记

              html笔记(完整版)_第41张图片

                <body>
                  <form>
                    地址:<br>
                    <select name="dizhi">
                      <option value="sichuan">四川option>
                      <option value="beijing">北京option>
                      <option value="shanghai">上海option>
                    select>
                  form>
                body>
              

              img

              原文链接:https://blog.csdn.net/tswc_byy/java/article/details/81530183

              你可能感兴趣的:(HTML)