• 前端与HTML

    这是我参加青训营的第一天


     一、什么是前端

    用于解决人图形界面下的人机交互问题 使用Web技术栈解决多端用户图形交互


    二、前端技术栈
        HTML(结构和内容)、CSS(样式)、JavaScript(行为),通过网络协议,与服务器端产生联系


    三、前端需要注意哪些
        

    四、开发环境
     

    五、什么是HTML


    六、HTML的基本骨架

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8"/>
    5.     <title>这是我的第一个网页title>
    6.   head>
    7.   <body>
    8.     <h1>标题1 h1>
    9.   body>
    10. html>


    七、一些新手值得记得的知识点
        1、自定义列表有序

    1. html> 
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <title>定义列表title>
    6. head>
    7. <body>
    8.    <dl>
    9.        <dt>导演dt>
    10.        <dd>张三dd>
    11.        <dd>李四dd>
    12.        <dd>王五dd>
    13.    dl>
    14. body>
    15. html>

     有序列表和无序列表属性

    有序：

    无序;

     

     

    2、各种链接（包括视频和声音，图片）

     其中还可以加width,height,alt,title去补充。

    3、输入（表单）

    代码格式示例

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <title>title>
    6. head>
    7. <body>
    8.     <form method="post">
    9.         账号：<input type="text" size="15" maxlength="10" /><br />
    10.         密码：<input type="password" size="15" maxlength="10" />
    11.     form>
    12. body>
    13. html>

     另外单选框和复选框示例

    单选框必须设置name属性，一个name相当与一个组，一个组里的只能一个被选中，checked顾名思义就是默认被选中。

    1. <form method="post">
    2.         性别:
    3.         <input type="radio" name="gender" value="男" checked/>男
    4.         <input type="radio" name="gender" value="女" />女
    5.     form>

     复选框

    1.  <form method="post">
    2.         你喜欢的水果：<br/>
    3.         <input type="checkbox" name="fruit" value="苹果" checked/>苹果
    4.        <input type="checkbox" name="fruit" value="香蕉" />香蕉
    5.         <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
    6.     form>

     文件上传

    1.  <form method="post">
    2.         <input type="file"/>
    3.     form>

     

    下拉列表：

    1. <select multiple>
    2.             <option>HTMLoption>
    3.             <option>CSSoption>
    4.             <option>jQueryoption>
    5.             <option>JavaScriptoption>
    6.             <option>Vue.jsoption>
    7.             <option>HTML5option>
    8.             <option>CSS3option>
    9.         select>

     设置multiple才会会先多行显示，不设置一次只显示一行，也可以通过size直接设置一次显示几行。

    同样在标签里如果设置了selected就是默认被选。

    另外锚点链接和按钮有点多，放绿叶网的链接让大家自己去看

    锚点链接：锚点链接 - HTML | 绿叶学习网 (lvyestudy.com)

    按钮链接:  按钮 - HTML | 绿叶学习网 (lvyestudy.com)

    4、块内元素和行内元素：

    • （1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
    • （2）块元素内部可以容纳其他块元素和行内元素。
    •   (3)   按规范来写p元素中不能放块内元素，但你写了一些浏览器会自动帮你矫正，包括你把一些元素卸载标签外，他都能把你改正。
    • （1）行内元素可以与其他行内元素位于同一行。
    • （2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

     另外块内元素也可以通过css设置成与行内元素一样的特性。

    5、html语义化

    以表格为例

    1. <table>
    2.     <caption>表格标题caption>
    3.     
    4.     <thead>
    5.         <tr>
    6.             <th>表头单元格1th>
    7.             <th>表头单元格2th>
    8.         tr>
    9.     thead>
    10.     
    11.     <tbody>
    12.         <tr>
    13.             <td>表行单元格1td>
    14.             <td>表行单元格2td>
    15.         tr>
    16.         <tr>
    17.             <td>表行单元格3td>
    18.             <td>表行单元格4td>
    19.         tr>
    20.     tbody>
    21.     
    22.     <tfoot>
    23.         <tr>
    24.             <td>标准单元格5td>
    25.             <td>标准单元格6td>
    26.         tr>
    27.     tfoot>
    28. table>

    这里引进了thead和tbody,tfoot等标签，不加其实效果一样，但这是为了其他开发者好理解，利于团队协作。 

    多人协作开发值得注意的 

    提到表格就有两个属性不得不说，那就是rowspan和colspan，顾名思义就是表格中一格数据占几行或者几列。

    1. <td rowspan = "跨越的行数">td>
    2. <td colspan = "跨越的列数">td>

     6、嵌入页面（iframe)

    、

    7、一些符号：

    一些常用的标签：

    实例：

    1. html>
    2. <html>
    3.     <head>
    4.         
    5.         <title>1title>
    6.     head>
    7.     <body>
    8.         <p><strong>(a+b)<sup>2sup>strong>=a<sup>2sup>+b<sup>2sup>+2abp>
    9.         <p><em>H<sub>2sub>So<sub>4sub>em>+2NaOH=Na<sub>2sub>So<sub>4sub>+2H<sub>2sub>op>
    10.     body>
    11. html>

     

    9标签

    1设置字符集例:charset="utf-8"

    2name属性(提供给搜索引擎的，跟流量有关系)

    有常见的keywords,搭配content属性还有author,description,copyright。

  • 相关阅读:
    〖Python APP 自动化测试实战篇②〗 - 大话闲扯 APP 自动化工具的演进史
    [每周一更]-(第18期)：Postman全局配置token信息,加速测试接口进度
    JAVA商城和PHP商城的区别
    jfinal中如何使用过滤器监控Druid监听SQL执行？
    shardingsphere做了读写分离做了主从配置脱敏无效分析
    消息中间件介绍
    docker的conda环境中安装mindspore（CPU版本？）
    宝塔显示100%负载100%cpu解决办法
    在SpringSecurity + SpringSession项目中如何实现当前在线用户的查询、剔除登录用户等操作
    Android SurfaceControlViewHost介绍及使用
  • 原文地址：https://blog.csdn.net/m0_53394907/article/details/125977816