HTML 初识

玛卡巴卡的卡巴卡玛  论坛元老 | 2025-4-19 08:02:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1659|帖子 1659|积分 4977

段落标签

  1. <p>
  2.     <!-- 段落标签 -->
  3.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.
  4.   </p>
  5. <p>
  6.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nam assumenda harum voluptate vel minus nesciunt aspernatur, expedita reiciendis officiis exercitationem odit at fugit eos voluptatum nisi voluptatem dolorem labore.
  7.   </p>
复制代码
 利用<p></p>可以分段，在其中输入多个空格大概换行都只是相当于输入一个空格。

空格符

如果要有多个空格，则须要 利用HTML的空格符：
 

 下面是示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>我的第一个HTLM文件</title>
  7. </head>
  8. <body>
  9.     <!-- <h1>一级标题</h1>
  10.     <h2>二级标题</h1>
  11.     <h3>三级标题</h1>
  12.     <h4>四级标题</h1>
  13.     <h5>五级标题</h1>
  14.     <h6>六级标题</h1> -->
  15.     <p>
  16.     <!-- 段落标签 -->
  17.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.
  18.     </p>
  19.     <p>
  20.     <!-- &nbsp; 非断行空格 -->
  21.       &nbsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum sapiente fugiat excepturi, qui amet laboriosam necessitatibus, tempore officia ipsa hic numquam asperiores, eaque quae velit doloribus illum modi! Cum, aspernatur.
  22.    
  23.     </p>
  24.      <!-- &ensp; 半角空格，宽度为当前字体的一半 -->
  25.     &ensp;  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea iste architecto incidunt. Numquam, earum, autem vero aliquid reprehenderit repudiandae voluptatibus quasi minus repellendus quod provident itaque a iure illum beatae.
  26.      
  27.     <p>
  28.     <!-- &emsp; 全角空格，宽度等于当前字体-->
  29.     &emsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat fugiat aliquam delectus veritatis tempore. Laboriosam veniam odit laborum officiis sed est temporibus quas, ducimus alias culpa voluptatibus ad illum libero.
  30.     </p>
  31.     <p>
  32.         <!-- &thinsp;窄空格，宽度小于一个字符 -->
  33.         &thinsp;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolor tempore nobis, eius consequatur veniam quasi id? Quae, rerum voluptatibus inventore accusantium tempore sapiente temporibus! Officia autem ducimus error magni.
  34.     </p>
  35. </body>
  36. </html>
复制代码
可以自行比对一下这些空格符号的区别。 

换行符

换行符<br/>大概<br> 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>第一个HTLM文件</title>
  7. </head>
  8. <body>
  9.     <p>
  10.         第一行<br/>
  11.         第二行<br>
  12.         第三行
  13.     </p>
  14. </body>
  15. </html>
复制代码
下面是刷新后的页面表现： 
 

图片标签

<img src="" alt="" width="" height="">
img：标签。src、alt：标签的属性，width、teight：宽度和高度，只设置一个会高宽等比例缩放
src可以填本机的图片的绝对路径，也能复制网上的图片链接。 
  1. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  7.     <meta charset="UTF-8">
  9.     <meta name="viewport" content="width=, initial-scale=1.0">
  11.     <title>第一个HTLM文件</title>
  13. </head>
  15. <body>
  17.     <img src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650" alt="这是一个图片">
  22. </body>
  24. </html>
复制代码
 运行效果可以自行试试。
超链接：a 

外部链接

    <a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9">百度</a>
   href：表示点击后会跳转到哪个页面， 
target：打开方式，默认_self，如果是_blank，则用新标签页打开
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>第一个HTLM文件</title>
  7. </head>
  8. <body>
  10.        <a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9" target="_blank">百度</a>
  12. </body>
  13. </html>
复制代码
 href内填的是网页的连接地点，target是转跳方式，在这里_blank是以新页面打开超链接。
内部链接

   <a href="test1.html"  target="_blank">test1</a><br>
   test1.html是本机上的一个html文件，我们也可以通过指定本机的绝对路径大概是相对路径进行转跳。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>第一个HTLM文件</title>
  7. </head>
  8. <body>
  9.    
  10.     <a href="test1.html"  target="_blank">test1</a><br>
  11.    
  12. </body>
  13. </html>  
复制代码
下载文件 

   <a href="1.rar">下载文件</a>
   href链接如果是个压缩包，点击链接可以下载对应路径下已经已创建的压缩文件。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>第一个HTLM文件</title>
  7. </head>
  8. <body>
  10.     <a href="1.rar">下载文件</a>
  12. </body>
  13. </html>  
复制代码
表格标签

   table标签：表示表格
  tr：表示表格的一行
  tb：表示一个单元格
  thead：表格的头部区域
  tbody：表格的主题区域
   
  table包含tr、tr包含tb
   table的参数：style可以设置表格的长宽，border设置线的粗细和颜色
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>第一个HTLM文件</title>
  7. </head>
  8. <body>
  10.     <table style="width: 500px;  height: 400;" border="1px black">
  11.          <tr>
  12.             <td colspan="2">a</td>
  13.             <!-- <td>b</td> -->
  14.         </tr>
  15.         <tr>
  16.             <td>c</td>
  17.             <td>d</td>
  18.         </tr>
  19.         <tr>
  20.             <td>e</td>
  21.             <td>f</td>
  22.         </tr>
  23.         <tr>
  24.             <td>g</td>
  25.             <td>h</td>
  26.         </tr>
  27.         <tr>
  28.             <td>i</td>
  29.             <td>j</td>
  30.         </tr>
  32.     </table>
  34. </body>
  35. </html>  
复制代码
生成的单元格长这样：

如果不想要边框，我们可以在table接着添加其他的参数，如：cellspacing = "0"可以去掉空缺线
       <table style="width: 500px;  height: 400;" border="1px black" cellspacing = "0">
  单元格合并 

            <tr>
              <td colspan="2">a</td>
              <!-- <td>b</td> -->
          </tr>
   td标签里添加colspan = ""与rowspan=""标签可以选择合并单元格行列：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=, initial-scale=1.0">
  6.     <title>第一个HTLM文件</title>
  7. </head>
  8. <body>
  10.     <table style="width: 500px;  height: 400;" border="1px black" cellspacing = "0">
  11.         <tr>
  12.             <td colspan="2">a</td>
  13.             <!-- <td>b</td> -->
  14.         </tr>
  15.         <tr>
  16.             <td>c</td>
  17.             <td rowspan="3">d</td>
  18.         </tr>
  19.         <tr>
  20.             <td>e</td>
  21.             <!-- <td>f</td> -->
  22.         </tr>
  23.         <tr>
  24.             <td>g</td>
  25.             <!-- <td>h</td> -->
  26.         </tr>
  27.         <tr>
  28.             <td>i</td>
  29.             <td>j</td>
  30.         </tr>
  32.     </table>
  34. </body>
  35. </html>  
复制代码
 

表单标签

1：表单域

包含表单元素的区域.重点是form标签
2：表单控件

输⼊框,提交按钮等.重点是input标签
form 标签

  1. <form action="test.html">
  2. ... [form
  3. 的内容
  4. ]
  5. </form>
复制代码
 描述了要把数据按照什么⽅式,提交到哪个⻚⾯中 
input 标签

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框。
type(必须有),取值种类许多,button,checkbox,text,file,image,password,radio等.。
 name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀。
value:input中的默认值，转达给后端判断前端的选择。
checked:默认被选中.(⽤于单选按钮和多选按钮)。
selected：默认被选中值。
placeholder：在输入框里表现的字体。
用户名(文本框)text

  1. <input type="text" size="30" placeholder="请输入用户名">
复制代码
size：最大字数 
密码 password

  1. <input type="password" size="30" placeholder="请输入密码">
复制代码
 单选按钮 radio

  1. <input type="radio" name = "gender"id = "gender1"> <label for ="gender1">男</label>
  5.             <input type="radio" name = "gender"id = "gender2"> <label for ="gender2">女</label>
  7.             <input type="radio" name = "gender"id = "gender3"> <label for ="gender3">保密</label><br>
  9.  
复制代码
 lable标签可以点击其中的内容选定按钮；单选框之间必须具备相同的name属性,才能实现多选⼀效果
 复选框checkbox

  1.                   <input type="checkbox" name="hobby" id="" value="1">篮球
  3.             <input type="checkbox" name="hobby" id="" value="2">足球
  5.             <input type="checkbox" name="hobby" id="" value="3">羽毛球
  7.             <input type="checkbox" name="hobby" id="" value="4">排球
  9.             <input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>
复制代码
  按钮方法  

  1.                     <button>这是button标签，按钮1</button>
  3.                     <input type="button" name="" id="" value="按钮2">
  5.                     <input type="submit" value="按钮3，提交，搭配form标签使用">
复制代码
 下拉标签Subject

  1.             专业：<select name="" id="">
  3.                 <option name="Subject" value="1">大数据</option>
  5.                 <option name="Subject"value="2"selected>软件工程</option>
  7.                 <option name="Subject" value="3">物联网</option>
  9.                 <option name="Subject" value="4">人工智能</option>
复制代码
selected:默认选项
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>表单练习</title>
  7. </head>
  8. <body>
  9.      <form action="test1.html" method="get"><!--action提交给谁，method以什么方式提交（传参） -->
  10.    用户名(文本框) <input type="text" size="30"><br>
  11.    密码（密码框）<input type="password" size="30"><br>
  12.    单选按钮 <input type="radio" name = "gender"id = "gender1" value="1"> <label for ="gender1">男</label>
  13.             <input type="radio" name = "gender"id = "gender2" value="2"> <label for ="gender2">女</label>
  14.             <input type="radio" name = "gender"id = "gender3" value="3"> <label for ="gender3">保密</label><br>
  15.     复选框  <input type="checkbox" name="hobby" id="" value="1">篮球
  16.             <input type="checkbox" name="hobby" id="" value="2">足球
  17.             <input type="checkbox" name="hobby" id="" value="3">羽毛球
  18.             <input type="checkbox" name="hobby" id="" value="4">排球
  19.             <input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>
  21.             <!-- 下拉标签 -->
  22.             专业：<select name="" id="">
  23.                 <option name="Subject" value="1" >大数据</option>
  24.                 <option name="Subject"value="2"selected>软件工程</option>
  25.                 <option name="Subject" value="3">物联网</option>
  26.                 <option name="Subject" value="4">人工智能</option><br>
  27.             </select>
  28.             <!-- 文本域 -->
  29.             个人简介：<textarea rows="10" cols="50"></textarea>
  30.             <!-- <button>这是button标签（按钮第一种写法，可以搭配form标签使用）</button>
  31.             <input type="button" name="" id="" value="按钮第二种方法"> -->
  32.             <input type="submit" value="第三种按钮，提交，搭配form标签使用">
  33.         </form>
  35.         </body>
  36. </html>     
复制代码
下面是打开后的样子 ：

 无语义标签div&span

div 标签,division 的缩写,寄义是分割 span标签,寄义是跨度。
就是两个盒⼦.⽤于⽹⻚结构。
div是独占⼀⾏的,是⼀个⼤盒⼦，span不独占⼀⾏，是⼀个⼩盒⼦。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div>一个div</div>
  10.     <div>一个div</div>
  11.     <div>一个div</div>
  12.     <span>一个span</span>
  13.     <span>一个span</span>
  14.     <span>一个span</span>
  15. </body>
  16. </html>
复制代码
 

实战：创建一个登录页面

由于我们并不须要真的转达给后端，所以在这做个壳子就行了。
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>用户注册</title></head><body>    <h1>用户注册</h1>    <table>        <tr>            <td>用户名</td>            <td>                <input type="text"  placeholder="请输入用户名">            </td>        </tr>        <tr>            <td>手机号</td>            <td>                <input type="text" size="30" placeholder="请输入手机号">            </td>        </tr>        <tr>            <td>密码</td>            <td>                 <input type="password" size="30" placeholder="请输入密码">            </td>        </tr>    </table>    <div>        <button>注册</button><span>已有账号？</span><a href="#">登录</a>    </div>    </body></html>
复制代码
 

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

玛卡巴卡的卡巴卡玛

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表