首页 前端知识 HTML的基础使用以及方法

HTML的基础使用以及方法

2024-08-21 22:08:05 前端知识 前端哥 181 838 我要收藏

一,HTML的使用

下载html的编辑器 vscode

  • vscode是前端轻量化服务器
  • 用于展示html页面
  • 可以热更新,保存之后效果立马更改,不需要要重新运行

1.1,html的标签

基础标签

  • html 根标签
  • head 头标签
  • body 身体标签
    html的其他标签可以分为6部分
    第一部分
  • div 块标签 可是我们最常用的标签可以铺满多行
  • h1-h6 一级到六级标题 是一个行级元素 航机元素不能嵌套行级标签 它的具体变现就是字体大小变化 加粗 加黑 有行距的一个效果
  • p 段落标签 行级元素
  • span 隔离标签
  • br 强制换行
  • hr 水平分割线
    第二部分
    第二部分是对于文本来构建 都可以单独选择
  • b 粗体 加粗
  • stong 加粗
  • i 斜体
  • em 斜体
  • del 删除线
  • u 下划线
  • sub 下标
  • sup 上标
    第三部分 列表标签
  • ol 有序列表 块级标签 也就是外框架
  • ul 无序列表 块级标签 外框架
  • li 列表项目 一般不会单独出现
  • dl 自定义列表 块级标签 外框架
  • dt 自定义列表项 顶格出现
  • dd 自定义列表项说明 缩进出现 一般写在dd下方
    第卅部分
    标签属性
    在开始标签对标签进行修饰
    table标签属性
  • border 外边框
  • cellspacing 单元格之间的大小
  • cellpadding 单元格中字体与单元格之间的距离
  • width 表的宽度
  • align 表的位置 可以使用center 进行居中
    tr/th/td 的标签属性
  • rowspan 列合并
  • colspan 行合并
  • tr 每一行 外框架的下一层框架
  • th 表头单元格
  • td 普通数据单元格
    第四部分
  • img 图片的插入
    src 图片的地址可以是本地插入 也可以其他服务器地址插入
    alt 可以不写 图片加载失败的提示信息
  • audio 音频
    src 地址
    controls 控件
  • a 超级链接
    点击 其中的内容,跳转到其中的网址
    herf 连接地址 支持外部服务器地址 和本地服务器地址
    target _blank 新空白页打开
    target id 锚点
  • video 视频
    src 地址
    controls 控件 显示
    第五部分
  • iframe 内联框架
    嵌入其他页面
    src 地址路径
    第一次请求原始页面 第二次请求iframe页面
    第六部分
  • 表单标签
    可以将瀛湖驶入的诗句提交到服务器
    from 表单域
    action 服务器地址
    method 提交方式 默认是get
    post 参数是以表单的形式进行提交
    免费服务器测试地址
    http://httpbin.org/get
    表单标签 input 一般配合lable lable的id要和input一致
    type类型
  • text 文本
  • password 密码
  • submit 提交
  • reset 重置
  • checkbox 多选
  • color 颜色
  • file 文件
    select 下拉选项
    textarea 自定义文本
    表单按钮
    input - submit
    input -reset
    input属性
  • placeholder 提示信息
  • requires 必填项目
  • checked 默认选中
  • select 下拉默认选择
    隐藏域
    看不见的也会提交到服务器
    type为hidden
    HTML的语义化标签
  • header 头部
  • nav 导航栏
  • footer 底部栏
  • main 主体
  • section 区域
  • article 文章
  • aside 侧边栏
    HTML的标准属性
    所有标签都可以使用的属性
  • id 单个html文件内部 一定要唯一
  • class 一个标签可以有多个类名 使用空格隔开
  • style 样式
  • title 鼠标划入提示信息
    HTML结构快速生成
  • 嵌套

  • *重复
    • 追加同级别
  • {} 内容
  • $ 递增数字
  • () 代表分组
  • lorem 速记内容
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16436.html
标签
评论
发布的文章

HTML5入门基础

2024-06-16 09:06:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!