HTML基础

    技术2022-07-11  103

    HTML基础

    HTML含义

    Hyper Text MARKUP Language(超文本标记语言)

    HTML创建

    任意的文本类型的文件只要把后缀名变成.html.htm就可以变成一个html文件

    通过编辑器直接创建

    HTML运行

    直接双击就可以在当前电脑的默认浏览器打开

    通过编辑器进行网页运行

    vs code需要安装插件open in browservs 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里面只能是lidl里面只能有

    属性 用来开始标签内部 用来指定当前标签某些方面的特定规则

    <标签 属性1=属性值1 属性名2=属性值2>内容</标签>

    注释 对于当前代码的注解和说明 只有开发人员需要查看

    实体 部分不方便直接在html中做出内容输出的符号会通过特殊的方式来表示

    用<;来表示左尖括号用>;来表示右尖括号用&;用来表示&符号用 ;用来实现空格

    网页的主体结构

    文档声明(告诉浏览器当前工作正在解析的是什么文档)html开始标签 head开始标签(进行网页基础的设置 标题 编码 语言 关键词…) meta标签 设置具体的属性title标签 设置标题 head结束标签body开始标签(放置网页具体的内容)bodyj结束标签 html结束标签
    Processed: 0.010, SQL: 9