HTML基础

最新推荐文章于 2024-09-16 23:05:35 发布

Key NG

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量148

点赞数 1

分类专栏： Web开发文章标签： html

本文链接：https://blog.csdn.net/qq_41658624/article/details/107072709

版权

Web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础

HTML含义

Hyper Text MARKUP Language（超文本标记语言）

HTML创建

任意的文本类型的文件只要把后缀名变成.html.htm就可以变成一个html文件
通过编辑器直接创建

HTML运行

直接双击就可以在当前电脑的默认浏览器打开
通过编辑器进行网页运行
- vs code需要安装插件open in browser
- vs code中快速运行 alt+b
打开以后在修改网页并保存之后就可以直接刷新浏览器界面

HTML编写

标签（标记）以尖括号的方式，包裹的一对、或者一个单词，让普通文本能够具有更多的特性的结构
- 常用标签（一般通过单词或者用途来称呼每一个标签）
  - div标签区块分割普通的块标签
  - span标签普通的行标签
  - b标签-可以让当前文本变粗
  - i标签可以让当前文本倾斜
  - h1~h6标签可以把当前文本变为一级到六级标题
  - s标签删除线标签
  - u标签下划线
  - p标签用来放置一段文字
  - pre标签预格式文本标签可以识别文本内容中的多个空格和换行
    - （
```
 标签的一个常见应用就是用来表示计算机的源代码。）
```
  - hr标签水平分割线
  - br标签进行换行
  - a标签表示网页链接
    - href用来跳转的地址
      - url网址 eg：https://www.baidu.com
      - 当前项目中的文件
        
        绝对地址通过目标文件在系统的目录位置指定一般不用
        相对地址通过目标文件和当前文件的相对位置来指定
        同一个文件夹下：./目标文件名字目标文件名字
        目标文件在当前文件同级的目录中：./同级目录/目标文件的名字 ./同级目录/目标文件的名字
        目标文件在当前文件的上级目录中：…/表示倒退几级 …/目标文件
        目标文件在当前文件的上级目录的同级目录中： …/目录名称/目标文件
  - target用来指定当前链接页面的的打开方式
    - _self（默认值）当前标签页中打开新页面
    - _blank 在新标签页中打开新页面
    - 其他值指定的窗口打开
  - 锚链接在进行页面跳转的时候额外的携带一些页面滚动位置的信息
    - 当前页面
      - 指定锚点
      - < a href= “#top”>顶部跳转到指定的锚点
      - 从其他页面进入进入时也可以通过地址+#锚点直接进入目标页面指定的位置
  - img图片标签用来向网页内引入一张图片
    - src 指定要引入图片的地址
    - alt 指定当图片引入失败的时候网页当中提示文字
    - width 指定图片的宽度只设置宽度的时候，高度会自动调整
    - height 指定图片的高度只设置高度的时候，宽度会自动调整
    - border 指定图片边框粗细
  - ul+li 组合，表示无序列表 ul标签内部必须使用li标签 li标签外部必须使用ul/ol标签
    - ul type属性设置当前列表标记样式
      - 空心圆circle
      - 方块 square
      - 实心圆disc
  - ol+li用来表示有序列表 ol内部必须使用li标签
  - dl+dt+dd自定义 dl外部容器 dt表示列表项的标题 dd表示列表项的内容
  - table+tbody+thead+tfoot+tr+th/d+caption
    - table用来表示整个表格容器
      - width表示宽度
      - height表示高度
      - border表示边框
      - borderColor 边框的颜色（单词、十六进制）
      - bgcolor 背景颜色
      - algin 当前表格的水平对齐方式
        left左对齐
        center居中
        right右对齐
      - valign 当前单元格的文字垂直对齐
        top middle botton
      - cellspacing 单元格之间的空隙
      - cellpadding 单元格和内容之间的距离
    - form 表示一组表单的容器
      - action 指定表单提交的地址
      - method指定表单提交的方式
      - enctype指定表单内容的组合
    - input表示某个表单控件
      - type指定当前input表单控件的类型
        text 普通文本输入
        password 密码输入
        radio 单选
        checkbox 多选
        file 文件上传文件域
        hidden 隐藏域
        submit 提交按钮
        reset 重置按钮
        button 普通按钮
      - name 提交给后台的字段名字
        复选框的name值后面必须跟上"[ ]"
      - value 表示值
        文本框密码框表示默认值
        单选框复选框该选项被选中时提交给后台的字段值
        按钮表示按钮里面的填充值
      - size表示长度
        用于文本框密码框按照字符的个数来计算
      - maxlength 表示内容的最大长度
        用于文本框、密码框
      - checked 表示默认被选中
        用于单选框、复选框
      - readonly 只读
      - disable 禁用
    - textarea表示文本域表单控件
      - rows指定行数
      - cols指定列数
    - select+option 表示下来表单控件
      - size 表示同时显示几个选项
      - multiple 表示是否可以多选
      - selected 表示下拉选项的默认值选中状态
    - button 表单表示按钮控件
    - label表示某个表单的标题
    - fieldset表示表单控件的分组
    - caption:设置表格的标题
    - th：表示表头
    - thead：表示表格头部
    - tbody：表示表格主体部分
    - tfoot：表示表格底部
    - tr:表示表格中的一行
    - td：表示表格中的单元格
- 开始标签结束标签对于特点的内容需要设置特殊样式可以把内容放置到开始标签和结束标签的中间，结束标签在单词前多一个斜杠
- 编辑器的快捷键标签名+tab键可以快速标签结构
- 普通的标签对于文本内容的多个空格和换行是不识别的
- 标签分类
  - 按照写法
    - 单标签 br hr
    - 双标签 b i s u h1~h6 p pre……
  - 按照特性
  - 行标签可以和其他标签共享一行一行位置不够会自动换行不能设置宽高 b s i u br
  - 块标签不能直接和其他标签共享一行每一个标签都要单独占据一行 h1~h6 p pre
  - 行内块级标签可以和其他行标签或者行内块级标签共享一行可以设置宽高 img input textarea select+option
- 标签嵌套
  - 标签内容可以是其他标签
  - 块标签和块标签之间一般是可以互相嵌套的块标签当中可以使用行标签行标签当中不能直接嵌套块标签行标签和行标签之间可以随意嵌套
  - 部分特殊标签不能随意嵌套
    - p标签当中一般只能嵌套行标签
    - ul\ol里面只能是li
    - dl里面只能有
属性用来开始标签内部用来指定当前标签某些方面的特定规则
- <标签属性1=属性值1 属性名2=属性值2>内容</标签>
注释对于当前代码的注解和说明只有开发人员需要查看
实体部分不方便直接在html中做出内容输出的符号会通过特殊的方式来表示
- 用&lt；来表示左尖括号
- 用&gt；来表示右尖括号
- 用&amp；用来表示&符号
- 用&nbsp；用来实现空格
网页的主体结构
- 文档声明（告诉浏览器当前工作正在解析的是什么文档）
- html开始标签
  - head开始标签（进行网页基础的设置标题编码语言关键词…）
    - meta标签设置具体的属性
    - title标签设置标题
  - head结束标签
  - body开始标签（放置网页具体的内容）
  - bodyj结束标签
- html结束标签