• Web开发之HTML知识点总结

    HTML是超文本标记语言，用来写静态网页的语言，是设计页面的基础，由标签组成的语言，能展示超文本效果，即可以展示图片，由样式的文字，带跳转页面的文字等。HTML文件直接由浏览器解析，无需编译，正常由上到下执行，一般的HTML标签是开始标签和结束标签包裹内容体，当然也有空标签。

    目录

    1-HTML的字体标签和格式化标签

    2-HTML之图片标签

    3-HTML之列表标签

    4-HTML之超链接标签

    5-HTML之表格标签

    6-HTML之块标签

    7-HTML之表单标签

    1-HTML的字体标签和格式化标签

    HTML可以设置字体大小和字体颜色，字体类型等，可以设置标题类型 ，设置空格，换行，设置段落标签等。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>字体标签和和格式化标签title>
    6. head>
    7. <body>
    9. <font color="red" size="7" face="宋体">早上好！！！font><br/>
    11. <h1>静夜思,这是1级标题h1>
    12. <h2>静夜思,这是2级标题h2>
    13. <h3>静夜思,这是3级标题h3>
    14. <h4>静夜思,这是4级标题h4>
    15. <h5>静夜思,这是5级标题h5>
    16. <h6>静夜思,这是6级标题h6>
    18. <p>这是默认居左的段落标签p>
    19. <p align="center"> 这是居中的段落标签p>
    20. <p align="right"> 这是居右的段落标签p>
    22. 在李和白字间加空格,李 白
    24. body>
    25. html>

    2-HTML之图片标签

    HTML的图片标签可以用于加载本地图片和网页上的图片，具体如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML的图片标签title>
    6. head>
    7. <body>
    9. <img src="../a.jpg" width="100px" height="100px"/>
    10. <img src="../b.jpg" width="50%" height="50%"/>
    11.  
    13. <img src="https://www.51tietu.net/qingchungirl/190327.html" width="500px" height="500px">
    14. body>
    15. html>

    3-HTML之列表标签

    HTML的列表标签主要包括无序列表和有序列表两种，具体如下:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML的列表标签title>
    6. head>
    7. <body>
    10. <ul>
    11.     <li>无序列表行1li>
    12.     <li>无序列表行2li>
    13.     <li>无序列表行3li>
    14.     <li>无序列表行4li>
    15. ul>
    17. <ol>
    18.     <li>有序列表行1li>
    19.     <li>有序列表行2li>
    20.     <li>有序列表行3li>
    21.     <li>有序列表行4li>
    22. ol>
    23.  
    24. body>
    25. html>

    4-HTML之超链接标签

    HTML的超链接的可以链接到外网的网页地址，也可以是HTML页面，也可以链接到一张图片等，超链接的内容可以是文字或者图片。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML的超链接标签title>
    6. head>
    7. <body>
    9. <a href="ziti.html">这是跳转到另一个HTML的链接a>
    10. <a href="http://www.baidu.com">这是跳转到百度首页的链接a>
    11.  
    13. <a href="http://www.baidu.com">
    14.     <img src="../a.jpg" width="100px" height="100px">
    15. a>
    16.  
    18. <a href="../a.jpg">链接到一张图片a>
    19.  
    20. body>
    21. html>

    5-HTML之表格标签

    HTML的表格标签可以设置表格宽度，线框，设置表头单元格，设置跨行和跨列合并等。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML的表格标签title>
    6. head>
    8. <body>
    10. <table border="1px" width="100%">
    11.     <tr>
    12.         <th>姓名th>
    13.         <th>语文th>
    14.         <th>数学th>
    15.         <th>外语th>
    16.     tr>
    17.     <tr>
    18.         <td>张三td>
    19.         <td>100td>
    20.         <td>89td>
    21.         <td>90td>
    22.     tr>
    23.     <tr>
    24.         <td>李四td>
    25.         <td>98td>
    26.         <td>97td>
    27.         
    28.         <td rowspan="2">78td>
    29.     tr>
    30.     <tr>
    31.         
    32.         <td colspan="2">王五td>
    33.         <td>97td>
    34.  
    35.     tr>
    36. table>
    37. body>
    38. html>

    6-HTML之块标签

    HTML的快标签主要包含行级快标签span和块级块标签div，具体如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML的块标签title>
    6. head>
    7. <body>
    8. <span>这是行级快标签,有多少内容就会占用多少空间span>
    9. <span>这个标签不会自动换行,适用于少量数据的展示span>
    10. <div>这是块级的块标签,默认占满一行div>
    11. <div>该标签会自动换行,适用于大量数据的展示div>
    12. body>
    13. html>

    7-HTML之表单标签

    HTML的表单标签为form标签，主要包括文本框，密码框，单选框，复选框，文件框，多选列表，文本域，提交按钮，重置按钮等。form表单中,action表示提交到的位置,method表示提交的方法,get和post两种，get方法会将参数拼接到地址栏，适合少量数据的提交，post方式的提交参数不会拼接地址栏,适合当量的数据提交,相对比较安全。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML的表单标签title>
    6. head>
    7. <body>
    11. <form action="biaoge.html" method="get">
    12.     uid:<input type="hidden" name="uid" value="wang"/><br/>
    13.     用户名:<input type="text" name="username" /><br/>
    14.     密码:<input type="password" name="password"/><br/>
    15.     性别:<input type="radio" name="sex" value="man" checked="checked">男
    16.     <input type="radio" name="sex" value="woman">女<br/>
    17.     爱好:<input type="checkbox" name="hobby" value="programming" checked="checked"/>编程
    18.     <input type="checkbox" name="hobby" value="run"/>跑步
    19.     <input type="checkbox" name="hobby" value="read"/>阅读<br/>
    20.     只读:<input type="text" name="name1" value="****" readonly="readonly"/><br/>
    21.     不可用:<input type="text" name="name2" value="*****" disabled="disabled"/><br/>
    22.     照片:<input type="file" name="file"/><br/><br/><br/>
    23.     城市:<select name="city" multiple="multiple">
    24.         <option value="beijing" selected="selected">北京option>
    25.         <option value="shanghai">上海option>
    26.         <option value="nanjing">南京option>
    27.         <option value="hangzhou">杭州option>
    28.     select><br/><br/>
    29.     个人简介:<textarea name="short">textarea><br/><br/><br/>
    30.     <input type="submit" value="提交">
    31.     <input type="reset" value="重置表单">
    32.     <input type="button" value="普通按钮">
    33. form>
    34. body>
    35. html>
  • 相关阅读:
    Nature Microbiology | SeqCode：基于序列数据描述的原核生物命名规则
    Linux嵌入式文件IO一文全部搞定【6万字爆肝文学】
    微服务守护神-Sentinel-概念
    深圳超力源7220 电摩保护板联调时一个CAN盒解决所有的问题
    HTTP Debugger抓包
    【机器学习】聚类算法中的距离度量有哪些及公式表示？
    rancher2.6.4配置管理k8s，docker安装
    企业网盘中支持在线编辑的有哪些选项？
    【擎标】CCID信息系统服务商交付能力等级认证标准
    连接云服务器Docker中的Mysql 详细图文操作（全）
  • 原文地址：https://blog.csdn.net/nuist_NJUPT/article/details/126361409