登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›HTML网页基础(超文本标记语言)

HTML网页基础(超文本标记语言)

背竽 昨天 16:51
我终于对前端下手了（
1.1入门

1.创建html文件，后缀名为html或者htm
2.标签分类

  • 单标签
  • 双标签：有开始标签和结束标签 内容 内容  结束标签需要添加/
3.标签可以嵌套使用的（不能出现交叉嵌套）

  • 正确：这是文字
  • 错误：这是文字
4.在开始标签中可以定义属性，属性由键值对组成，值需要使用引号引起来。一个标签中可以写多个属性，多个属性之间使用空格隔开。
5.html的标签不区分大小写。建议都使用小写。
示例
  1. <html>
  2.     <head>
  3.         <title>title</title>
  4.     </head>
  6.     <body>
  7.         <font color='red' size = '5'>Hello World</font><br/>
  8.         <font color='green'>Hello World</font>
  9.     </body>
  10.        
  11. </html>
复制代码
1.png

1.2 常用标签

1.2.1 文件标签

构成html网页的基本标签
  1. 1.<!DOCTYPE html> 用于指定当前文档的类型
  2. 2.html ：是文档的根标签,html文档中只有一个根标签，其他的标签都只能是根标签的子标签。
  3. 3.head ：头标签 包含了文档的咨询信息，当前文档的配置，引入其他的资源。
  4. 4.meta ：告知浏览器，使用什么方式来编码。浏览器默认的编码方式是gbk
  5. 5.title：设置网页的标题
  6. 6.body：用于定义网页的主体内容
复制代码
例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.     </head>
  7.     <body>
  8.         好好学习 天天向上
  9.     </body>
  10. </html>
复制代码
1.2.2 文本标签
  1. 注释标签
  2. 标题标签 h1~h6
  3.         特点：具有加粗和加黑的效果。从h1~h6大小是逐级递减。标题标签独占一行。
  4. 段落标签：<p>段落的内容</p>
  5.         特点：段落与段落之间由空行隔开。
  6.        
  7. 换行标签：<br/>  注意：单标签的写法  <标签名/>
  8.        
  9. 水平线标签：<hr/>
  10.         属性：
  11.         1.color:设置水平线的颜色
  12.         2.width:设置水平线的宽度
  13.         3.align:设置水平线的对齐方式
  14.                 left  center(默认值)  rigth
  15.         4.size:设置水平线的粗细
  16.                
  17. 加粗标签: <b>粗体文本</b>         <strong>强调文本</strong>
  19. 倾斜标签：<i>斜体文本</i>  <em>强调斜体文本</em>
  21. 下划线标签:<u>带下划线的文本</u>
  23. 字体标签:font
  24.         font标签是字体标签 默认没有任何效果，需要结合属性使用
  25.             1.color:设置文字的颜色
  26.             2.size:设置文字的大小
  27.                 范围：1~7 超过7还是7,默认值为3.
  28.             3.face:设置文字的字体
  29.                 对应的需要在电脑中安装了对应的字体才有效果。（也可以使用css设计样式）
复制代码

  • 颜色的写法
  1. 1.直接写颜色单词：red  green  yellow  blue   pink  purple  orange
  2. 2.#6个数字   十六进制的数字（0~9a~f）
  3.             #ff0000  #E91D1D
  4. 2.rgb(数字1,数字2,数字3);数字的范围是0~255.存在浏览器兼容性问题。
复制代码

  • 尺寸的写法
  1. 1.数值  width="600" 单位默认就是px(像素)
  2. 2.百分比：width="50%" 占比相对于父元素的比例
复制代码
1.2.3 图片标签
  1. img标签
  2.     属性
  3.     1.src:设置要显示的图片的路径。这是一个必须的属性。
  4.     2.width:设置图片的宽度
  5.     3.height:设置图片的高度
  6.             为了保证图片不变形，设置了其中的一个 另一个就会等比例所缩放。
  7.     4.title:设置鼠标悬浮在图片上的提示信息
  8.     5.alt:设置图片不正常加载时的提示信息
  9.     6.title:设置图片边框的粗细
复制代码
示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>图片标签</title>
  6.     </head>
  7.     <body>
  8.         <img src="https://www.cnblogs.com/1.png" width="50%" height="40%" title="这个猫猫是我的！！！" alt="麻薯图片"                         border="50"/>
  9.     </body>
  10. </html>
复制代码
1.2.4 超链接标签
  1.   标签：
  2.     属性：
  3.           href:要链接的路径   如果要跳转到其他项目中 需要添加协议。
  4.          
  5.           target:设置连接打开的位置
  6.                   _self:在当前的窗体打开
  7.                   _blank ：在新窗体中打开
复制代码
示例
  1.   <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.       <meta charset="UTF-8">
  5.       <title>超链接页面</title>
  6.   </head>
  7.   <body>
  8.    
  9.       点击我可以 看猫猫     
  10.       跳转到京东
  11.       我是一个超链接
  12.   </body>
复制代码
1.2.5 表格标签

1.2.5.1 表格标签三要素
  1. table:定义表格
  2. tr:定义行
  3. td:定义单元格
复制代码
1.2.5.2 表格标签的属性
  1. 1.border：用于设置表格的边框粗细，表格默认没有边框。
  2. 2.cellspacing:设置单元格之间的距离
  3. 3.width:设置表格的宽度
  4. 4.height:设置表格高度
  5. 5.align:设置表格的对齐方式：left  center right
  6. 6.bgcolor:设置表格的背景颜色
  7. 7.cellpadding:设置内容到边框之间的距离
复制代码
示例
  1. <table border="1" cellspacing="0" width="50%" height="300px" align="center" bgcolor="orange" cellpadding="50">
  2.         
  3.         <tr>
  4.             <td>序号</td>
  5.             <td>姓名</td>
  6.             <td>年龄</td>
  7.         </tr>
  9.         
  10.         <tr bgcolor="#ffc0cb" align="center" height="50">  
  11.             <td>1</td>
  12.             <td>旺财</td>
  13.             <td>18</td>
  14.         </tr>
  15.         
  16.         <tr>
  17.             <td>2</td>
  18.             <td>小强</td>
  19.             <td>18</td>
  20.         </tr>
  22.         
  23.         <tr>
  24.             <td>3</td>
  25.             <td>小黑</td>
  26.             <td>18</td>
  27.         </tr>
  28.     </table>
复制代码
2.png

1.2.6 表单标签（用于收集用户信息,一次性提交后端,和服务器进行交互）

1.2.6.2 表单标签
  1. form:用于确定一个提交的范围,提交按钮在那个表单中就把那个表单提交
  2. 属性：
  3. action:用于指定表单提交到服务器的路径
  4. method:表单的提交方式
  5. get:【默认的】
  6.         1.数据是通过地址栏【url】提交的。
  7.         2.对数据提交有大小的限制。【浏览器限制的】
  8.         3.数据在地址栏中可见的，相对不安全。
  9. post:
  10.         1.数据是通过请求体提交。
  11.         2.对数据的提交没有大小的限制。
  12.         3.数据在地址栏中可见的，相对会更安全一些。
  14. 注意：get/post都是明文传输数据。都是不安全的。
复制代码
1.2.6.3 表单项标签
  1. 数据要能够提交 必须给框取名 通过name属性
  2.         input输入标记
  3.             0. number:数值输入框
  4.             
  5.             1.text:普通文本输入框
  6.                属性：
  7.                1.placeholder 设置输入框的提示信息。
  8.                2.size:设置输入框可见的宽度
  9.                3.value:设置输入框的默认值【可以修改】
  11.             2.password:密码输入框  输入的内容显示掩码。
  12.                1.placeholder 设置输入框的提示信息。
  13.                2.size:设置输入框可见的宽度
  14.                3.value:设置输入框的默认值【可以修改】
  15.                
  16.             3.radio:单选按钮
  17.                 真正提交的值是value中的值。
  18.                 要实现多个单元按钮只能选择一个，需要保证他们的name属性是一样的。
  19.                 checked:设置默认选中。
  21.             4.checkbox:复选按钮
  22.                 真正提交的值是value中的值。
  23.                 checked:设置默认选中。
  25.             5.date:日期组件
  27.             6.file:文件域
  29.             7.hidden:隐藏域
  30.                 使用场景：服务器需要这个数据，但是希望在浏览器中不要显示出来。
  32.             8.submit:提交按钮
  33.                 作用：将按钮所在的表单的内容提交到action指定的服务器中
  34.                 value:用于指定按钮上面的文字
  36.             9.reset:重置按钮
  37.                 作用：将表单的内容还原成最初的样子
  38.                 value:用于指定按钮上面的文字
  40.             10.button:普通按钮
  41.                 作用：默认没有任何作用，后期会结合点击事件使用。
  43.             11.image:图片提交按钮
  44.                 作用：将按钮所在的表单的内容提交到action指定的服务器中
复制代码
例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单标签</title>
  6. </head>
  7. <body>
  8.     <form action="#">
  9.         用户名：<input type="text">
  11.         密码：<input type="password">
  13.         年龄：<input type="number">
  15.         性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女
  17.         爱好：<input type="checkbox">唱歌
  18.               <input type="checkbox">跳舞
  19.               <input type="checkbox">睡觉
  20.               <input type="checkbox">打游戏
  22.         头像：<input type="file">
  24.         生日：<input type="date">
  26.         <input type="submit" value="提交信息">
  27.     </form>
  28. </body>
  29. </html>
复制代码
3.png


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
背竽
昨天 16:51

0

粉丝关注

7

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫