码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • HTML


    html初识 

      一、 学习html的目标:认识网页组成和五大浏览器,明确Web标准的构成。使用HTML骨架搭出一个网页。

           认识网页。网页包括 :文字、图片、视频、音频、超链接。(超链接指:点击文字或图片链接到其他的页面),网页是由代码编辑出来的。分为前端(html、css、js)和后端(php、mysql、Java),前端是看到的内容,由前端人员开发。后端是看不到的操作,比如:数据的处理等。

    浏览器:是网页显示、运行的平台,是前端开发必备利器。常见的浏览器包括:IE、火狐浏览器(Firefox)、谷歌(chrome)、Safari浏览器、Opera(欧朋)。

    二、Web标准中分三个构成

    构成       语言        说明

    结构       HTML     页面元素和内容

    表现    css       外观和位置等页面样式(大小、颜色等)

    行为     js(javascript)  网页模型的定义和页面的交互

    三、1.html的概念:专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述       

    2.构建网页的基本步骤:1.新建一个文本文档  2.在文本中输入代码等内容,结束保存  3.修改文件后缀为html    4.打开html,就会显示之前输入的内容    

    3.(1)代码的组成:是由很多的标签组成   (2)标签分单、双。  单:自成一体   双:由开始标签和结束标签组成 

    四、HTML骨架结构    1.网页类似文章,也有开头、正文、结尾。但网页的固定结构叫做整体、头部、标题、主体...     2.网页中的结构是通过特定的HTML标签进行描述。  结构代码如下图:

    1. <html lang="en">
    2. <head>
    3. <meta charset="UTF-8">
    4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5. <title>Documenttitle>
    6. CSS/JS
    7. head>
    8. <body>
    9. HTML
    10. body>
    11. html>
    12. 例如:
    13. <html lang="en">
    14. <head>
    15. <meta charset="UTF-8">
    16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    17. <title>Documenttitle>
    18. head>
    19. <body>
    20. <h1>这是我的音乐收藏夹h1>
    21. <hr>
    22. <h3>这是音乐h3>
    23. <h3>这是图片h3>
    24. <p>哈哈哈哈哈你想看小狗吗,<a href="./4-图片.html">点击这里a>p>
    25. body>
    26. html>

    ctrl+y 恢复原样    ctrl+a 全选    ctrl+f 查找   ctrl+d 批量选中   ctrl+z 撤回      ctrl+c 复制

    ctrl+v 粘贴    ctrl+x 剪切    ctrl+s 保存

             添加媒体文件:   1.图片:加载失败时的替代文本     [../] 表示上一级文件目录  [./] 表示当前目录/下级目录    2.音频:    3.视频:。 音频、视频  tips:现在很多浏览器不支持自动播放。   4.超链接: 点击的内容   

    1. 瞄点

     六、列表标签  

    1. 列表:有多条数据 整体列表 列表中的每一项 =列表项
    2. 无序列表
    3. 有序列表
    4. 自定义列表
    5. 无序列表 ul>li 特点:每一个列表项前面带一个小圆点
    6. ul标签代表 整个列表
    7. li标签代表 列表中的每一项
    8. 注意:ul中只能放li标签,li中可以放任何内容
    9. 有序列表 ol>li 特点:每一个列表项前是数字
    10. ol标签 代表整个列表
    11. 属性:
    12. start 开始的序号
    13. type 序号类型 a、A、i、I
    14. li标签 代表每一个列表项
    15. ol里只能放li ,li可以放任何内容
    16. 自定义列表 dl>dt/dd 特点:dd标签会缩进
    17. dl 表示 整个列表
    18. dt 表示 列表中的小标题
    19. dd 表示 列表中的每一项

    七、表格标签

    1. table 表格标签
    2. 属性:
    3. border边框 width 宽 height高
    4. tr 行 td 单元格
    5. align 对齐方式 :center(中间) 内容居中
    6. 表格的大标题,默认在表格的中间 小标题 默认 加粗 居中
    7. rowspan 合并行 colspan合并列

    八、表单

    1. 标签名
    2. {
    3. 样式:样式值
    4. }
    5. 1- 什么是表单?(注册、登录、搜索、)
    6. 用于收集用户的信息
    7. form标签 整体的表单
    8. 属性:
    9. action 提交地址(将数据提交给后台)
    10. method 提交方式(get\post)
    11. get 不太安全 数据显示在地址栏上
    12. post
    13. 前端 数据展示 页面效果
    14. 后端 处理数据 a.php
    15. input标签 输入框
    16. 属性:
    17. disabled 禁用
    18. readonly 只读
    19. placeholder 提示内容 自定义内容
    20. name 名字 方便后台接收数据 name=value 自定义内容
    21. value 输入的值 默认值 (提交给后台的值) 自定义内容
    22. type 类型
    23. text 文本
    24. password 密码
    25. file 上传文件
    26. radio 单选框 checked
    27. checkbox 多选框 checked
    28. email 邮箱
    29. date 日期
    30. button 普通按钮
    31. submit 提交按钮
    32. image 图片提交 src指定图片路径名称
    33. reset 重置按钮
    34. select 标签
    35. 单选、多选框
    36. name的值 统一
    37. 必须要加value属性。否则获取到的on
    38. checked属性 默认选中
    39. select下拉框标签 下拉框的框架
    40. option下拉框选项
    41. 属性:
    42. selected 下拉框默认选中
    43. 文本域textarea cols 列 rows 行

       

  • 相关阅读:
    聚观早报|腾讯新专利可鉴别换脸;钟睒睒再度成为中国首富
    ChatGPT全球最大开源平替OpenAssistant:基于Pythia和LLaMA微调而来
    机器人运动学笔记
    未知bug导致程序异常退出或重启如何定位?
    多因素身份认证之手机推送认证
    【电路笔记】-平均电压和均方根电压(RMS Voltage)
    单链表排序
    95837-47-1,羧基衍生物ICG(indocyaninegreen)
    JS数组排序
    flink-cdc实时同步mysql数据到elasticsearch
  • 原文地址:https://blog.csdn.net/2401_83693610/article/details/138187985
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号