• HTML基础

    目录

    1.HTML的第一个实例

    2.HTML标题，段落，链接标签

    3.加粗，放大，斜体，上标，下标

    4. 定义了所有链接的URL

    5. img标签

    6.table标签  注意border

    7.单元格间距

    8.有序列表，无序列表

    9.div布局

    10.form表单的单选框，复选框，下拉框

    11.iframe框架 

    12.HTML脚本

    1.HTML的第一个实例

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>菜鸟教程(runoob.com)title>
    6. head>
    7. <body>
    8.  
    9. <h1>我的第一个标题h1>
    10.  
    11. <p>我的第一个段落。p>
    12.  
    13. body>
    14. html>

    2.HTML标题，段落，链接标签

    1. html>
    2. <html>
    3. <head>
    4. <meata charset="utf-8">
    5. <title>新手教程title>
    6. head>
    7. 	
    8. <body>
    9. <h1>这是标题 1h1>
    10. <h2>这是标题 2h2>
    11. <h3>这是标题 3h3>
    12. <h4>这是标题 4h4>
    13. <h5>这是标题 5h5>
    14. <h6>这是标题 6h6>
    15. 	
    16. <p>这是一个段落p>
    17. 	
    18. 	<a href="www.baidu.com">这是一个链接a>
    19.  
    20. body>
    21. html>

     

    3.加粗，放大，斜体，上标，下标

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<title>教程title>
    6. head>
    7. <body>
    8. <b>加粗字体b>
    9. 	
    10. <br>
    11. 	
    12. <strong>字体加粗<strong>
    13. 	
    14. <br>
    15. 	
    16. <big>这个文本字体放大big>
    17.  
    18. <br />
    19.  
    20. <em>这个文本是斜体的em>
    21.  
    22. <br />
    23.  
    24. <i>这个文本是斜体的i>
    25.  
    26. <br />
    27.  
    28. <small>这个文本是缩小的small>
    29.  
    30. <br />
    31.  
    32. 这个文本包含
    33. <sub>下标sub>
    34.  
    35. <br />
    36.  
    37. 这个文本包含
    38. <sup>上标sup>
    39.  
    40. body>	
    41. html>

     4. - 定义了所有链接的URL

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. <base href="https://www.runoob.com/images/" target="_blank">
    7. head>
    8.  
    9. <body>
    10. <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.runoob.com/images/logo.png"
    11. <br><br>
    12. <a href="https://www.runoob.com">菜鸟教程a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
    13.  
    14. body>
    15. html>

     

    5. img标签

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head>
    7. <body>
    8.  
    9. <p>一个来自文件夹中的图像:p>
    10. <img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:p>
    11. <img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">
    12.  
    13. body>
    14. html>

     

    6.table标签  注意border

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head>
    7. <body>
    8.  
    9. <p>
    10. 每个表格从一个 table 标签开始。 
    11. 每个表格行从 tr 标签开始。
    12. 每个表格的数据从 td 标签开始。
    13. p>
    14.  
    15. <h4>一列:h4>
    16. <table border="0">
    17. <tr>
    18.   <td>100td>
    19. tr>
    20. table>
    21.  
    22. <h4>一行三列:h4>
    23. <table border="1">
    24. <tr>
    25.   <td>100td>
    26.   <td>200td>
    27.   <td>300td>
    28. tr>
    29. table>
    30.  
    31. <h4>两行三列:h4>
    32. <table border="1">
    33. <tr>
    34.   <td>100td>
    35.   <td>200td>
    36.   <td>300td>
    37. tr>
    38. <tr>
    39.   <td>400td>
    40.   <td>500td>
    41.   <td>600td>
    42. tr>
    43. table>
    44.  
    45. body>
    46. html>

    7.单元格间距

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head>
    7. <body>
    8.  
    9. <h4>没有单元格间距:h4>
    10. <table border="1">
    11. <tr>
    12.   <td>Firsttd>
    13.   <td>Rowtd>
    14. tr>
    15. <tr>
    16.   <td>Secondtd>
    17.   <td>Rowtd>
    18. tr>
    19. table>
    20.  
    21. <h4>单元格间距="0":h4>
    22. <table border="1" cellspacing="0">
    23. <tr>
    24.   <td>Firsttd>
    25.   <td>Rowtd>
    26. tr>
    27. <tr>
    28.   <td>Secondtd>
    29.   <td>Rowtd>
    30. tr>
    31. table>
    32.  
    33. <h4>单元格间距="10":h4>
    34. <table border="1" cellspacing="10">
    35. <tr>
    36.   <td>Firsttd>
    37.   <td>Rowtd>
    38. tr>
    39. <tr>
    40.   <td>Secondtd>
    41.   <td>Rowtd>
    42. tr>
    43. table>
    44.  
    45. body>
    46. html>

     

    8.有序列表，无序列表

    9.div布局

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head>
    7. <body>
    8.  
    9. <div id="container" style="width:500px">
    10.  
    11. <div id="header" style="background-color:#FFA500;">
    12. <h1 style="margin-bottom:0;">主要的网页标题h1>div>
    13.  
    14. <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    15. 	<b>菜单b><br>
    16. 	HTML<br>
    17. 	CSS<br>
    18. 	JavaScript
    19. div>
    20.  
    21. <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    22. 内容在这里
    23. div>
    24.  
    25. <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    26. 版权 © runoob.com
    27. div>
    28.  
    29. div>
    30.  
    31. body>
    32. html>

     10.form表单的单选框，复选框，下拉框

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head>
    7. <body>
    8.  
    9. 	
    10. <form action="">
    11. 账号：<input type="text" name="账号"><br>
    12. 密码：<input type="password" name="密码"><br>
    13. <select name="cars">
    14. <option value="volvo">Volvooption>
    15. <option value="saab">Saaboption>
    16. <option value="fiat">Fiatoption>
    17. <option value="audi">Audioption>
    18. select>
    19. <input type="submit" value="提交">	
    20. form>
    21.  
    22. body>
    23. html>

    11.iframe框架 

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head> 
    7. <body>
    8.  
    9. <iframe src="demo_iframe.htm" name="iframe_a">iframe>
    10. <p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COMa>p>
    11.  
    12. <p><b>注意：b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。p>
    13.  
    14. body>
    15. html>

     12.HTML脚本

    1. html>
    2. <html>
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)title> 
    6. head>
    7. <body>
    8.  
    9.  
    10. <script>
    11. 	document.write("hello")
    12. script>
    13.  
    14. body>
    15. html>

  • 相关阅读:
    Nginx基础理论
    CF1644C Increase Subarray Sums
    Android Studio版本升级后的问题 gradle降级、jdk升级
    基于深度学习的场景文本检测
    游戏滚动列表的优化（降低drawcall从154降低到14，图片大小，界面逻辑）
    华为机试真题 Java 实现【玩牌高手】
    【历史上的今天】6 月 27 日：摩托罗拉创始人出生；微软发布 ASP.NET Core；靠计算机起家的美国大亨
    springcloud微服务（一）（了解微服务、eureka注册中心、Ribbon负载均衡）
    nginx 安全配置
    29.精讲JavaScript字符串，常见的基础方法以及特殊字符、emoji内部表示方式
  • 原文地址：https://blog.csdn.net/weixin_47188125/article/details/127682555