HTML基础语法

HTML基础语法

1. . 浏览器的特性
      任何的回车 或 连续多个空格, 都只解析成一个空格 或者 不解析
      利用浏览器的特性对代码做排版
      按键: Tab键
   . 注释
      不会显示在网页中
      对代码的描述
      快速回复记忆
      提高团队开发效率
      不能嵌套使用 <! - -  注释内容  - - >
   . 标签
      双标签:  <开始标签>  内容  </结束标签>
      单标签:  <开始标签>
   . 属性
      格式: 属性名 = "属性值"
      位置:   只能写在 开始标签中
      注意:   属性 与 属性之间至少保持一个空格
      属性 与 标签名之间至少保持一个空格
   . 标签名 和 属性名 不区分大小写
   ​

   样式标签:
   ​
       b加粗 i倾斜 u下划线 del删除线 sub下标 sup上标  br换行线hr水平线 p段落标签 pre原样输出 
   ​
   语义化标签:  
   ​
       strong强调表签程度较深 em强调表签程度较浅 

    

   列表标签
   场景一排排一列列皆可用列表标签
       无序列表
       <ul>
       <li></li>
       </ul>
       有序列表
       <ol>
       <li></li>
       </ol>
       定义列表
       <dl>
       <dt><dt>
       <dd><dd>
       </dl>

     实体符号
   ​
          将具有特殊意义的标签/属性 转换为普通字符
         &it小于; &gt大于;
         &nbsp空格; &yen人民币;
         &copy版权;  

   超链接
   ​
   •   标签名:a
   •   属性: href=URL
   •   URL:网址 URL不指定默认本页面
   ​
   ```
                       target=self 在本窗口打开
                       target=blank在新窗口打开
                       target=top在顶级窗口打开
   ```
   ​
   •   URL组成:http://www.baudi.com:80/image/jpg/xxx.jpg?name=zhouyao&sex=yao #锚点名
   •   1.协议 http
   •   2.域名 www.baidu.com
   •   3.端口 80 默认80端口
   •   4.路径 目录+文件名
   •   5.参数 href=url#锚点名 name=""
   •   PS:网址的最少组成:  协议+域名

    

   图片
   ​
       标签名: img        image
       属性  :
       src = URL       图片来源地址
       title 当鼠标悬停在图片上时, 显示title内容
       alt     当图片加载失败/延迟时, 显示alt内容
       width           宽度      
       height          高度
       URL分类
       绝对路径
       网址  
       / (最前面)localhost => www/    经过服务器
       盘符 
       / (最前面)      C:/                不经过服务器
       相对路径 (参照物)
       .           ./  当前目录下   默认
       ..          ../ 上一级目录下
   ​
       音频
   ​
       标签名: audio
       属性  :
       src = URL   音频来源地址
       controls    控制器
       autoplay    自动播放
       loop        循环播放
       source      媒介标签        用于兼容性
   ​
       视频
   ​
       标签名: video
       属性  :
       src = URL   视频来源地址
       controls    控制器
       autoplay    自动播放
       loop        循环播放
       source      媒介标签        用于兼容性

    

   表格
   ​
       标签:
       table       表格声明 
       caption     表格标题
       tr          表行 
       th          表头      加粗, 水平居中
       td          表格内容
       属性:
       border          边框
       cellspacing     单元格与单元格之间的距离
       cellpadding     单元格与内容之间的距离
       align           水平对齐方式
       left  center  right
       valign          垂直对齐方式
       top   middle  bottom
       rowspan         行合并
       colspan         列合并
       bgcolor         背景颜色
       background      背景图片

    

   表单常见标签
   ​
       form 表单声明action = URL 将表单提交给哪个服器
       method =            以什么样的形式提交给服务器
       get 默认
       明文传输 所有表单值都能在 网址中呈现
       安全性低
       速度快
       查
       传输大小 http协议上无限制, 受浏览器限制 < 2KB
       post
       密文传输
       安全性高
       速度慢
       增删改
       传输大小 http协议上无限制, 受服务器限制
       enctype = multipart/form-data    只有在上传文件时, 才需要
       input   类型表单
       属性
       name        给表单取名PS: 所有的表单, 都必须给name, 否则服务器接收不到
       value       给表单取个值
       可手动输入  : value可写可不写
       不可手动输入: value必须写
       type = text         文本域
       password    密码域
       checkbox    多选  
       radio       单选
       file        文件
       hidden      隐藏域
       number      数字
       email       邮箱
       search      搜索
       url             网址
       date        日期
        submit     提交按钮
        reset      重置按钮
       button      自定义按钮  废物, 配合js, 神一般存在
       select  下拉框
       option  下拉框内容
       textarea  多文本域
       rows    几行
       cols    几列
       button标签    自带提交效果

    

   常见表单属性
   •   name            表单名
   •   value           表单值
   •   maxlength       最大长度
   •   minlnegth       最小长度
   •   placeholder     背景字
   •   checked         默认选中  支持 单选/复选
   •   selected        默认选中
   •   autofocus       自动获取焦点
   •   autocomplete    自动提示    on/off
   •   readonly        只读 只能看不能改, 能提交给服务器
   •   disabled        禁用 只能看不能改, 不能再提交给服务器
   •   required        不能为空
   •   multiple        多选  支持 文件/ 下拉框

    

   分帧
   ​
   •       大分帧
   ​
   •           标签名: frameset   窗口设置    不能与body共存
   •           属性:     
   •           rows    行分          * : 剩余的空间
   •           cols    列分
   •           frameborder = 0 / 非0
   •           noresize
   •           标签名: frame      窗口
   •           属性: 
   •           src     窗口内容来源
   •           name    给窗口取名
   •           scrolling = yes/no  滚动条
   ​
   •       小分帧
   ​
   •           标签名: iframe         可以在body里面
   •           属性: 
   •           src             窗口内容来源 
   •           name            窗口名
   •           frameborder     窗口边框
   •           width           宽度
   •           height          高度
   •           scrolling       窗口滚动条