HTML基础
  TEZNKK3IfmPf 2023年11月15日 29 0

HTML基础

<sup></sup>上标
<sub></sub>下标
<mark></mark>突出显示
<!DOCTYPE html>  告诉浏览器要使用什么规范
<head>   代表网页的头部
<meta>   用来描述网站的一些信息
<title>  网页的标题
<body>   网页的主题

2、网页的基本标签

<h1></h1>   标题标签

<p></p>     段落标签

<br/>       换行标签

<hr>        水平标签

<strong></strong>  粗体

<em></em>   斜体

       空格

©      版权

3、图像标签

<img src="path" alert="text"  title="text" width="x" height="y" />
  • src:图像地址【相对路径;绝对路径。】

  • alert:当图像不显示,显示文字

  • title:鼠标悬停提示文字

  • width:图像宽度

  • height:图像高度

4、连接标签

<a href="https://www.ctyun.cn/portal/link.html?target=path" target="目标窗口位置">l文字描述或者图片</a>
  • href:链接路径

  • target:链接在哪个窗口打开【_blank:新窗口。_selg:在自己的网页打开】

4.1 超链接

从一个页面跳转到另外一个页面

4.1 锚点链接

实现同一个页面内的跳转。

实现:

  • 1、需要一个标记<a name="top">顶部</a>

  • 2、跳转到标记<a href="https://www.ctyun.cn/portal/link.html?target=%23top%26gt%3B%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8%26lt%3B%2Fa%26gt%3B%E2%80%8B%3C%2Fcode%3E%E2%80%8B%3C%2Fli%3E%3C%2Ful%3E%3Ch2+id%3D"h6">5、块元素和行内元素

    5.1 块元素

    • 无论内容多少,该元素只占一行

    • p h 标签

    5.2 行内元素

    • 内容撑开宽度,左右都是行内元素的可以排在一行

    • strong em span 标签

    6、列表标签

    6.1 有序列表(order list)

    <ol>
     <li>...</li>
     <li>...</li>
     ...
    </ol>

    6.2 无序列表(unorder lsit)

    <ull>
     <li>...</li>
     <li>...</li>
     ...
    </ul>

    6.3 自定义列表

    • dl:标签

    • dt:列表名称(名词)

    • dd:列表内容(名词解释)

    <dl>
     <dt>...</dt>
     <dd>...</dd>
     <dd>...</dd>
     <dd>...</dd>
         ...
    </dl>

    7、表格标签

    table:表格

    • thead:头部区域

    • tbody:身体部分

    • tfoot:尾部

    • th:一般是猎头(代表列,自动居中)

    • tr:代表行

    • td:代表列

    <!DOCTYPE html>
    <html>

     <head>
       <meta charset="UTF-8">
       <title></title>
     </head>

     <body>
       <table border="1px solid black">
         <thead>
           <tr>
             <th>姓名</th>
             <th>性别</th>
             <th>年龄</th>
           </tr>
         </thead>

         <tbody>
           <tr>
             <td>小明</td>
             <td>女</td>
             <td>18</td>
           </tr>
           <tr>
             <td>小黑</td>
             <td>男</td>
             <td>18</td>
           </tr>
         </tbody>
       </table>
     </body>

    </html>

    HTML基础

    合并行或者列

    <td colspan="2">合并两列</td>
    <td rowspan="2">合并两行</td>
    <!DOCTYPE html>
    <html>

     <head>
       <meta charset="UTF-8">
       <title></title>
     </head>

     <body>
       <table border="1px solid red">
         <tr>
           <th>名称</th>
           <th>价格</th>
           <th>数量</th>
         </tr>

         <tr>
           <td colspan="2">合并列</td>
           <td>8</td>
         </tr>
         <tr>
           <td>香蕉</td>
           <td>12</td>
           <td>8</td>
         </tr>
         <tr>
           <td>苹果</td>
           <td rowspan="2">合并行</td>
           <td>9</td>
         </tr>
         <tr>
           <td>橘子</td>
           <td>34</td>
         </tr>

       </table>

     </body>

    </html>

    HTML基础

    8、媒体元素

    src:资源路径
    controls:控制条
    autoplay:自动播放

    • 视频元素 :viedo

    <viedo src="path" controls autoplay></viedo>
    • 音频元素:audio

    <audio src="path" controls autoplay></viedo>

    9、页面结构分析

    header:标题头部区域的内容

    • footer:标记脚部区域的内容

    • section:web页面中的一块独立区域

    • article:独立的文章内容

    • aside:相关内容或应用

    • nav:导航类辅助内容

    10、iframe内联框架

    src:引用页面地址,开始加载的时候
    mainFrame:框架标识符

    <iframe src="path" name="mainFrame"></iframe>
    <!DOCTYPE html>
    <html>

     <head>
       <meta charset="UTF-8">
       <title></title>
     </head>

     <body>
       <iframe src="" name="myPath" frameborder="0" width="500px" height="800px"></iframe>

       <a href="https://www.ctyun.cn/portal/link.html?target=https%3A%2F%2Fwww.baidu.com" target="myPath">百度</a>
     </body>

    </html>

    11、form表单

    method:post/get 提交数据的方式
    action:将数据提交到哪里

    11.1 文本框和单选框

    • type:指定元素的类型(text、password、CheckBox、radio、submit、reset、file、button、image。默认text)

    • name :指定表单元素的名称

    • 用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

    • value:元素的初始值

    • size:指定表单元素的初始宽度

    • maxlength:type为text、password时,输入的最大字符

    • checked:type为radio、CheckBox时,指定按钮选中

    姓名:<input type="text" value="猪佩琪" name="username" maxlength="8" /><br />
    密码:<input type="password" value="123" name="pwd" maxlength="8" />

    单选框

    • radio:指定为单选框

    • name:指定选择项为统一组

        <input type="radio" name="gender" value="boy" checked />男
       <input type="radio" name="gender" value="girl" />女

    11.2 按钮和多选框

    多选框

    • CheckBox:指定为多选框

    • name:指定选择项为统一组

    <input type="checkbox" name="sport" value="baseball"  checked/>篮球
    <input type="checkbox" name="sport" value="football" />足球
    <input type="checkbox" name="sport" value="pingpangball" checked/>乒乓球

    按钮

    • 普通按钮

    • 提交按钮(submit)

    • 重置按钮(reset)

    <input type="button" name="bt1" value="按钮1" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />

    11.3 列表框文本和文件域

    列表框:

      <select name="列表名称">
             <option value="选项的值">西瓜</option>
             <option value="选项的值">苦瓜</option>
             <option value="选项的值">哈密瓜</option>
           </select>

    文本域

    <textarea name="textarea" cols="5" rows="5">66666666666666666666</textarea>

    12、搜索滑块和简单验证

    • max:最大值

    • min:最小值

    • step:每次变化的量

    数值变化
    <input type="number" name="num" max="100" min="0" step="10" />

    滑块
    <input type="range" name="voice" min="0" max="50" step="5" />


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月15日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年03月30日   49   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月22日   105   0   0 html框架
  TEZNKK3IfmPf   2024年04月26日   36   0   0 htmlScala
  TEZNKK3IfmPf   2024年03月29日   50   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   90   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月22日   96   0   0 htmljava
  TEZNKK3IfmPf   2024年03月29日   53   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   53   0   0 htmljQuery
TEZNKK3IfmPf